Disable Default WooCommerce Stylesheets

By default whenever you activate the “WooCommerce” plugin on your WordPress site, it also enables some of the “Stylesheet” file. These stylesheet files are basically used to style some of the elements within the native WooCommerce template files. It could be both useful or problematic depending on how you want to design your site.

There are total of three stylesheet file (woocommerce.css, woocommerce-layout.css and woocommerce-smallscreen.css) that holds the basic WooCommerce layout all together. You can definitely remove them individually or simply remove all of the in one shot. The choice is yours.

Removing Specific Stylesheet

Removing all the stylesheet support will definitely require you to style every single element of WooCommerce from ground up. So, removing one specific stylesheet could be a great choice to work on certain part of the total design. Let’s say you want to remove the support for “smallscreen.css” from the site and you want to re-write it on your theme’s default stylesheet (style.css) file. You can do it like this.

<?php
function remove_default_woocomerce_styles($styles) {
   unset($styles['woocommerce-smallscreen']);
   return $styles; }
   add_filter('woocommerce_enqueue_styles','remove_default_woocomerce_styles');
?>

Similarly, if you want to remove the “woocommerce-layout.css” file, you can do it like this:

unset($styles['woocommerce-general']);

And for the the default “woocommerce.css” file, add the following line within the function.

unset($styles['woocommerce-layout']);

All you need to do is to copy the function on your current theme’s functions.php page and update it. You are good to go.

Remove All

Just in case if you are thinking that if there is any shortcut way to remove all the stylesheet file from the site easily, here is the solution for you.

<?php add_filter('woocommerce_enqueue_styles','__return_false'); ?>

Like before, just copy and paste the snippet on your theme’s functions.php page. Now, get creative with your design.