WordPress.org

Forums

[resolved] Woocommerce customize css (6 posts)

  1. moehrvieh
    Member
    Posted 10 months ago #

    Hi,

    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 (http://s174705525.online.de/shop):
    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!

  2. Maria Antonietta Perna
    Member
    Posted 10 months ago #

    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:

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

    I took a screenshot of the result: http://uploadpie.com/lIVyt

    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.

  3. moehrvieh
    Member
    Posted 10 months ago #

    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!!?! :D

    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!

  4. Maria Antonietta Perna
    Member
    Posted 10 months ago #

    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.

  5. moehrvieh
    Member
    Posted 10 months ago #

    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

  6. Maria Antonietta Perna
    Member
    Posted 10 months ago #

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

Reply

You must log in to post.

About this Topic