Jason G. Designs

Lately, I have been on a crusade to speed up this blog site by making adjustments to my blog theme. After running PageSpeed Insights, I saw that WooCommerce loads its scripts and styles on every page.

This is nothing out of the ordinary, as this is how it is supposed to run. But I thought why run it on pages where it is not likely used?

This blog, at this moment, uses the standard pages and shortcodes that WooCommerce supplies each user upon first activation– Products (Shop) page, Cart page, Checkout and My Account. In addition, I add each product on by one and those would be the single product pages.

Instead of putting together a script myself to remove WooCommerce stuff from non WooCommerce pages, I used the modern AI approach. I know, some can consider AI as a shortcut, but it saves some time from looking up things.

Particularly, I went to google.com/ai and asked how to load WooCommerce only on the pages where it is used.

After asking a few follow-up questions, I settled on the following code. Let’s go through it step-by-step. By the way, this is a PHP script that goes in functions.php.

Checking if WooCommerce is activated

First, it checks if we are in the admin dashboard or if the function is_woocommerce doesn’t exist. If either of these are true, this script returns (does not execute).

<?php

if (is_admin() || ! function_exists('is_woocommerce')) {
  return;
}

Setting Up Variables

Then, we set up a variable to check for common WooCommerce pages. In here, you can and should add other pages where you want WooCommerce functionality.

$is_core_woocommerce = (
is_woocommerce() ||
is_shop() ||
is_product_category() ||
is_product_tag() ||
is_cart() ||
is_checkout() ||
is_account_page()
);

According to documentation, is_woocommerce checks if we are on any page that uses WooCommerce templates, excluding cart and checkout. So, we need the functionality for each page that uses the scripts and styles. This is important, as anything not included here will have broken layouts and functionality!

Thus far, this is only a variable representing pages, but we are in the modern era. You might want to use blocks on any page you want. The variables and if statements below take care of that.

$has_product_blocks = false;
if (is_singular()) {
  if (has_block('woocommerce/products')
    || has_block('woocommerce/all-products')
    || has_block('woocommerce/product-collection')
  ) {
    $has_product_blocks = true;
  }
}

This sets the $has_product_blocks boolean to false initially, assuming we are not on a page that has WooCommerce blocks. Then, if we are on a singular page or post, we check if the page has the products, all-products or product-collection blocks. If so, we set to true.

If you plan on putting the checkout, cart and account blocks on their respective pages, then you should be good with the above two variables. However, if you want to put any of these on a standalone page, you can add them to the script above.

$has_product_blocks = false;
if (is_singular()) {
  if (has_block('woocommerce/products')
    || has_block('woocommerce/all-products')
    || has_block('woocommerce/product-collection')
    || has_block('woocommerce/cart')
    || has_block('woocommerce/checkout')
    || has_block('woccommerce/my-account')
  ) {
    $has_product_blocks = true;
  }
}

(Not) Execute the script

With these variables in place, now we can once again return the script and not execute.

if ($is_core_woocommerce || $has_product_blocks) {
  wp_dequeue_script('jquery-placeholder');
  wp_dequeue_script('jquery-cookie');
  return;
}

The AI recommended dequeueing the jquery-placeholder and jquery-cookie scripts, as they are deprecated by WooCommerce.

Remove all WooCommerce styles and scripts

Now otherwise, we dequeue on every page where WooCommerce or its blocks are not present.

// Dequeue styles
wp_dequeue_style('woocommerce-layout');
wp_dequeue_style('woocommerce-general');
wp_dequeue_style('woocommerce-smallscreen');
wp_dequeue_style('wc-blocks-style');

// Dequeue scripts
wp_dequeue_script('woocommerce');
wp_dequeue_script('wc-add-to-cart');
wp_dequeue_script('wc-cart-fragments'); // Disables AJAX cart updates
wp_dequeue_script('jquery-blockui');
wp_dequeue_script('jquery-placeholder');
wp_dequeue_script('jquery-cookie');

I dropped all of the above code into an optimizations.php file in my theme as shown below, but this might work as a plugin or even an must use plugin. This was added to functions.php:

require_once get_template_directory() . '/inc/optimizations.php';

Now, check the Network tab of your Developer tools and you will see there are no or very few woocommerce assets on pages that don’t have WooCommerce. You can even do things like conditionally include your own override stylesheets based on if your users are on a core WooCommerce page.

I want to conclude by telling you, my readers, to be careful with a script like this one because it will break the design or functionality on pages where a WooCommerce block or shortcode isn’t accounted for.

For that issue, here is the Developer Docs blocks reference page to start.

For my website, this helped for speeding up load times.

---

Featured image by lukass 2531 from Pixabay.

---

Tags for this post: Optimization, WooCommerce