Skip to content
This repository

woocommerce.css overrides style.css #1793

Closed
jorijnsmit opened this Issue · 22 comments

12 participants

Jorijn Smit Mike Jolley surefirewebserv lilireed Mario-M Henry cypress-net Ian Anderson Gray James Koster Michael Schröder Roberto Iggy
Jorijn Smit

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.

Mike Jolley
Owner

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

Jorijn Smit
Mike Jolley
Owner

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

Jorijn Smit

That sounds more hardcore I like it.

Jorijn Smit

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;

(http://wcdocs.woothemes.com/codex/css-structure/)

surefirewebserv

Can you change the priority? Would that work?

Jorijn Smit

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

lilireed

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!
Thanks

Jorijn Smit

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

Screenshot 2013-03-27 at 22 45 21

lilireed
Jorijn Smit
Mario-M

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

Thanks for this.

EDIT:

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).

Henry

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.

http://intelligent-it.asia/

cypress-net

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');  
Ian Anderson Gray

@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?

James Koster

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

Ian Anderson Gray

@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!

James Koster

@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().

Michael Schröder

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.

Solution:

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

Benefit:

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.

Roberto

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.

Iggy

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>?

James Koster
Owner

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

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