Woocommerce Without jQuery

a screenshot of the code listed in this post

I’m all about website performance. Like a vintage VW Bus nut tweaking his points on the regular, it’s a passion that very few will understand, but it definitely does matter.

That said, I develop all of my websites with WordPress behind them. It’s fairly easy to build a highly performant WP site. Naturally, when it comes to e-commerce, I use Woocommerce. It is not easy to build a high-performance Woocommerce website when Woo drops in 18 Javascript files before any plugins are even added to a site!

For those of you who’d like to continue using Woocommerce, without the bloat, read on. And by all means, feel free to comment below or get in touch if you’d like to build on this work, fully credited of course.

Removing jQuery from Woocommerce

Firstly, I will note that there are some major caveats to me saying “without jQuery.”

  • I leave jQuery on the Checkout page.
  • I do not have a solution for every plugin and theme, and many of them will add jQuery back.

Why do you leave jQuery on Checkout?

Because nearly every payment gateway I’ve seen for Woo uses jQuery. Plus, Woocommerce itself uses the jQuery Block UI and other methods to update shipping and tax as you enter in your address.

I’d love to eliminate jQuery from this page as well. But I have no interest in maintaining fixes for some, any or even one payment gateway – it’s just too important a step for me to be involved with, especially if others want to start using this code.

I followed the steps below, but jQuery is still all over my website.

Nearly every theme I’ve ever seen plopped onto a WordPress website enqueues jQuery. It’s just easy. WordPress itself relies on jQuery for the WP Admin. Many, many plugins do the same.

Thus, the information below works for Woocommerce, out of the box, and assumes your plugins and theme don’t override it all. For example. Woo’s own Storefront theme will cause this plugin not to work.

In all reality, if you’re not using an extremely well coded theme, or building your own — and if you don’t keep an eye on plugins after each and every one’s installation and updates — something is probably going to add jQuery back to your site.

How to Remove jQuery from Woocommerce

Maybe the easiest way to do this is to just download this plugin I developed.

Download the Plugin

What does the plugin do?

  1. Removes all Woocommerce CSS, everywhereIf you’re not willing to style your own Woo pages — including product archives, the cart, checkout, account and product pages themselves, you will want to skip installing the plugin or remove this part of the code.
  2. Removes all Woocommerce JS, everywhere but the Checkout page.
  3. Also, explicitly removes sourcebuster-js.js. This is a file used to track attribution – where your sales came from. Read more about how much damage it does to your site’s performance here.
  4. Dequeues jQuery everywhere except the Checkout page.
  5. Removes most of the body classes added by Woocommerce.

Picking the Plugin Apart

This dequeues all Woocommerce CSS files, everywhere.

// remove all Woocommerce CSS
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

This removes some inline CSS Woocommerce adds to the head section of your site.

// remove the woocommerce-inline-inline-css
add_action('wp_enqueue_scripts', 'click_woo_remove_inline_css_head_ac',11);
function click_woo_remove_inline_css_head_ac() {
wp_deregister_style( 'woocommerce-inline' );
}

Here we, once again, dequeue Woo styles and also remove its calls to Woocommerce javascript files, everywhere except the Cart page

// remove woocommerce additional styles and scripts
add_action('wp_enqueue_scripts', 'click_woo_dequeue_woocommerce_js_css', PHP_INT_MAX);
function click_woo_dequeue_woocommerce_js_css() {
remove_action( 'wp_head', array( $GLOBALS['woocommerce'], 'generator' ) );
// check if Woocommerce is installed
if (!function_exists( 'is_woocommerce' ) ) return;
// dequeue all styles, everywhere, including the cart page
$woo_styles = array(
'woocommerce-layout',
'wc-block-style',
'woocommerce-inline',
'woocommerce-smallscreen',
'woocommerce-general',
'select2',
);
// remove all of the scripts Woo adds to any page that isn't the cart
if (!is_cart()) {
foreach ($woo_styles as $style) {
wp_dequeue_style($style);
}
// dequeue scripts
$woo_scripts = array(
'jquery',
'flexslider',
'js-cookie',
'jquery-blockui',
'jquery-cookie',
'jquery-payment',
'photoswipe' ,
'photoswipe-ui-default',
'prettyPhoto',
'prettyPhoto-init',
'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',
);
foreach ($woo_scripts as $script) {
wp_dequeue_script( $script );
}
} // !is_cart()
}
// dequeue sourcebuster-js.js
update_option('woocommerce_feature_order_attribution_enabled','');

Now we’ll ditch jQuery outside of the Cart

// dequeue jquery outside of the Cart
function click_woo_jquery() {
if (!is_cart()) {
wp_dequeue_script( 'jquery' );
}
}
add_action( 'wp_enqueue_scripts', 'click_woo_jquery', PHP_INT_MAX );
add_filter( 'wp_enqueue_scripts', 'click_woo_jquery', PHP_INT_MAX );

Next, get rid of Woocommerce’s noscript style for photo galleries

// remove noscript style for .woocommerce-product-gallery
function click_woo_remove_inline_woocommerce_product_gallery_style()
{
remove_action( 'wp_head', 'wc_gallery_noscript' );
}
add_action('wp_head', 'click_woo_remove_inline_woocommerce_product_gallery_style', 9);

Finally, get rid of body classes added by Woo.

// remove body class added by woocommerce
add_filter( 'body_class', 'click_woo_remove_inline_footer_js_and_body_class', PHP_INT_MAX);
function click_woo_remove_inline_footer_js_and_body_class($classes){
if (in_array("woocommerce-no-js", $classes)) {
remove_action( 'wp_footer', 'wc_no_js' );
$classes = array_diff($classes, array('woocommerce-no-js'));
$classes[] = '';
}
return array_values($classes);
}

Additional Resources

https://wpcodebox.com/blog/a-guide-on-how-to-switch-from-jquery-to-vanilla-js-in-wordpress

Dear WordPress Plugin/Theme Devs, You Don’t Need jQuery!

https://stackoverflow.com/questions/34131611/wordpress-without-jquery-is-this-possible

https://youmightnotneedjquery.com/

https://sabrinazeidan.com/replacing-jquery-with-vanilla-javascript-in-my-WordPress-plugin/#48983e4b6728