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?

score 19 · Accepted Answer · answered Jul 30 '14 at 00:59

19

WooCommerce enqueues 3 stylesheets by default. You can disable them all using:

add_filter( 'woocommerce_enqueue_styles', '__return_false' );

For details on how to disable individual WooCommerce stylesheets, see their Disable the default stylesheet article.

answered Jul 30 '14 at 00:59

henrywright

10,070
23
89
150

Great, I didn't know woocommerce has 3 css, I thought it was just one. – user3390591 Jul 30 '14 at 01:24
Tks, I did dig into the document, sorry I'm still like to know for example if I just want to override one of button style, for example: .woocommerce ul.products li.product a, from woocommerce.css, how do you do it by function jk_dequeue_styles ? cause I only need to remove one of class style instead of whole stylesheet, tks – tess hsu Dec 17 '19 at 09:06

score 4 · Answer 2 · answered Jul 30 '14 at 01:40

There's another approach in an article by Carrie Dills. She's using the Genesis theme but it could be reworked for other themes I think.

In essence, what she recommends is changing 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.

For Genesis it looks like the below. If you can access your framework/theme's stylesheet loading with a similar hook, you could 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 );

score 4 · Answer 3 · answered Sep 25 '15 at 14:53

You can override woocommerce.css with custom.css file that can be located either in default wordpress theme or in child theme. You can also make a fallback to default woocommerce.css if something happens to 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');
    }
}

Same thing is for other woocommerce frontend styles (woocommerce-layout and woocommerce-smallscreen).

If you're doing this in child theme, then use get_stylesheet_directory_uri() instead of get_template_directory_uri() and change file path according to child theme name.

score 3 · Answer 4 · answered Nov 07 '17 at 10:40

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.

score 0 · Answer 5 · answered Apr 09 '21 at 15:39

You'll find what you need in WooCommerce documentation. They offer two functions to either:

Stop WooCommerce plugin from loading all or specific stylesheets using their woocommerce_enqueue_styles() function.
Add your custom stylesheets within their plugin using the wp_enqueue_woocommerce_style() allowing you to override woocommerce.css.

Link to WooCommerce documentation « disable the default stylesheets »

score 0 · Answer 6 · answered May 17 '21 at 11:59

For newer versions WooCommerce 4.x+ use this:

    add_action( 'wp_print_styles', 'dequeueWooCommerceStyles' );

    public function dequeueWooCommerceStyles()
    {
        wp_dequeue_style('wc-block-style');
        wp_deregister_style( 'wc-block-style' );
    }

Best Way to override woocommerce.css

6 Answers6