Best Way to override woocommerce.css

Question

What's the best way to override woocommerce.css? In my style.css I have to write those css again to override it, and put !important after each css. I think this is not the best practice to do so. Anyone has a better idea?

Answer 1

My approach is to follow the principle cascade of CSS. So basically the one that loads last will override the previous rules if no !important was defined.

Check here:

//This is the order the css load by default, at leat on the sites I have worked!!!
<link rel="stylesheet" href="http:/css/custom_styles.css" type="text/css" media="all">
<link rel="stylesheet" href="http:/css/woocomerce.css" type="text/css" media="all">

So what is the idea Load your custom CSS after the woocommerce has loaded.

Method 1: Adding a Low priority on the [add_action] for the style add_action like:

function load_my_css(){
   wp_enqueue_style('custom-theme', URL TO STYLE);
}
// (the higher the number the lowest Priority)
add_action('wp_enqueue_scripts', 'load_my_css', 5000);

Method 2: Remove woocommerce styles, so you create your own styles

// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );

Method 3: Add dependency Array to your custom style

function load_my_css(){
   wp_enqueue_style('custom-theme', URL TO STYLE, array(DEPENDECIES HERE));
}

Hope one of the Methods helps.