contacts

Get All 146 Premium WordPress Themes for Just $59.99
One-Time Payment: Unlimited Use Across Unlimited Domains, Plus Free Lifetime Updates! Learn more

How to Lazy Load WooCommerce Product Images in Shop and Category Pages

How to Lazy Load WooCommerce Product Images in Shop and Category Pages

Lazy loading is web development optimization technique which skips loading of heavy content (i.e. images) on initial page load, and instead they are being loaded when user scrolls to these areas.

In this article we will check how it can be applied to WooCommerce Shop and Category pages for product images:

1.Open your theme js file and insert the following code:

// Lazy loading images
document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  let active = false;

  const lazyLoad = function() {
    if (active === false) {
      active = true;

      setTimeout(function() {
        lazyImages.forEach(function(lazyImage) {
          if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.srcset = lazyImage.dataset.srcset;
            lazyImage.classList.remove("lazy");

            lazyImages = lazyImages.filter(function(image) {
              return image !== lazyImage;
            });

            if (lazyImages.length === 0) {
              document.removeEventListener("scroll", lazyLoad);
              window.removeEventListener("resize", lazyLoad);
              window.removeEventListener("orientationchange", lazyLoad);
            }
          }
        });

        active = false;
      }, 200);
    }
  };

  lazyLoad();
  
  document.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});

The above JavaScript code interates through images with class ‘lazy’ and if they are visible on screen, it loads and assigns actual images to them.

Source Code Reference: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video

Also, it includes a small fix to load lazy load check on page load (in case there are product images visible initially, not just on page scroll).

2. Open your theme functions.php file and insert the following code:

add_action('init', function(){
    remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
    add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
});

if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
    function woocommerce_template_loop_product_thumbnail() {
        echo woocommerce_get_product_thumbnail();
    } 
}

if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {   
    function woocommerce_get_product_thumbnail( $size = 'shop_catalog' ) {
        global $post, $woocommerce;
        $output = '';

        if ( has_post_thumbnail() ) {
            $src = get_the_post_thumbnail_url( $post->ID, $size );
            $output .= '<img class="lazy" src="your-placeholder-image.png" data-src="' . $src . '" data-srcset="' . $src . '" alt="Lazy loading image">';
        } else {
             $output .= wc_placeholder_img( $size );
        }

        return $output;
    }
}

The above code overrides WooCommerce image loading and replace them with a placeholder images.

Note: Make sure you have changed ‘your-placeholder-image.png’ to a valid place holder image URL from your website.

Applying the above to our side increased our website load speed significantly (according to Google PageSpeed Insights tool):

Before Adding Product Images Lazy Loading

Before Adding Product Images Lazy Loading

After Adding Product Images Lazy Loading

Before Adding Product Images Lazy Loading

10 Responses to “How to Lazy Load WooCommerce Product Images in Shop and Category Pages”

  1. Thanks for sharing. I would love to try your code on my site. I have added it to WP using the Code Snippet plugin but I’m getting this error:

    The snippet has been deactivated due to an error on line 8:
    Cannot redeclare function woocommerce_template_loop_product_thumbnail.

    Line 8 is this: echo woocommerce_get_product_thumbnail();

    Any idea what the issue might be?

    • Hi SBenley,

      I presume the issue is related to code snippet plugin. Could you please try to insert the code in functions.php file instead?

  2. Great idea,

    Do you know if it will work with the DIVI builder/Theme as with that there is no theme.js.

    Thanks

    Phil

  3. Hi, how can I do Lazy Load WooCommerce Product Images for all pages.
    Or how can I add it on the home page?
    A Huge thanks in Advance.

  4. Hi, how can I do Lazy Load WooCommerce Product Images for all pages? Or how can I add it on the home page?

    A Huge thanks in Advance.

  5. Hi. Thanks for this it works great to improve my page speed. but in the Gmetrix report it says my placeholder image is not found. Where should I put the image / how should I write the pathname so it can find the image?