Update: Leandro made a great suggestion, which is to declare the WooCommerce stylesheet as a dependency, which gets the job done in less lines of code. I’ve updated the gist to reflect this:

10 responses to “Override WooCommerce Styles Semantically

  1. Cool this solved my headache, one quick question what if woo commerce decides to change the name

    woocommerce_frontend_styles

    To something else?

    1. It is highly unlikely that they will, as it will cause backwards compatibility issues with every site using WooCommerce, but if they do, then we’ll just have to update accordingly.

  2. could you please give a more specific example on this?
    // register and enqueue your custom styles here

    i didn’t understand what i have to do there… i want to customize for now only 2 woocommerce css file

    woocommerce.css and woocommerce-layouts.css with 2 custom css file in my theme /yoo_vida_wp/style/sweet/css/woocommerce.css
    and /yoo_vida_wp/style/sweet/css/woocommerce-layouts.css

  3. Hello!

    I’m using Woocommerce 2.1.11, and looks like they have changed woocommerce_frontend_styles to woocommerce-general.

    Furthermore, just enqueuing your styles this way:

    wp_enqueue_style(‘my-woocommerce-style’, get_template_directory_uri().’/my-woocommerce-style.css’, array(‘woocommerce-general’));

    Is enough to cascade your styles properly, having my-woocommerce-style.css loading AFTER woocommerce.css

    Cheers

    1. Hi Leandro,

      Yes, it appears that WooCommerce has changed the naming of their css styles – something I thought they would never do. It’s easy to update though.

      I like your suggestion to enqueue custom styles and including the woocommerce-general css as a dependency works simple and fast.

  4. You might mention, for child themes, you can use:

    wp_enqueue_style(‘style-css’, get_stylesheet_directory_uri().’/style.css’, array(‘woocommerce-general’));

    Thanks for this, a great solution!

Leave a Reply

Your email address will not be published.