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.

You can do this and just add your own CSS 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.

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.

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

6 Comments

  1. Rawny on August 14, 2021 at 2:44 am

    Nice;
    This is what I used

    add_action( ‘wp_enqueue_scripts’, ‘dequeue_woocommerce_styles_scripts’, 99 );

    function dequeue_woocommerce_styles_scripts() {
    if ( function_exists( ‘is_woocommerce’ ) ) {
    if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
    # Styles
    wp_dequeue_style( ‘woocommerce-general’ );
    wp_dequeue_style( ‘woocommerce-layout’ );
    wp_dequeue_style( ‘woocommerce-smallscreen’ );
    wp_dequeue_style( ‘woocommerce_frontend_styles’ );
    wp_dequeue_style( ‘woocommerce_fancybox_styles’ );
    wp_dequeue_style( ‘woocommerce_chosen_styles’ );
    wp_dequeue_style( ‘woocommerce_prettyPhoto_css’ );

    # Scripts
    wp_dequeue_script( ‘wc_price_slider’ );
    wp_dequeue_script( ‘wc-single-product’ );
    wp_dequeue_script( ‘wc-add-to-cart’ );
    wp_dequeue_script( ‘wc-cart-fragments’ );
    wp_dequeue_script( ‘wc-checkout’ );
    wp_dequeue_script( ‘wc-add-to-cart-variation’ );
    wp_dequeue_script( ‘wc-single-product’ );
    wp_dequeue_script( ‘wc-cart’ );
    wp_dequeue_script( ‘wc-chosen’ );
    wp_dequeue_script( ‘woocommerce’ );
    wp_dequeue_script( ‘prettyPhoto’ );
    wp_dequeue_script( ‘prettyPhoto-init’ );
    wp_dequeue_script( ‘jquery-blockui’ );
    wp_dequeue_script( ‘jquery-placeholder’ );
    wp_dequeue_script( ‘fancybox’ );
    wp_dequeue_script( ‘jqueryui’ );
    }
    }
    }

  2. Duncan on June 11, 2021 at 10:34 am

    Perfect thanks!

  3. hexella on May 11, 2021 at 4:41 am

    Hi, thank you very much. I was looking for a removal on the WooCommerce site, but your site is much better and more practical. You said a good solution for removing extra css.
    Thankful

  4. 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!

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

    OMG! Thanks I really needed this!!

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

    The last script can be pasted in theme function?

Leave all Comment