Home WordPress Tutorial How to remove the default CSS File Of WordPress

How to remove the default CSS File Of WordPress

by tranglt

To support the basic store functions of your website, Woocommerce load automatically its CSS to the website’s front-end. These files are woocommerce-layout.css, woocommerce-smallscreen.css và woocommerce.css. They contains the large capacity that affects the website’s speed. In case, if the theme used for website included the custom CSS of Woocommerce, the above CSS files are unnecessary.

Remove the default CSS of Woocommerce

To reject the default Woocommerce CSS, just add the extra code below to the file functions.php of theme or child theme activated.

Small Tip: You can use plugin Code Snippets to inserts the code.

add_filter( 'woocommerce_enqueue_styles', '__return_false' );

If you want to remove some code in the files, just use the code below

add_filter( 'woocommerce_enqueue_styles', 'cc_dequeue_styles' );
function cc_dequeue_styles( $enqueue_styles ) {
	unset( $enqueue_styles['woocommerce-general'] );	// Remove woocommerce.css
	unset( $enqueue_styles['woocommerce-layout'] );		// Remove woocommerce-layout.css
	unset( $enqueue_styles['woocommerce-smallscreen'] );	// Remove the woocommerce-smallscreen.css
	return $enqueue_styles;

Important: Just delete the code line that you want to hold on.

Clear cache on your website or browser, then view source to check the result.

Insert the custom CSS to Woocommerce.

If you want to integrate your own custom CSS to Woocommerce, please insert the code below into file functions.php of theme or child theme activated.

add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );

function wp_enqueue_woocommerce_style(){

	wp_register_style( 'mytheme-woocommerce', get_stylesheet_directory_uri() . '/css/woocommerce.css' );

	if ( class_exists( 'woocommerce' ) ) {
		wp_enqueue_style( 'mytheme-woocommerce' );
	}
}

Note: please replace the path /css/woocommerce.css by the position saved theme and the file name. 

The above code will be added to the whole pages of the website. However, if you want the CSS file only load on the store pages. cart, checkout, just use the code below

add_action('wp_enqueue_scripts','cc_load_woocommerce');

function cc_load_woocommerce() {

if( is_page(array( 'shop', 'cart', 'checkout' ) ) or 'product' == get_post_type() ) {
	wp_enqueue_style( 'wpb-woo', get_stylesheet_directory_uri() . '/css/woocommerce.css',  '', '3', 'all');		
	}
}

Hope this guide will be useful for you. Check it out, if you have any question, just leave a comment below or submit a ticket., we are pleased to discuss with you.

Chuyencode Team offers the solutions for your WordPress sites. If you need any help, just contact us.

You may also like

Leave a Comment