Overriding Woocommerce CSS

Date Posted: January 5, 2015, 5:28 am


Add the the block of code bellow into your functions.php

1
2
3
4
5
6
7
8
9
add_action('wp_enqueue_scripts', 'cvf_st_load_custom_css_before_main') );

function cvf_st_load_custom_css_before_main() {
         
    if (class_exists('woocommerce')){
        wp_enqueue_style('my-woocommerce-style', get_template_directory_uri().'/css/woocommerce.css', array('woocommerce-general'));
    }
   
}

Make sure that you change “get_template_directory_uri().’/css/woocommerce.css'” to the path of your custom style sheet.

In essence, what we did is we changed the order that your styles load so that your theme’s stylesheet is loaded after the WooCommerce stylesheet. i.e. it is enqueued at a higher priority.

About author


Carl Victor Fontanos

A fine gentleman specializing in front-end and back-end development with extensive experience building high performance web applications that keeps users engaged and help businesses grow.

 
Hire Me