How to Remove the Default loaded CSS in WooCommerce?

If you are building your own template and intend to use WooCommerce, or if you want to customize any template that uses WooCommerce for RTL and adapt it to Hebrew, you probably want to remove the default loaded style files (CSS) with WooCommerce and load the style files you create.

In this short post, we’ll see how to disable the loading of CSS in WooCommerce using a child theme.

Removing all WooCommerce CSS files

In order to remove the CSS, you need to add the following code to the functions.php file of your child theme or any plugin such as Code Snippets, which allows adding functions of this type.

Please note that you should not add this code to the functions.php file of the parent theme, as it will likely be deleted when you update the theme.

WooCommerce enqueues three default CSS files. You can disable the loading of all of them together using the following code:

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

This is the recommended way if you are building a custom theme from scratch. Removing the default loaded CSS files in WooCommerce and enqueuing your own will save you when updating WooCommerce core files.

By the way, check out the post explaining How to Prevent Loading WooCommerce’s JS & CSS Files from specific pages on your site.

Removing specific WooCommerce CSS files

If you want to disable the loading of specific style files, for example, when you only want to load the CSS file for small screens and mobile devices, you can use the following code:

/**
 * Set WooCommerce image dimensions upon theme activation
 */
// Remove each style one by one
function savvy_dequeue_styles( $enqueue_styles ) {
	unset( $enqueue_styles['woocommerce-general'] );	// Remove the gloss
	unset( $enqueue_styles['woocommerce-layout'] );		// Remove the layout
	unset( $enqueue_styles['woocommerce-smallscreen'] );	// Remove the smallscreen optimisation
	return $enqueue_styles;
}
add_filter( 'woocommerce_enqueue_styles', 'savvy_dequeue_styles' );

Afterward, you can add (enqueue) your own CSS files as follows:

/**
 * Enqueue your own stylesheet
 */
function wp_enqueue_woocommerce_style(){
	wp_register_style( 'mytheme-woocommerce', get_template_directory_uri() . '/css/woocommerce.css' );
	
	if ( class_exists( 'woocommerce' ) ) {
		wp_enqueue_style( 'mytheme-woocommerce' );
	}
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );

Done.