WooCommerce & Genesis: An !Important Style Tip For You

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:

1. Turn off WooCommerce styles completely
2. 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:

1. Unenqueue the WooCommerce styles and then re-enqueue them with a higher priority to come in over the Genesis child theme styles.
2. 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.

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!