Update: This solution is now a plugin! You can download Genesis Style Trump from the WordPress repository.
Here’s the deal: You make a beautiful, beautiful website. You style your theme *just so* and take care to make every button, form field, and line of text a cohesive visual experience for the visitor.
But then you click over to one of your WooCommerce store pages and the style conflicts are enough to make you throw your laptop out the window and run screaming into insanity’s sunset.
Okay, maybe it’s not *that bad*, but the fact is default WooCommerce styles don’t look so hot in a theme that doesn’t include some custom CSS just for WooCommerce.
If you’re using WooCommerce with a Genesis child theme, you’ve got two basic options:
- Turn off WooCommerce styles completely
- Override WooCommerce styles with millions of
!important
declarations in your CSS
I don’t really like the first option ’cause that means you’re starting at square 1 to style every element of WooCommerce. The second option makes more sense, but I hate having to pepper !important
throughout my CSS. It’s a bad practice.
So what’s a girl to do?
Let’s Talk About Cascading Style Sheets (CSS)
Let’s back up the bus a second and talk about why you’d need to override WooCommerce styles in the first place. Why can’t you re-declare the styles you want (sans !important
) and be happy?
Well, that’s the nature of CSS. If you take two stylesheets (let’s say first is your child theme style sheet and second is your WooCommerce style sheet), the last style sheet to load will carry more weight than the first.
The screenshot below is a “view source” screen shot from a basic WordPress install running the Genesis Sample Theme and the WooCommerce plugin. Note that the Genesis Sample Theme CSS loads before the WooCommerce styles.
If we’re ever going to get rid of the endless !important
declarations to get the Genesis Sample theme styles to override the WooCommerce default styles, we need to load in the WooCommerce CSS first and then bring in our child theme CSS.
You with me?
There’s a couple of approaches you could use to do this:
- Unenqueue the WooCommerce styles and then re-enqueue them with a higher priority to come in over the Genesis child theme styles.
- Unenqueue the Genesis child theme styles and then re-enqueue them with a lower priority to come in after the WooCommerce styles.
I know a lot more about Genesis than I do WooCommerce, so I choose method #2, but I wanted you to know there’s more than one way to skin this cat, so to speak.
* Side note: If you’re not familiar with the term enqueue, it’s basically a way to introduce styles (and scripts) into a WordPress theme.
Load Genesis child theme styles after WooCommerce styles
Okay, enough preamble already. Let me show you some code and then I’ll explain what it’s doing.
<?php //Remove this line | |
/** | |
* Remove Genesis child theme style sheet | |
* @uses genesis_meta <genesis/lib/css/load-styles.php> | |
*/ | |
remove_action( 'genesis_meta', 'genesis_load_stylesheet' ); | |
/** | |
* Enqueue Genesis child theme style sheet at higher priority | |
* @uses wp_enqueue_scripts <http://codex.wordpress.org/Function_Reference/wp_enqueue_style> | |
*/ | |
add_action( 'wp_enqueue_scripts', 'genesis_enqueue_main_stylesheet', 15 ); |
First thing we need to know is where Genesis introduces the stylesheet into the mix. A little digging through Genesis Framework code shows the answer is in genesis/lib/css/load-styles.php. The code in question reads just like this:
add_action( 'genesis_meta', 'genesis_load_stylesheet' );
So, to get rid of it, I just changed the add_action
to a remove_action
. If you dropped just that line of code (line 7 in the example above) into your theme’s functions file and then refreshed your site, you’d see that there were no styles. NAKED THEME.
Next up, we want to add back in those Genesis child theme styles, but we want to make sure it happens after WooCommerce loads. We’ll still take our cue from genesis/lib/css/load-styles.php, but this time we’re interested in this line of code:
add_action( 'wp_enqueue_scripts', 'genesis_enqueue_main_stylesheet', 5 );
That 5 on the end signifies the priority, or the order in which a function executes. The default is 10, but this code happens a little earlier, at 5.
[Priorities are] used to specify the order in which the functions associated with a particular action are executed. Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order in which they were added to the action.
– The WordPress Codex
We want it to come in later, so we’ll just bump the priority to 15, as you can see in the last line of the code sample above. That’s just enough to bring in our theme’s stylesheet after WooCommerce, which means styles declared in the child theme will DONALD TRUMP those from WooCommerce.
So, that’s it. Drop the above code in your theme’s functions.php file, or wherever you safely make your theme changes. As always, test code in a development environment before trying it out on a live site.
Have a better way of doing this? I’d love to hear it. Leave a comment below and discuss!
Hi Carrie,
At first I wondered whether this post was just another article plugging a plugin. I scrolled down and saw “By Carrie Dils”…. the very same Carrie Dils I was only moments earlier listening to on Lynda.com (yes, you guessed it…. a Genesis tutorial video). I then scrolled back up and read the post with full confidence. I have no question… just wanted to thank you for your contributions. You are great!
Thank you, Tim. I appreciate that greatly!
Hi Carrie –
Very clever approach for those times when a wholesale change in CSS sheet loading priority is needed.
In my case, I usually override various Woocommerce stylings particularly for mobile responsive (@media only screen and (max-width: 768px)). The least conflicting yet most effective way I’ve found to achieve that is simply by targeting Woocommerce CSS selectors by using a higher specificity in my theme’s CSS.
I simply look up the original Woocommerce selector (Inspect Elements) and then add one extra specifier to the .woocommerce class (which typically appears in the ‘body’ element). For example, I often override this Woocommerce selector:
.woocommerce div.product div.images {
margin-bottom: 2em;
}
by adding “.single” to the .woocommerce class (no space between them, so it’s targeting Woocommerce “and” single classes together) like so :
.woocommerce.single div.product div.images {
margin-bottom: 10px;
}
It works well, and it’s also it’s an easy methodology to remember (so later on you can quickly scan through your theme’s CSS to recall what you did).
Cheers!
Hi Carrie,
Forgive me if this is the wrong place to post this. If anyone can redirect me I would greatly appreciate. I don’t think its a css issue per se. I am working with Interior Pro theme and Woocommerce. I see it has something to do with the genesis loops – I just want to make the archive category appear in the main content body so it inherits the same styling as say, articles or posts.
If anyone can offer some direction on this, thank you in advance 🙂
Hi Carrie,
Greetings from Montreal, Canada!
First, I would like to thank you for your generous contribution to the WordPress and the Genesis community! I started learning WordPress and using the genesis framework 6 months (ish) ago and I am already able to built my own website, thanks to people like you who willingly share their knowledge.
Sorry to jump in late in this post but I was wondering if there was any development on the customizer foodiepro child theme conflict with GST (customizer stops working when foodie pro style sheet is loaded at a later priority). I recently noticed you have raised a thread on github back in April 2015 (https://github.com/cdils/genesis-style-trump/issues/3) but I couldn’t find any resolution afterward. Would that problem be similar to the Altitude and Parallax Pro conflicts discussed earlier in this post, i.e. the enqueuing priority of style sheets? In addition, I am using woocommerce and some CSS rules are hard to overwrite before and after GST activation.
Thank you in advance for your advice.
Hello Carrie, I love the plugin 🙂
The problem is that I try to install in a WordPress 4.9.2–es_ES and it gives me an error Message:
“El plugin no tiene una cabecera válida.” in english : “the plugin has not a valid header”
¿could you help me?
Regards.
Hello again, I have read what you said in the wordpress web of your plugin, and now work.
Thanks!!!
Thanks Carrie! Still good almost 10yrs on.
Actually, I’ve just realised that the Genesis Sample theme does this by default so I’ve just moved all my styles into the genesis-sample-woocommerce.css file! silly
WOOT!