Skip to content

woocommerce.css overrides style.css #1793

jorijnsmit opened this Issue Nov 20, 2012 · 24 comments

I found that the woocommerce CSS file was loaded after the default style.css and thus it was only possible to edit CSS properties in the theme's stylesheet by marking them !important.

The reason for this loading order is that in header.php the hook wp_head(); is placed after the stylesheet <link> and woocommerce.css with thus override properties that are also defined in style.css. Note that this is common practice according to the Wordpress Codex.

WooThemes member

Nothing much we can do about this - wp_head is where styles (enqueued) are output. We cannot put our styles anywhere else.

@mikejolley mikejolley closed this Nov 20, 2012
WooThemes member

Custom themes can turn off WC core styles - @jameskoster does that when building our themes.


That sounds more hardcore I like it.


Please be aware that your codex does however advise the following:

If you just want to make a few changes we’d recommend simply adding some over-riding styles to your theme stylesheet. For example add the following to your theme stylesheet to make WooCommerce buttons black instead of the default colour;



Can you change the priority? Would that work?


I solved this by indeed turning off the WC core styles, copy-pasting them into my own and editing where needed.


Hey jorijnsmit what do you mean by "turning off WC core styles"? I have copy pasted the woocommerce.css into my child theme and imported it into my styles.css, it seems that all I needed to do was turn the WC style off but don't know how to do it!


You can find it under the 'General' tab of your WooCommerce settings page.

Screenshot 2013-03-27 at 22 45 21

Mario-M commented Apr 24, 2013

Great tip on copying woocommerce.css over to style.css and disabling the core CSS styling of woocommerce all together.

Thanks for this.


Moving the CSS to your theme's style.css breaks the star font which shows the star ratings under reviews.

Don't forget to move the 'star' fonts from the assets directory of woocommerce into the fonts directory of your theme (you may have to edit the path as well in the woocommerce css that you've copied into your theme depending on where your fonts folder is located relative to your stylesheet).


While I had to tackle the same issue I found this thread, looking into it I suggest another aproach:
Disable the woocommerce.css in the woocommerce general settings (as already pointed out by @jorijnsmit)
but then import it right at the beginning of your theme's custom.css
like: @import url("../../plugins/woocommerce/assets/css/woocommerce.css");
afterwards you can make your adjustments in the custom.css which will override the previously loaded css rules.
So no need to touch or copy the original woocommerce.css.


Thanks for the suggestions. My solution was to disable woocommerce.css and then to wp_enqueue the woocommerce stylesheet before style.css

wp_enqueue_style('woocommerce_css', plugins_url() .'/woocommerce/assets/css/woocommerce.css');  
iagdotme commented Sep 4, 2013

@jorijnsmit the option to enable/disable WooCommerce CSS seems to have gone in the settings. Do you know why this was the case? Looking at the docs it seems the only way to do this is to declare the following:

define('WOOCOMMERCE_USE_CSS', false);

Do you know how to disable WooCommerce JS too?

WooThemes member

@iagdotme as of 2.1 you'll want to use add_filter( 'woocommerce_enqueue_styles', '__return_false' ); rather than the WOOCOMMERCE_USE_CSS constant.

iagdotme commented Sep 5, 2013

@jameskoster thanks. Actually both the define and add_filter methods worked for me with v2.1, but I assume it is best practice to use your method? I assume the CSS Structure Docs page will be updated soon with this.

Can we disable WooCommerce Javascript files from being enqueued? I am combining and minifying all my JS files using Grunt and want to declutter my code. Thanks!

WooThemes member

@iagdotme The constant is deprecated and will be removed in 2.2 I think. So yeah, use the filter :-)

Should be able to dequeue the wc js using wp_dequeue_script().


Here's another possible solution:

In most themes header.php files, the style.css is included like so:

    <!-- Get theme stylesheet -->
    <link href='<?php echo get_template_directory_uri(); ?>/style.css' rel='stylesheet' type='text/css'>

    <!-- Do wp_head(); -->
    <?php wp_head(); ?>

I think this way of including style.css should be discouraged anyway. Because it includes style.css before wp_head() and therefore creates the problem that this issue is about.


Remove the following line from your theme's header.php:

    <link href='<?php echo get_template_directory_uri(); ?>/style.css' rel='stylesheet' type='text/css'>

Next, include style.css AFTER woocommerce.css in your functions.php:

    function frontend_scripts() {

        wp_enqueue_style( 'mytheme-css', get_template_directory_uri() . '/style.css', array( 'woocommerce_frontend_styles' ) );

    add_action( 'wp_enqueue_scripts', 'frontend_scripts' );

style.css is included with woocommerce_frontend_styles as dependancy, and therefore after woocommerce.css


You are using the original woocommerce.css. You don't need to copy and paste it with every new version into your styles.css again.


Cheers @paddelboot, this definitely seems the right way to go. I already had style.css in the queue style and I am also using Bootstrap 2, and recompiling all my style with less.

I just have to add the dependency to the Bootstrap. So far, there has been no issues between Bootstrap style and Woocommerce style. Moreover, all my style modifications are compress with less.

webprom commented Feb 15, 2014

this is a problem again after 2.1 update. maybe we can put style.css of a child theme after all other css? but don't know how>?

WooThemes member

This is not a support channel. I recommend posting on forums. Thanks.


hiii this is the code i use too show product thumbnail,title,price,sale price injoy and give a feed back if it works 👍

                $args = array(
                    'post_type' => 'product',
                    'posts_per_page' => 4
                $l = new WP_Query($args);
            <?php if($l->have_posts()) : while($l->have_posts()) : $l->the_post();?>
                <div  class='column'>
                <?php the_post_thumbnail();?>
                <?php echo $product->get_title();?>
                <?php echo $product->get_price_html(); ?>

                </div><!--end column-->
            <?php endwhile;else:?>
                <p class='empty'><?php _e('Sorry no themes found.');?></p>/
@claudiosmweb claudiosmweb locked and limited conversation to collaborators Jan 29, 2015
WooThemes member

I know this is old, but in case anyone ends up here I'd just like to recommend to any theme authors; do not include your theme stylesheet directly in header.php. Enqueue it using wp_enqueue_style and hook into wp_enqueue_scripts. Then you can resolve issues like the OP described.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Something went wrong with that request. Please try again.