How To override wooCommerce cSS

The main purpose of overriding WooCommerce CSS is to apply your own design or to remove some design that you don’t like. Overriding WooCommerce CSS is very easy and takes only a few steps.

We have shown the exact step to override / remove WooCommerce CSS in this Video below.

To override WooCommmerce CSS, you need to select the particular HTML Element, basically a Class or an ID. Create your own CSS for that particular class or ID. Copy that CSS and Go to WP-admin -> Appearance -> Customize -> Additional CSS and paste it.

Note: you need to add “!important” to each css value to override the default WooCommerce CSS.

Disclosure: I may receive affiliate compensation for some of the links below at no cost to you if you decide to purchase a paid plan. You can read our affiliate disclosure in our privacy policy.

Removing the Entire Default WooCommerce CSS

If you want to remove the default WooCommerce CSS, completely and add your CSS file. Then you need to unhook the WooCommerce CSS file and hook your custom CSS file.

Do not edit the default WooCommerce CSS file asall your changes will be lost once you update WooCommerce.

To unhook the default CSS file, use the following PHP snippets. Copy it and paste it to your functions.php. To paste it to your functions.php file, you need to access your WordPress folder using FTP and then navigate to WP-content -> themes -> Your Current Activated theme Folder.

Find the functions.php file and edit it.

Paste the code at the bottom of the functions.php file

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

This will remove all the WooCommerce designs. Means all style from WooCommerce will be removed.

If you wan to remove only particular design of WooCommerce, then use the following codes.

// Remove each style one by one
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_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;
}

Adding your own CSS file to WooCommerce

Now I assume you have your custom design ready and in a CSS file. Lets call the New css file as “woonew.css” You need to upload the new CSS (woonew) file to the WP-content -> themes -> Your Current Activated theme Folder -> CSS Folder.

So once you have uploaded the css file, it should be accessible via the following link.

https://yourwebsite.com/wp-content/themes/YOURTHEME/css/woonew.css

[bravepop id=”10903″ align=”center”]

If you can access this file from your web browser than the CSS file is placed correctly. If you cannot access it, then you have made some error, somewhere.

I will assume that the file is accessible through the web browser with the following link and its working perfectly. Now you need to edit the functions.php file again.

Go to WordPress folder using FTP and then navigate to WP-content -> themes -> Your Current Activated theme Folder. Edit the functions.php file and put this codes at the end of the file.

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

Click on Save changes.

Now refresh your WooCommerce links in the frontend. You should see the changes and your custom designs working.

Need Help?

If you want to design or make some changes to your WooCommerce website, you can get professional help from GloriousThemes.com. Just go to their services section and order for Bug fixes or custom Design works, and order it.

Their professional team will sort it out in now time.

If you want to make the changes all by yourself then you should visit our Ultimate Guide to WooCommerce and Customizing it. If you want to customize the checkout pages and style, then you should get this awesome plugin – CartFlows to edit and design your own Checkout page using drag and drop editor and Elementor page Builder.

Check out the possibilities of Customizing WooCommerce using Elementor.

I hope this article has helped you override WooCommerce CSS and get your custom css work . If you have any queries, you can comment below or contact us. You can also subscribe to our YouTube and Like and Follow us on Facebook, Twitter and Instagram.