(+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 = []"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;

            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);

  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:

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

About the Author

Tihomir Ivanov is a WordPress and Salesforce Commerce Cloud (SFCC) developer, founder of, a fan of Linux and Open Source, Minimalism (in Design and Life), Sci-fi, Fantasy, Classic and History books :)

Leave a Reply