woocommerce.css overriding child theme style.css

Resolved robertnick01
(@robertnick01)

9 years ago
I’ve set up a child theme with Storefront as the parent and the woocommerce plugin active, which I’m trying to learn my way around. I thought I’d start with something very simple: changing the position of the site title so that it sits to the right of the page rather than the left. Initially I tried the code `.woocommerce-active .site-branding{
float: right;
}`
in the child’s style.css file but I noticed that the css file “inc\woocommerce\css\woocommerce.css” in the Storefront parent directory contained the code
```
.woocommerce-active .site-branding, .woocommerce-active .site-logo-anchor {
  float: left;
```
which was overriding it. I fixed it by changing the code in the child style.css to
```
.woocommerce-active .col-full .site-branding{
	float: right;
}
```
and it worked, but I was wondering why code in the woocommerce.css file took precedence over the child’s style.css file? In the child’s functions.php I’ve copied
```
<?php
 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
```
from https://codex.wordpress.org/Child_Themes and I thought that the child css file was loaded last and would therefore override parent code in this case? Sorry if this seems like a silly question!

Viewing 14 replies - 1 through 14 (of 14 total)

CrouchingBruin
(@crouchingbruin)

9 years ago

I thought that the child css file was loaded last and would therefore override parent code in this case?

Your child theme’s style.css file will be loaded after the parent theme’s style.css file, but not necessarily (and most likely) not after any plugin’s CSS. So for any rules having the same specificity, the latter rule will have precedence. That’s why I sometimes recommend using JetPack’s custom CSS to add overriding CSS rules. JetPack will almost always put it’s stylesheet after all other plugin’s stylesheet, so that any rules added through JetPack with the same specificity as a previously defined rule will take precedence.

Thread Starter robertnick01
(@robertnick01)

9 years ago

Thank you, I’ll definitely have a look into the JetPack plugin. Reading my post again I realised it’s probably not apparent that the woocommerce.css file containing the overriding rule is in the Storefront theme folder, not in the woocommerce plugin folder.

CrouchingBruin
(@crouchingbruin)

9 years ago

Yes, and I may not have been clear, either, when I mentioned the ordering of CSS stylesheets. It doesn’t really matter where the stylesheet is physically located that determines the precedence of a rule with identical specificity, but the order in which the stylesheet appears in the web page. That is, you would do a view source on the page to see the order in which stylesheets are loaded, and that ordering doesn’t depend on the physical location of the CSS file.

Thread Starter robertnick01
(@robertnick01)

9 years ago

I see, that would explain the wordpress.css stylesheet overriding my own because it’s listed last in my page’s html. I’m not sure how to change it though, even disabling the woocommerce stylesheets with
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
doesn’t remove it.

James Koster
(@jameskoster)

9 years ago

CrouchingBruin is correct, the woocommerce.css stylesheet is loaded after the child theme style.css file. I’d recommend leaving that file empty and enqueueing a separate stylesheet for your child theme, or, if you’re just making css edits use a custom css plugin/jetpack.

Thread Starter robertnick01
(@robertnick01)

9 years ago

So I should leave the child theme’s style.css file empty and enqueue another stylesheet instead. How would I ensure it is loaded after woocommerce.css? Thanks for your help so far guys.

James Koster
(@jameskoster)

9 years ago

Just make sure that the function that enqueues your child theme stylesheet it hooked in later than the WooCommerce one.

Take a look here:

https://github.com/woothemes/storefront/blob/master/inc/woocommerce/hooks.php#L12

You can see that the WooCommerce stylesheet is hooked in with a priority of 20. If you enqueue yours with a priority of 30 it will load after and your styles will over rule the WooCommerce ones.

Cheers

thesloog
(@thesloog)

9 years ago

@jameskoster,

I tried exactly what you said but woocommerce.css is stll loaded after my child theme style.css:

function theme_enqueue_styles() {

wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array(‘parent-style’)
);
}

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’, 30);

James Koster
(@jameskoster)

9 years ago

Hey,

I’m not sure what to say. It’s working fine for me, this is exactly what we do in our child themes. The only difference is that we set a higher priority. Maybe try that?

Thread Starter robertnick01
(@robertnick01)

9 years ago

Thanks James, that worked for me. I guess I ought to mark this topic as resolved. Thanks again for your help.
delidoodle
(@delidoodle)

8 years, 10 months ago
James – I followed your suggestions by leaving the style.css blank, enqueueing a separate style sheet and hooking my custom.css stylesheet later than woocommerce.css. Now any changes I make using the built-in theme customizer (Appearance/Customize) are ignored. How do I re-enable the theme customizer? Thanks.
```
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 30);
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/custom.css',
        array('parent-style')
    );
}
```
ericcrooks
(@t4kteek)

8 years, 10 months ago

thesloog,

From a stock setup of Storefront and a child theme, you only have to add this line to your child theme’s functions.php file:

add_filter( 'wp_enqueue_scripts', 'storefront_woocommerce_scripts', 1);

The number “1” at the end of the code is the priority number, meaning it has first priority to be executed (along with other default WordPress actions).

A theme’s stylesheet has a priority of 10 when it is loaded. This is the default setting WordPress have given themes. You can find it in the /wp-includes/default-filters.php file at around line 205.

What you currently have is a priority setting of 30:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 30);

Just change your “30” to 1″ to ensure that the woocommerce.css file is always executed first before any other stylesheet. You can keep the “add_action” in your code instead of “add_filter” like I have stated. I haven’t come across any problems with either.

Claire M
(@claire-m)

8 years, 2 months ago

Thank you ericcrooks
“add this line to your child theme’s functions.php file:

add_filter( ‘wp_enqueue_scripts’, ‘storefront_woocommerce_scripts’, 1);”

that worked for me.

netcha
(@netcha)

8 years ago

Hi ,,, i have a same issu but my theme is storex theme

and my functions.php in the child theme is

<?php
/**
* storex child functions and definitions.
*
*/

add_action(‘wp_enqueue_scripts’, ‘child_theme_enqueue_styles’,1);
function child_theme_enqueue_styles() {
wp_enqueue_style(‘parent-style’, get_template_directory_uri().’/style.css’);
wp_enqueue_style(‘child-style’, get_stylesheet_directory_uri().’/style.css’, array(‘parent-style’,’plumtree-woo-styles’));
}

i want the styles.css to be over the woo-comerce style