Question 2242 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress Remove Lazy Load from Main Product Image

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?

Tags:

3

Answers


  1. 0

    one way you might be able to do this is to use the wp_get_attachment_image_attributes filter like below:

    <?php

add_filter("wp_get_attachment_image_attributes", function($attr, $attachment, $size) {
    $first_image_post_id = 'ID of the image you want to remove the lazy attr';
    
    if ( $attachment->ID === $first_image_post_id ) {
        unset( $attr['loading'] );
    }

    return $attr;
}, 10, 3);

    More info on the WP docs: https://developer.wordpress.org/reference/hooks/wp_get_attachment_image_attributes/

    Login or Signup to reply.
  2. 0 
    add_filter( 'wp_get_attachment_image_attributes', 'remove_img_attr', 10, 2 );
function remove_img_attr( $attr, $attachment ) {
    unset( $attr['id'] );
    return $attr;
}
    Login or Signup to reply.
  3. 0

    A way you can handle this is by creating a conditional that checks if you are currently on a single product page using the is_product() conditional provided by WooCommerce found here.

    Also, instead of unsetting attr['loading'], you can set it to eager to ensure that the browser does not automatically set it as something else.

    Your final code could look something like this:

    function remove_lazy_load($attr, $attachment, $size){

   if ( is_product() ) {
      $attr['loading'] = 'eager';
   }

   return $attr;

}
add_filter("wp_get_attachment_image_attributes", 'remove_lazy_load', 10, 3);

    edit:
    I ended up actually having to implement this myself and this is the solution I came up with

    function remove_lazy_load($attr, $attachment, $size){
  // check if we're on the single product page
  if(is_product()){

    // main product image has the class wp-post-image so we'll check the attributes of the image if it contains the class
    if(strpos($attr['class'], 'wp-post-image') !== false){

      // you can unset but I prefer to explicitly set it
      $attr['loading'] = "eager";
    }
  }

  return $attr;

}
add_filter("wp_get_attachment_image_attributes", 'remove_lazy_load', 10, 3);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search