Load Genesis child theme styles after WooCommerce styles

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.

Overwrite Styles WooCommerceOkay, 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.

default style load order with genesis and woocommerce

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.

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

65 thoughts on “WooCommerce & Genesis: An !Important Style Tip For You”

  1. Hi Carrie!

    Regards from Spain. First of all thanks for the blog, the podcast and even more for the amount of information you share with us, it is really amazing.

    Jus wanted to tell you that I am using in the website of a customer the theme SquareOne (genesis child theme of course) and I cannot make style.css load after woocommerce.css, i have been taking a look at the code of the plugin in GitHub and trying different combinations of the priorities, I don´t really know what is going wrong, also i have trouble with the parallax effect of the theme when I apply the code to functions.php. The only solution that works right now for me is the f*%/& !important in style.css, but I don´t like it at all.

    Some help would be really appreciated

    Thanks in advance

    Antonio

  2. Yes, you are right Carrie. Putting hundreds of “!important” declarations is annoying. Thanks for the tip. It worked like a charm for me.

    I saw you also created “Genesis Style Trump” plugin for this which is great if you don’t want to get into coding and theme file changes. Thanks again for sharing such a useful piece of information.

  3. I tried the code above. But for some strange reason, my theme’s styles still do not override the WooCommerce styles. I do see my theme’s CSS rules when I inspect the element, but it is crossed out. Any ideas?

  4. Hi Carrie
    I tried using your plugin. Same Result. The theme I am using is from (I don’t think it uses Parallax) https://github.com/neilgee/genesischild
    I picked it because it came with widgetized areas for the home page CTA’s. On a different note, do you have any recommendations for ecommerce themes by Genesis? I do have the Pro Pack with access to all Genesis Child themes by StudioPress.

    1. Hey Amit,

      Sorry for the delayed response. If you’re using Easy Digital Downloads or WooCommerce, you can install one of these plugins to any Genesis theme:

      Genesis Connect EDD – https://wordpress.org/plugins/genesis-connect-edd/
      Genesis Connect WooCommerce – https://wordpress.org/plugins/genesis-connect-woocommerce/

      Basically what those do is bridge the gap for templating differences between Genesis and WordPress.

      Even still, you’re still left with the task of styling a site to look e-commerce-ish. Too my knowledge, the only Genesis themes that are specifically styled for e-commerce are from Web Savvy Marketing and Pretty Darn Cute, neither of which is in your pro-pack. :/

      There’s a definite gap in the market for ready-made Genesis themes for e-commerce; there are more options if you step outside of Genesis, but then who wants to do that? 😛

      Cheers,
      Carrie

  5. Hey Carrie, thanks so much for your hard work! I have managed to use Genesis and executive pro with great results with woocommerce. Yesterday I tried to use the Education Pro theme with woo and can’t figure out how to make the shop content fit at all.. the left side of the shop content is pressed all the way against the site inner. (i am using the shop on the homepage) The same issue happened with Executive Pro but I was able to correct it, I just can’t figure it out with the Education Pro theme. Any ideas would be awesome and much appreciated!

    1. Hey there,
      I haven’t worked with Education Pro recently, but it sounds like the container widths are bigger for the shop content than they are for the theme.

      Are you using Genesis Connect for WooCommerce plugin? If not try that out and it may fix your issue. If it doesn’t, you’ll need to do some tinkering with your styles.

      Cheers,
      Carrie

Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.