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