[Resolved] Adding a class to Woocommerce first product image

[Adrien]

Hello,

One my store using this GP template : Niche.

I need to include a class within the image so that I can target it and exclude it from Lazy load using Perfmatters.

The problem I face right now is that for gallery images, Perfmatters only support excluding images by attributes found on the img tag itself, not in a parent container. At the moment I see a class only in the parent container so I need to add one for the img tag.

I tested this code from Tom but it didn’t work for my GP template:

add_filter( 'woocommerce_single_product_image_gallery_classes', function( $classes ) {
    $classes[] = 'firstimg';

    return $classes;
} );

I would appreciate if you could help me.

Thank you.

[Adrien]

Hello I can see lots of ticket being resolved but not mine ;0 Sniff sniff

[David]

Hi there,

Niche uses some custom code to add the stack in Appearance > Elements –> Gallery Stack look for this line of HTML:

<img src="<?php echo $attachment[0] ; ?>" alt="<?php echo $attachment_alt; ?>" title="<?php echo $attachment_title; ?>" width="<?php echo $attachment[1]; ?>" height="<?php echo $attachment[2]; ?>" loading="lazy" />

You can include your class in their eg.

<img class="firstimg" src="<?php echo $attachment[0] ; ?>" alt="<?php echo $attachment_alt; ?>" title="<?php echo $attachment_title; ?>" width="<?php echo $attachment[1]; ?>" height="<?php echo $attachment[2]; ?>" loading="lazy" />

[Adrien]

David you are incredible!!! I’ve been looking for where the “lazy”was coming from for weeks hahaha
I have a question since this theme/code was made before WP update with lazy load out of the box.

If I remove loading=”lazy” isn’t it more compliant? Since everything is already lazy loaded?

I would just put this:

<img class="firstimg" src="<?php echo $attachment[0] ; ?>" alt="<?php echo $attachment_alt; ?>" title="<?php echo $attachment_title; ?>" width="<?php echo $attachment[1]; ?>" height="<?php echo $attachment[2]; ?>" />

What do you think?

Best, Adrien

[Adrien]

Actually Im trying to remove these images from being lazy loaded but After added my class in the code, images are still overwritten by niche code in the element and are being lazy loaded.

What should I do to stop this code from conflicting with Perfmatter and stop lazy loading these images which are above the fold on both mobile and desktop?

[David]

Oops – the loading=”lazy” attribute is for native lazy loading – so yep you can remove that.
I can see the class has been added to the first image on your site – so you should be able to use that Class to exclude the image in your lazy loader plugin.

[Adrien]

Dear David,

I’ve noticed I also need to remove it from this code on the same element but later in the code. But I m not sure how to remove it properly since I can’t read this.

Should I remove this . ‘” loading=”lazy” including the dot before?
Thank you

// 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

[David]

That code outputs all of the additional images for the product. Don’t you want to keep them being lazyloaded as they are below the fold on the average desktop/laptop screen size ?

[Adrien]

Oops you’re right. But then How can I exclude from lazy loading the thumbnail pictures on mobile because i can’t find their img classes.

[Adrien]

David, Just to give you more context. Im basically trying to pass the Google Core Web Vitals for all my products.

Here is where i m totally stuck : Cumulative Layout Shift 0,342

So im trying to see if removing lazy load from WC gallery would help.

Here is my PSI report: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fmagnetjewel.com%2Ffr%2Fproduct%2Fchakra-stones-engraved%2F

[David]

Lazyloading is not the issue here – theirs a couple of known issues with the single product:

1. Mobile CSS loading order is conflicted – use the CSS provided here to correct that:

https://generatepress.com/forums/topic/cls-issues-woocommerce-product-gallery/#post-1493002

We are addressing that in the next update. So you should be able to remove it after GPP 2.0.

2. The other issue is the Woocommerce carousel thumbnails do not have height and width dimensions. See Issue on Woo Github here:

https://github.com/woocommerce/woocommerce/issues/25461

It relies on a fix from Woocommerce…. until that happens you can try giving the image container a min height on mobile devices using this CSS:

@media(max-width: 400px) {
  .woocommerce.single-product div.product div.images {
    min-height: 400px;
  }
}

[Adrien]

Dear David,

You’ve solved all my issues!!!

Your knowledge, skills and quality of your support are un-matched on any other themes or plugins.
This is why I love GP.

This is the way.

[David]

Glad to hear that ! 🙂

[Adrien]

Hello David,

I wanted to follow up on this. What can I now remove since GP 2.0 got released and Woo got updated?

Thanks for your advice. Adrien

[Elvin]

Hi there,

I don’t think the code/s used here has something to do w/ GP Premium 2.0 release.
https://generatepress.com/introducing-the-gp-theme-builder/

But to be sure, you should do a confirmation check with the codes removed and see if it there’s any issues.

[Author]

Posts