Support » Themes and Templates » Woocommerce customize css

  • Resolved moehrvieh



    already read different solutions how to customize the woocomerce.css but nothing work.
    1. files are writable (woocommerce/assets/css/woocommerce-base.less and woocommerce.css )
    2. Insert them in my child Theme of Yoko and tried to override them
    3. insert all the styles from woocommerce/assets/css/woocommerce-base.less and woocommerce.css to my own css for my child theme

    None of it worked…

    What do I want to change on the Shop Page (
    1. Don´t want to display the sidebars:

    .page-id-11 #secondary {
    display: none !important;

    .page-id-11 #tertiary {
    display: none !important;

    2. Don´t want the yellow background
    mark.count {
    background-color: transparent !important;

    3.even some other changes which are fixed with my child css on all other pages but
    don´t work with the woo commerce pages

    Would be perfect if somebody could help me with this…
    Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi Moehrvieh,

    I added display:none to the relevant elements and the code worked. I also noticed that the styles I was modifying were from your Yoko-Child theme, therefore there’s no doubt that your CSS is being picked up and applied correctly by WP. I don’t understand why your code above didn’t do its job. Here’s what I did:

    #tertiary {
        display: none;
    mark {
        background-color: transparent;

    I took a screenshot of the result:

    If you need that code applied only on that page, you can prefix those CSS declarations with .woocommerce-page or simply .woocommerce.

    I hope this helps 🙂

    – Maria Antonietta.

    Hi Maria Antonietta,

    thank you for your answer! 🙂
    Well if I do it with firebug or something like that it works too. But if I change the code in my css like that its not working. !!???WHY!!?! 😀

    Added this at the end of my css code:

    .woocommerce #secondary,
    #tertiary {
        display: none !important;
    .woocommerce mark {
        background-color: transparent !important;

    And nothing happened. -_-
    Any other idea?

    Thanks a lot!

    What seems weird is that when I select the sidebars, Firebug displays your CSS in the child theme (style.css) like this:

    #secondary {
        float: left;
        margin-left: 7.054%;
        width: 17.275%;
    #tertiary {
        float: right;
        overflow: hidden;
        width: 23.775%;

    It starts on line 101 of the code editor. As you can see, there’s no display: none CSS rule. Try modifying those declarations, because that’s what’s being applied at the moment.

    YES… It works! Thanks a lot Maria Antonietta!!! 🙂

    I don´t understand why it´s not working at the end of the css but I don´t care as long as it is working!!!

    You really made my day!

    Best, Julia

    That’s great to know, you’re very welcome, Julia!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Woocommerce customize css’ is closed to new replies.