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.
Good trick to use the priority parameter to adjust loading sequences, but you’ve got a mistake in your code; get_stylesheet_dir_uri should be get_stylesheet_directory_uri
And FYI, the “Raw” button throws a white page.
— Mark
Thanks, I’ve updated the code. Looks like the “raw” problem is an issue with the WP-Syntax plugin. I’ll have to look into that.