Overriding Woocommerce CSS

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.



Do you need help with a project? or have a new project in mind that you need help with?

Contact Me