Remove WooCommerce CSS Styles and Scripts From Pages That Don’t Need It

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 by removing the styles and scripts from pages and content that do not need it .

It also loads a bunch of other javascripts and 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 load time 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.

<?php // <-don't add me
// 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' );
view raw woostyles.php hosted with ❤ by GitHub

You can do this and just add your own CSS style

<?php // <-don't add me
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' );
}
}
view raw woostyles-yours.php hosted with ❤ by GitHub

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.

<?php // <-don't add me
add_action('wp_enqueue_scripts','wpb_load_woocommerce');
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');
}
}

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.

<?php
add_action( 'template_redirect', 'remove_woocommerce_styles_scripts', 999 );
function remove_woocommerce_styles_scripts() {
if ( function_exists( 'is_woocommerce' ) ) {
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
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);
}
}
}
view raw selective.php hosted with ❤ by GitHub

Here all the Woo styles and scripts are removed by hooking into ‘template_redirect’ the last hook before the page loads and removing the initial Woo add_action of all styles and scripts.

 

ref

3 Comments

  1. Mary Baum on February 27, 2018 at 3:34 pm

    Thank you!

    I had been working with a different version of the dequeue_styles filters that didn’t do the job, because (as I now see) it didn’t return the filtered variable.

    So thanks for the snippet and the learning experience!

  2. Robyn Bieber on January 10, 2017 at 9:19 pm

    OMG! Thanks I really needed this!!

  3. Engelbert on September 24, 2015 at 2:14 am

    The last script can be pasted in theme function?

Leave a Comment