Override Woocommerce Styles

While it looks great out of the box, most people will still have a need to override Woocommerce styles to match their site design. Unfortunately, this may not be as easy as the documentation makes it out to be.

If you just want to make a few changes we’d recommend simply adding some over-riding styles to your theme stylesheet.

The Problem

In my experience, simply adding overriding styles to your theme style.css doesn’t always work because WordPress could load your theme stylesheet before the Woocommerce stylesheets. This leaves us with having to do really ugly things, like using !important. I really hate using !important. What we need is to make sure we’re loading our custom Woocommerce styles after Woocommerce has loaded its styles.

Always Override Woocommerce Styles

There are a couple of ways to counteract this. I prefer to use the priority parameter of the add_action hook. To do this, we need to start by creating a woocommerce.css file in our theme. Once we have that, we can hook into the wp_enqueue_style action in our theme’s functions.php.

<?php
 
add_action( 'wp_enqueue_scripts', 'my_wp_enqueue_scripts', 20 );
 
function my_wp_enqueue_scripts() {
  wp_enqueue_style( 'my-woocommerce', get_stylesheet_directory_uri() . '/css/woocommerce.css', null, '1.0' );
}

Essentially we’re just loading up our scripts and stylesheets after most plugins load up their stuff. The key is the priority of 20 in our add_action call. This approach will work not only to override Woocommerce styles, but for any styles you need to override for any other plugins as well. You may need to raise the priority from 20 to 100 or what have you, but the approach will still be valid.