Dequeue WooCommerce JS and CSS

2 min read / Custom Code, Plugins, WooCommerce, WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: If you do not use default WooCommerce Photoswipe lightbox, flexslider and other libraries, you can dequeue them for faster loading of your site. I am doing that especially when I use the Oxygen Builder because in most times I build my own product galleries with fancybox. How to do Dequeue WooCommerce JavaScripts and CSS styles?…

If you do not use default WooCommerce Photoswipe lightbox, flexslider and other libraries, you can dequeue them for faster loading of your site.

I am doing that especially when I use the Oxygen Builder because in most times I build my own product galleries with fancybox.

How to do Dequeue WooCommerce JavaScripts and CSS styles?

Create your new PHP script in your scripts organizer, code snippets plugin, advanced scripts etc. and put the code below in new snippet.

You can add the styles and scripts as you need. Here is a list of styles and scripts I have found yet:

Script

Style

‘flexslider’, ‘js-cookie’, ‘jquery-blockui’, ‘jquery-payment’, ‘photoswipe’ , ‘photoswipe-ui-default’, ‘select2’, ‘selectWoo’, ‘wc-address-i18n’, ‘wc-add-payment-method’, ‘wc-cart’, ‘wc-cart-fragments’, ‘wc-checkout’, ‘wc-country-select’, ‘wc-credit-card-form’, ‘wc-add-to-cart’, ‘wc-add-to-cart-variation’, ‘wc-geolocation’, ‘wc-lost-password’, ‘wc-password-strength-meter’, ‘wc-single-product’, ‘woocommerce’, ‘zoom’, ‘prettyPhoto’ ‘prettyPhoto-init’

‘photoswipe’, ‘photoswipe-default-skin’, ‘wc-block-style’, ‘woocommerce-layout’, ‘woocommerce-inline’, ‘woocommerce-smallscreen’, ‘woocommerce-general’, ‘select2’, ‘prettyPhoto’,

The code below disable loading of photoswipe CSS and JS, Woocommerce block styles, flexslider JS and Zoom js.

<?php
add_action( 'wp_enqueue_scripts', 'twiki_dequeue_woocommerce_styles', 99 );
function twiki_dequeue_woocommerce_styles() {

// styles
        $dequeue_styles = array(
            'photoswipe',
            'photoswipe-default-skin',
            'wc-block-style',
        );
    
        foreach ( $dequeue_styles as $dstyles ) :
            wp_dequeue_style( $dstyles );
        endforeach;

// scripts

$dequeue_scripts = array(
            'flexslider',
            'photoswipe' ,
            'photoswipe-ui-default',
            'zoom',
        );
    
        foreach ( $dequeue_scripts as $dscripts ) :
            wp_dequeue_script( $dscripts );
        endforeach;
        
}

You can also use the official WooCommerce documentation to disable the WooCommerce stylesheets by recommended way to build own theme:

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

0 comments