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.