Bits & Babble

A blog in development.

Override Woocommerce Styles

June 12, 2014  

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.

functions.php
raw download
<?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' );
}

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

3 Comments

By SPENCER SOKOL
  • About
  • Twitter
  • Studio 27

Categories

  • Alloy
  • Android
  • Appcelerator Titanium
  • Babble
  • Debugging
  • Genesis
  • iOS
  • s2Member
  • Woocommerce
  • Wordpress

About Spencer Sokol

Spencer co-founded Studio 27, a small web and application design and development company in Indianapolis. He has spent many years in both the development and testing side of the software industry, and generally avoids talking to people face to face.

Trackbacks

  1. Pingback: Custom User Fields on Woocommerce My Account Page - Bits & Babble

Comments

  1. Mark Ratledge says

    August 5, 2014 at 10:40 am

    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

    Reply
    • Spencer Sokol says

      August 5, 2014 at 12:55 pm

      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.

      Reply

Leave a Reply Cancel reply

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

  • About
  • Indianapolis Design & Development
Copyright © 2021 Spencer Sokol

Copyright © 2021 · Bits and Babble on Genesis Framework · WordPress · Log in