CODEWITHSUNDEEP
wordpresswoocommerce
user3390591
user3390591

Reputation: 183

Best Way to override woocommerce.css

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?

Upvotes: 14

Views: 39856

Answers (6)

osemec
osemec

Reputation: 259

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' );
    }

Upvotes: 0

MartinDubeNet
MartinDubeNet

Reputation: 137

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

  1. Stop WooCommerce plugin from loading all or specific stylesheets using their woocommerce_enqueue_styles() function.
  2. 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 »

Upvotes: 0

T04435
T04435

Reputation: 13992

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.

Upvotes: 3

sherfa
sherfa

Reputation: 41

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.

Upvotes: 4

Pat Gilmour
Pat Gilmour

Reputation: 701

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 );

Upvotes: 4

henrywright
henrywright

Reputation: 10240

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.

Upvotes: 21

Related Questions