New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

woocommerce.css overrides style.css #1793

Closed
jorijnsmit opened this Issue Nov 20, 2012 · 24 comments

Comments

Projects
None yet
@jorijnsmit
Contributor

jorijnsmit commented Nov 20, 2012

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.

@mikejolley

This comment has been minimized.

Show comment
Hide comment
@mikejolley

mikejolley Nov 20, 2012

Member

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

Member

mikejolley commented Nov 20, 2012

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

@jorijnsmit

This comment has been minimized.

Show comment
Hide comment
@jorijnsmit

jorijnsmit Nov 20, 2012

Contributor

Is it an idea to make woocommerce.css part of the files that can be made
part /mytheme/woocommerce/ and thus overwrite the default?

I hope you see this makes it problematic to customize or write new themes.
On Nov 20, 2012 6:35 PM, "Mike Jolley" notifications@github.com wrote:

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


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/woocommerce/issues/1793#issuecomment-10564484.

Contributor

jorijnsmit commented Nov 20, 2012

Is it an idea to make woocommerce.css part of the files that can be made
part /mytheme/woocommerce/ and thus overwrite the default?

I hope you see this makes it problematic to customize or write new themes.
On Nov 20, 2012 6:35 PM, "Mike Jolley" notifications@github.com wrote:

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


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/woocommerce/issues/1793#issuecomment-10564484.

@mikejolley

This comment has been minimized.

Show comment
Hide comment
@mikejolley

mikejolley Nov 20, 2012

Member

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

Member

mikejolley commented Nov 20, 2012

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

@jorijnsmit

This comment has been minimized.

Show comment
Hide comment
@jorijnsmit

jorijnsmit Nov 20, 2012

Contributor

That sounds more hardcore I like it.

Contributor

jorijnsmit commented Nov 20, 2012

That sounds more hardcore I like it.

@jorijnsmit

This comment has been minimized.

Show comment
Hide comment
@jorijnsmit

jorijnsmit Nov 21, 2012

Contributor

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

Contributor

jorijnsmit commented Nov 21, 2012

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

This comment has been minimized.

Show comment
Hide comment
@surefirewebserv

surefirewebserv Mar 25, 2013

Can you change the priority? Would that work?

surefirewebserv commented Mar 25, 2013

Can you change the priority? Would that work?

@jorijnsmit

This comment has been minimized.

Show comment
Hide comment
@jorijnsmit

jorijnsmit Mar 26, 2013

Contributor

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

Contributor

jorijnsmit commented Mar 26, 2013

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

@lilireed

This comment has been minimized.

Show comment
Hide comment
@lilireed

lilireed Mar 27, 2013

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

lilireed commented Mar 27, 2013

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

@jorijnsmit

This comment has been minimized.

Show comment
Hide comment
@jorijnsmit

jorijnsmit Mar 27, 2013

Contributor

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

Screenshot 2013-03-27 at 22 45 21

Contributor

jorijnsmit commented Mar 27, 2013

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

Screenshot 2013-03-27 at 22 45 21

@lilireed

This comment has been minimized.

Show comment
Hide comment
@lilireed

lilireed Mar 28, 2013

Thanks! Feeling a little stupid...

On Wed, Mar 27, 2013 at 6:47 PM, Jorijn Smit notifications@github.comwrote:

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

[image: Screenshot 2013-03-27 at 22 45 21]https://f.cloud.github.com/assets/2835259/310806/c474b55a-9727-11e2-9482-b542df9bcfe9.png


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/woocommerce/issues/1793#issuecomment-15555254
.

lilireed commented Mar 28, 2013

Thanks! Feeling a little stupid...

On Wed, Mar 27, 2013 at 6:47 PM, Jorijn Smit notifications@github.comwrote:

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

[image: Screenshot 2013-03-27 at 22 45 21]https://f.cloud.github.com/assets/2835259/310806/c474b55a-9727-11e2-9482-b542df9bcfe9.png


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/woocommerce/issues/1793#issuecomment-15555254
.

@jorijnsmit

This comment has been minimized.

Show comment
Hide comment
@jorijnsmit

jorijnsmit Mar 28, 2013

Contributor

Or a bit smarter ;-)

On Thu, Mar 28, 2013 at 1:02 AM, lilireed notifications@github.com wrote:

Thanks! Feeling a little stupid...

On Wed, Mar 27, 2013 at 6:47 PM, Jorijn Smit notifications@github.comwrote:

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

[image: Screenshot 2013-03-27 at 22 45 21]<
https://f.cloud.github.com/assets/2835259/310806/c474b55a-9727-11e2-9482-b542df9bcfe9.png>


Reply to this email directly or view it on GitHub<
https://github.com/woothemes/woocommerce/issues/1793#issuecomment-15555254>

.


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/woocommerce/issues/1793#issuecomment-15560951
.

Contributor

jorijnsmit commented Mar 28, 2013

Or a bit smarter ;-)

On Thu, Mar 28, 2013 at 1:02 AM, lilireed notifications@github.com wrote:

Thanks! Feeling a little stupid...

On Wed, Mar 27, 2013 at 6:47 PM, Jorijn Smit notifications@github.comwrote:

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

[image: Screenshot 2013-03-27 at 22 45 21]<
https://f.cloud.github.com/assets/2835259/310806/c474b55a-9727-11e2-9482-b542df9bcfe9.png>


Reply to this email directly or view it on GitHub<
https://github.com/woothemes/woocommerce/issues/1793#issuecomment-15555254>

.


Reply to this email directly or view it on GitHubhttps://github.com/woothemes/woocommerce/issues/1793#issuecomment-15560951
.

@Mario-M

This comment has been minimized.

Show comment
Hide comment
@Mario-M

Mario-M 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.

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

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.

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

@doobidoo

This comment has been minimized.

Show comment
Hide comment
@doobidoo

doobidoo Jul 13, 2013

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/

doobidoo commented Jul 13, 2013

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

This comment has been minimized.

Show comment
Hide comment
@cypress-net

cypress-net Jul 23, 2013

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');  

cypress-net commented Jul 23, 2013

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

This comment has been minimized.

Show comment
Hide comment
@iagdotme

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

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?

@jameskoster

This comment has been minimized.

Show comment
Hide comment
@jameskoster

jameskoster Sep 5, 2013

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.

Member

jameskoster commented Sep 5, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@iagdotme

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

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!

@jameskoster

This comment has been minimized.

Show comment
Hide comment
@jameskoster

jameskoster Sep 6, 2013

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

Member

jameskoster commented Sep 6, 2013

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

@paddelboot

This comment has been minimized.

Show comment
Hide comment
@paddelboot

paddelboot Sep 19, 2013

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.

paddelboot commented Sep 19, 2013

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.

@robertour

This comment has been minimized.

Show comment
Hide comment
@robertour

robertour Nov 21, 2013

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.

robertour commented Nov 21, 2013

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

This comment has been minimized.

Show comment
Hide comment
@webprom

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

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

@jameskoster

This comment has been minimized.

Show comment
Hide comment
@jameskoster

jameskoster Feb 17, 2014

Member

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

Member

jameskoster commented Feb 17, 2014

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

@mikearuba

This comment has been minimized.

Show comment
Hide comment
@mikearuba

mikearuba Jan 29, 2015

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

        <?php   
                $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>/
            <?endif;wp_reset_postdata();?>

mikearuba commented Jan 29, 2015

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

        <?php   
                $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>/
            <?endif;wp_reset_postdata();?>

@woocommerce woocommerce locked and limited conversation to collaborators Jan 29, 2015

@jameskoster

This comment has been minimized.

Show comment
Hide comment
@jameskoster

jameskoster Jan 30, 2015

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.

http://codex.wordpress.org/Function_Reference/wp_enqueue_style#Using_a_Hook

Member

jameskoster commented Jan 30, 2015

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.

http://codex.wordpress.org/Function_Reference/wp_enqueue_style#Using_a_Hook

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.