Best Way to override woocommerce.css

1 Views

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?

Post Views: 1

Related posts

Leave a Reply

6 comments

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

  3. 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.

  4. 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.

  5. 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.

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