contacts

(+359) 88 339 4445

Buy All 39 Premium WordPress Themes for $54.99

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

2 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?

Leave a Reply