Load WooCommerce CSS Styles and Scripts Conditionally

WooCommerce loads three core CSS style sheets on every page and post when installed on a WordPress site. You can save a bit of page load time here. It also loads a bunch of javascripts and other CSS styles from the libraries it uses for its functionality.

Here is how you can load these files a bit differently so they appear only on the pages you need, speeding up page delivery for non-Woocommerce content.

woocommerce-layout.css
woocommerce-smallscreen.css
woocommerce.css
These are loaded from /wp-content/plugins/woocommerce/assets/css/

Woo have made a filter available to remove all 3 or remove individual ones.

// 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;
}
// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );

You can do this and just add your own CSS 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' );
	}
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );

This is great but it still loads on every page, if you keep your WooCommerce on the default pages you can conditionally load the CSS file.

function wpb_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');		
	}
}
add_action('wp_enqueue_scripts','wpb_load_woocommerce');

Another great way to load only the CSS styles and javascripts only on the WooCommerce product and shop pages is to dequeue them on all the other pages.

add_action( 'wp_enqueue_scripts', 'remove_woocommerce_styles_scripts', 901 );
function remove_woocommerce_styles_scripts() {
    if ( function_exists( 'is_woocommerce' ) ) {
        if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
            # The styles
            wp_dequeue_style( 'woocommerce-general' );
            wp_dequeue_style( 'woocommerce-layout' );
            wp_dequeue_style( 'woocommerce-smallscreen' );
       
            # The scripts
            wp_dequeue_script( 'wc-add-to-cart' );
            wp_dequeue_script( 'wc-cart-fragments' );
            wp_dequeue_script( 'woocommerce' );
        }
    }
}

Thank wpbeaches