Best way to override woocommerce.css

Question

What is the best way to override woocommerce.css? In my style.css, I have to write these css again in order to override it, and deliver! Important after each css. I think this is not the best practice. Anyone have a better idea?

Answer 1

WooCommerce by default adds 3 styles. You can disable them all using:

add_filter( 'woocommerce_enqueue_styles', '__return_false' ); 

For more information on how to disable individual WooCommerce style sheets, see the article Disable the default article .

Answer 2

There is another approach in the article by Carrie Dills. It uses the Genesis theme, but it can be redesigned for other themes that I think.

In essence, what she recommends is changing the loading order of your styles so that the theme stylesheet loads after the WooCommerce stylesheet. that is, it is queued with a higher priority.

For Genesis, this is as follows. If you can access the loading of the framework / theme stylesheet using a similar hook, you can do the same.

 /** * Remove Genesis child theme style sheet * @uses genesis_meta <genesis/lib/css/load-styles.php> */ remove_action( 'genesis_meta', 'genesis_load_stylesheet' ); /** * Enqueue Genesis child theme style sheet at higher priority * @uses wp_enqueue_scripts <http://codex.wordpress.org/Function_Reference/wp_enqueue_style> */ add_action( 'wp_enqueue_scripts', 'genesis_enqueue_main_stylesheet', 15 ); 

Answer 3

You can override woocommerce.css using the custom.css file, which can be located either in the default Wordpress theme or in a child theme. You can also make a default backup of woocommerce.css if something happens to the custom.css file.

 add_action('wp_enqueue_scripts', 'override_woo_frontend_styles'); function override_woo_frontend_styles(){ $file_general = $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/twentyfifteen/css/custom.css'; if( file_exists($file_general) ){ wp_dequeue_style('woocommerce-general'); wp_enqueue_style('woocommerce-general-custom', get_template_directory_uri() . '/css/custom.css'); } } 

The same goes for other styles of the external woocommerce style (woocommerce-layout and woocommerce-smallscreen).

If you do this in a child theme, use get_stylesheet_directory_uri () instead of get_template_directory_uri () and change the file path to match the name of the child theme.

Answer 4

My approach is to follow the CSS cascade principle. So basically the one that loads the last will override the previous rules, if not defined ! Important

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 Download your custom CSS after loading woocommerce.

Method 1 : add a low priority to [add_action] for the add_action style:

 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 the woocommerce styles so that you create your own styles.

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

Method 3 : add an array of dependencies to your own style

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

Hope one of the methods helps.