WooCommerce loads three CSS files by default on every page of your site. If you’re building a custom theme or need full control over your store’s styling, you’ll want to remove these default stylesheets and replace them with your own.
In this guide, you’ll learn what the three default CSS files are, how to remove all or specific ones, and how to properly enqueue your own WooCommerce styles.
WooCommerce’s three default CSS files are:
woocommerce-general.css(core styles like buttons and forms),woocommerce-layout.css(grid and column structure), andwoocommerce-smallscreen.css(responsive styles for screens under 768px). Together, they define the complete visual appearance of WooCommerce pages.
Removing All WooCommerce CSS Files
The simplest approach is to remove all three CSS files at once using the woocommerce_enqueue_styles filter. Add this code to your child theme’s functions.php file:
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );This one-liner tells WooCommerce to enqueue no stylesheets at all. It’s the recommended approach when you’re building a custom theme from scratch and writing all WooCommerce styles yourself.
Always add this code to your child theme’s functions.php, not the parent theme. Parent theme updates will overwrite the file and restore the default CSS loading. Alternatively, use a code snippets plugin to keep your customizations safe.
Removing Specific WooCommerce CSS Files
If you only want to remove certain stylesheets while keeping others, use the same filter but selectively unset() the ones you don’t need:
add_filter( 'woocommerce_enqueue_styles', function( $styles ) {
unset( $styles['woocommerce-general'] ); // Core styles (buttons, forms, messages)
unset( $styles['woocommerce-layout'] ); // Grid and column layout
// unset( $styles['woocommerce-smallscreen'] ); // Responsive (keep this one)
return $styles;
} );This example removes the general and layout styles but keeps the responsive smallscreen stylesheet. This is useful when you want to write your own desktop layout but keep WooCommerce’s mobile optimizations.
Here’s what each stylesheet handles:
| Stylesheet | Key | Purpose |
|---|---|---|
| woocommerce-general.css | woocommerce-general | Buttons, form elements, notices, badges, and typography |
| woocommerce-layout.css | woocommerce-layout | Product grid columns, sidebar layout, and page structure |
| woocommerce-smallscreen.css | woocommerce-smallscreen | Responsive adjustments for screens below 768px |
Enqueuing Your Own WooCommerce Stylesheet
After removing the defaults, enqueue your custom stylesheet so WooCommerce pages still look styled:
add_action( 'wp_enqueue_scripts', function() {
if ( class_exists( 'WooCommerce' ) ) {
wp_enqueue_style(
'mytheme-woocommerce',
get_stylesheet_directory_uri() . '/css/woocommerce.css',
array(),
'1.0.0'
);
}
} );The class_exists( 'WooCommerce' ) check ensures your stylesheet only loads when WooCommerce is active. Using get_stylesheet_directory_uri() (not get_template_directory_uri()) ensures the file is loaded from your child theme.
Conditional Loading: Only on WooCommerce Pages
If you want your custom WooCommerce CSS to load only on shop pages (and not on regular posts or pages), use WooCommerce’s built-in conditional functions:
add_action( 'wp_enqueue_scripts', function() {
if ( ! function_exists( 'is_woocommerce' ) ) {
return;
}
if ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) {
wp_enqueue_style(
'mytheme-woocommerce',
get_stylesheet_directory_uri() . '/css/woocommerce.css',
array(),
'1.0.0'
);
}
} );This prevents unnecessary CSS from loading on non-WooCommerce pages, improving performance. For more techniques on removing unused CSS and JS, see the guide on preventing WooCommerce assets from loading on all pages.
FAQs
Common questions about WooCommerce CSS:
woocommerce-general.css handles core visual styles like buttons, form inputs, notices, and price labels. woocommerce-layout.css defines the page structure, product grid columns, and sidebar positioning. woocommerce-smallscreen.css adds responsive rules for screens under 768px wide. You can remove any combination of these independently.get_stylesheet_directory_uri() when working with a child theme. It points to the child theme directory where your custom files live. get_template_directory_uri() always points to the parent theme, even when a child theme is active. Using the wrong function means WordPress won't find your CSS file.woocommerce_enqueue_styles filter removes the CSS globally. If you want to remove it only from non-WooCommerce pages while keeping it on shop pages, use wp_dequeue_style() inside a wp_enqueue_scripts action with conditional checks like is_woocommerce(), is_cart(), and is_checkout().functions.php will continue to dequeue the defaults and load your file instead. This is actually one of the main reasons to use your own stylesheet - it's update-safe.Summary
WooCommerce loads three CSS files by default: general styles, layout, and smallscreen responsive. To remove all of them, use add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' ) in your child theme.
For selective removal, use unset() on the specific stylesheet keys within the same filter. After removing the defaults, enqueue your own stylesheet using get_stylesheet_directory_uri() to load it from your child theme.
For better performance, consider loading your WooCommerce CSS only on shop pages using conditional functions like is_woocommerce(). For more on removing CSS and JS loaded by plugins, check the related guide.
