12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Mar 7, 2022

How to Remove WooCommerce CSS, JS from non WooCommerce Pages in WordPress

Sridhar Katakam

When WooCommerce is active it loads a bunch of CSS files, JS files and other stuff like meta generator tag, body class, inline scripts.

If your site does not have sitewide WooCommerce related features like a header mini cart, it makes sense to unload/dequeue these assets on all the pages other than where WooCommerce is actually used like the single products, Shop page, Cart, Checkout, Account pages.

To conditionally load WooCommerce stuff only on WooCommerce-pages, add the following code either in your active theme’s functions.php at the end or as a Code Snippet:

/**
 * Callback function that returns true if the current page is a WooCommerce page or false if otherwise.
 *
 * @return boolean true for WC pages and false for non WC pages
 */
function is_wc_page() {
	return class_exists( 'WooCommerce' ) && ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() );
}

add_action( 'template_redirect', 'conditionally_remove_wc_assets' );
/**
 * Remove WC stuff on non WC pages.
 */
function conditionally_remove_wc_assets() {
	// if this is a WC page, abort.
	if ( is_wc_page() ) {
		return;
	}

	// remove WC generator tag
	remove_filter( 'get_the_generator_html', 'wc_generator_tag', 10, 2 );
	remove_filter( 'get_the_generator_xhtml', 'wc_generator_tag', 10, 2 );

	// unload WC scripts
	remove_action( 'wp_enqueue_scripts', [ WC_Frontend_Scripts::class, 'load_scripts' ] );
	remove_action( 'wp_print_scripts', [ WC_Frontend_Scripts::class, 'localize_printed_scripts' ], 5 );
	remove_action( 'wp_print_footer_scripts', [ WC_Frontend_Scripts::class, 'localize_printed_scripts' ], 5 );

	// remove "Show the gallery if JS is disabled"
	remove_action( 'wp_head', 'wc_gallery_noscript' );

	// remove WC body class
	remove_filter( 'body_class', 'wc_body_class' );
}

add_filter( 'woocommerce_enqueue_styles', 'conditionally_woocommerce_enqueue_styles' );
/**
 * Unload WC stylesheets on non WC pages
 *
 * @param array $enqueue_styles
 */
function conditionally_woocommerce_enqueue_styles( $enqueue_styles ) {
	return is_wc_page() ? $enqueue_styles : array();
}

add_action( 'wp_enqueue_scripts', 'conditionally_wp_enqueue_scripts' );
/**
 * Remove inline style on non WC pages
 */
function conditionally_wp_enqueue_scripts() {
	if ( ! is_wc_page() ) {
		wp_dequeue_style( 'woocommerce-inline' );
	}
}

// add_action( 'init', 'remove_wc_custom_action' );
function remove_wc_custom_action(){
	remove_action( 'wp_head', 'wc_gallery_noscript' );
}

Tested in WordPress 5.9.1 running WooCommerce 6.2.1 and Twenty Twenty-Two theme.

References

https://developer.wordpress.org/reference/functions/remove_filter/

https://codex.wordpress.org/Plugin_API/Action_Reference

https://woocommerce.com/document/disable-the-default-stylesheet/

https://github.com/woocommerce/woocommerce/issues/21674

/wp-content/plugins/woocommerce/includes/wc-template-hooks.php
/wp-content/plugins/woocommerce/includes/wc-template-functions.php
/wp-content/plugins/woocommerce/includes/class-wc-frontend-scripts.php

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right