[Support request] Single product page > WP native lazy load not applied?

Home Forums Support Single product page > WP native lazy load not applied?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1423066

    How do I get the native WP lazy load (i’m on WP 5.5) to work on the single product page galleri images?

    On my single product page I have 4 images (2 of which are not showing in the viewport) added to the product gallery.

    In Appearance > Elements > Gallery Stack

    – I’ve added loading="lazy" manually to the img tag, so that it now prints out:
    <img src="product.png" alt="" title="product" loading="lazy">

    It had no effect though, so upon page load all 4 images are loaded.

    Further down the page there’s a section with “related products” -> Lazy loading those works fine (did nothing on this part)

    I investigated further and seems you need to add a fixed width + height to the <img> tag before lazy load is recognized, like:
    <img src="<?php echo $attachment[0] ; ?>" width="768" height="768" loading="lazy" alt="<?php echo $attachment_alt; ?>" title="<?php echo $attachmnent_title; ?>" />

    Sadly I only see the above working in Firefox. Chrome + Edge it’s ignored. Perhaps im missing something.

    Lead Developer
    Lead Developer

    Hi there,

    I assume you’re using the Niche site? If so, try changing your Gallery Stack hook content to this:

    <div class="woo-sumamry-wrap"><!-- open wrap -->
    	<div class="woo-gallery-stack hide-on-mobile">
    			global $product;
    			// Get post product thumbnail
    			if ( has_post_thumbnail( $product->get_id() ) ) {
    				$attachment_ids[0] = get_post_thumbnail_id( $product->get_id() );
    				$attachment = wp_get_attachment_image_src( $attachment_ids[0], 'full' ); 
    				$attachment_alt = get_post_meta( $attachment_ids[0], '_wp_attachment_image_alt', TRUE);
    				$attachmnent_title = get_the_title( $attachment_ids[0] );
    				<img src="<?php echo $attachment[0] ; ?>" alt="<?php echo $attachment_alt; ?>" title="<?php echo $attachmnent_title; ?>" width="<?php echo $attachment[1]; ?>" height="<?php echo $attachment[2]; ?>" loading="lazy" />
    			// Get Product Gallery Images
    			if ( method_exists( $product, 'get_gallery_image_ids' ) ) {
    				$product_image_ids = $product->get_gallery_image_ids();
    				foreach( $product_image_ids as $product_image_id ) {
    					$image = wp_get_attachment_image_src( $product_image_id, 'full' ); 
    					$image_alt = get_post_meta( $product_image_id, '_wp_attachment_image_alt', TRUE);
    					$image_title = get_the_title( $product_image_id );
    					echo '<img src="' . $image[0] . '" width="' . $image[1] . '" height="' . $image[2] . '" alt="' . $image_alt . '" title="' . $image_title . '" loading="lazy">';
    			// Closing div found in Close Summary Wrap element

    According to this, Chrome loads images that aren’t visible yet, while Firefox won’t. Worth testing on a product with a handful of images to see if the ones further down the page have lazy loading or not.


    Thanks for the input Tom – and yup using one of the niche sites.
    Reading the stackoverflow topic basically supports my findings tonight aswell.

    Lazy load in Firefox is a lot better fine tuned and basically sucks in all other browsers: (nothing to do with your theme/plugin ofcourse!)

    – Edge > Didn’t lazy load anything
    – Firefox > Perfect
    – Chrome > Not so good > I added 5 gallery images (6 in total with the main product image). Only two gallery images were lazy loaded. I’m on a 1920x1080px screen.

    350px below my initial viewport the second gallery image appears. Firefox starts lazy load from the second gallery image perfectly.

    PS. minor thing – there seems to be a typo in one of the variables in that Gallery stack code:
    $attachmnent_title = get_the_title( $attachment_ids[0] );



    Lead Developer
    Lead Developer

    Thanks for the heads up! Will be updating Niche shortly with that fix and the lazy loading fixes.

    Hopefully Chrome adjusts that a bit πŸ™‚


    NP at all πŸ™‚

    On the same single product page, I also found another type on a class:

    <div class="woo-sumamry-wrap">

    I’m fiddling a lot with my niche site, so in case I found more like this, would there be a more appropiate place for me to report things like this? (I know minor non-critical stuff, but never the less)

    Lead Developer
    Lead Developer

    Thanks again! In the forum is the best place to report things like this – no bug is too minor πŸ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.