How to Remove the Default WooCommerce CSS from Your Theme

WooCommerce comes with a lot of custom styling that integrates with your WordPress theme automatically. Since every WordPress theme isn’t developed with WooCommerce support the intention here is to get you up and running, regardless of your theme choice, as quickly as possible.

This is great for the “do it yourself” store owners who just want to get to the business of selling products quickly and aren’t interested or too concerned with how their site’s appear. If you want some more control over your store, or are using a totally original WordPress theme built from scratch, the default WooCommerce CSS might be something you want to remove from your site.

How to Disable WooCommerce’s CSS with Code

Open up your theme, or child theme’s, functions.php and drop the following single line of code:

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

Save the file and upload it back to where it came from and you’re all set. This code prevents WooCommerce from loading any of the stylesheets it usually serves up by default. The result is that the store-related pages on your site are probably going to look pretty terrible:

Default CSS Removed from WooCommerce
An example of what your site will look like with WooCommerce’s default CSS removed

The upside of this is that you can start from a clean slate when designing your theme’s WooCommerce templates. This method is preferable to writing a bunch of CSS hacks and rules to try and disable everything by yourself.

How to Remove WooCommerce CSS with Our Plugin

Remove WooCommerce Features lets you turn off the default CSS on your store without the need to edit any files. The process is simple.

Step #1

Go to the WooCommerce section of your WordPress installation’s admin menu and click the link that says “Remove Features.”

WooCommerce Admin Menu

Step #2

Find the setting for “Default CSS” and click the checkbox so that it’s marked like so:

RemoveWoo Commerce Features - Default CSS

Step #3

Press the “Save Settings” button.

Save Settings Button

WooCommerce will stop serving its stylesheet files once you’ve hit the button to save your settings. Now it’s on you, or your WordPress developer, to write custom CSS to support WooCommerce templates inside of your existing theme.

This is a very developer-focused feature removal but our plugin can help you disable a lot of other parts of WooCommerce as well using the same simple three step method. With Remove WooCommerce Features you can:

You can check out the entire list of WooCommerce features our plugin works with on our site.