John Davidson

Message:

Need to prevent the main image on the product page from lazy loading.

The main product image is loaded in 'woocommerce/single-product/product-image.php'

It uses: wp_get_attachment_image( $attachment_id, $size, $icon, $attr ); to get the image.

Inside the function above, there is:

// Add `loading` attribute.

    if ( wp_lazy_loading_enabled( 'img', 'wp_get_attachment_image' ) ) {

        $default_attr['loading'] = wp_get_loading_attr_default( 'wp_get_attachment_image' );

    }



    $attr = wp_parse_args( $attr, $default_attr );



    // If the default value of `lazy` for the `loading` attribute is overridden

    // to omit the attribute for this image, ensure it is not included.

    if ( array_key_exists( 'loading', $attr ) && ! $attr['loading'] ) {

        unset( $attr['loading'] );

    }

So clearly it's possible to not lazy load it, but I just don't fully understand how I can do this?

---

My Answer:
To remove lazy loading from the main product image, you can simply remove the code that adds the 'loading' attribute in the 'woocommerce/single-product/product-image.php' file.

Find the following code snippet in the file:

php
// Add `loading` attribute.
if ( wp_lazy_loading_enabled( 'img', 'wp_get_attachment_image' ) ) {
$default_attr['loading'] = wp_get_loading_attr_default( 'wp_get_attachment_image' );
}
$attr = wp_parse_args( $attr, $default_attr );

// If the default value of `lazy` for the `loading` attribute is overridden
// to omit the attribute for this image, ensure it is not included.
if ( array_key_exists( 'loading', $attr ) {


Simply remove or comment out this code block to prevent the lazy loading of the main product image. After making this change, the main product image should no longer be lazy loaded.