loading="lazy" feature

[dzembak]

Hello,
It is lookjs like loading="lazy" feature is not included for images within product category. Could you please give me a quick note how to modify your template?
Kind regards

[Lopesnextgen]

Hey Dzembak,

This is not controlled by Bootstrap

Bootstrap provides CSS and JavaScript components, but it does not include product-category templates or generate image markup. The loading attribute is native HTML and must be added by the application, CMS, or theme rendering the <img> element:

<img
  src="product.jpg"
  alt="Product name"
  width="600"
  height="600"
  loading="lazy"
>

Based on your mention of product categories, this appears to be related to WooCommerce or a WordPress theme rather than Bootstrap itself.

If this is WooCommerce

WordPress normally calculates image-loading attributes automatically. It may intentionally omit loading="lazy" from images likely to appear above the fold, since lazy-loading the Largest Contentful Paint image can reduce performance.

Check multiple products farther down the category page, not only the first image.

If a custom theme bypasses that behavior, you can replace WooCommerce's product-loop thumbnail callback from a child theme or custom plugin:

remove_action(
  'woocommerce_before_shop_loop_item_title',
  'woocommerce_template_loop_product_thumbnail',
  10
);

add_action(
  'woocommerce_before_shop_loop_item_title',
  function () {
    echo woocommerce_get_product_thumbnail(
      'woocommerce_thumbnail',
      array(
        'loading'  => 'lazy',
        'decoding' => 'async',
      )
    );
  },
  10
);

Do not modify WooCommerce or Bootstrap core files because an update will overwrite the change.

I would also avoid forcing lazy loading on every image. The first visible product image may be better left eagerly loaded, while off-screen products should use loading="lazy".

To identify the exact template that needs changing, we would need the name and version of the WordPress theme or plugin producing the product grid, plus the rendered <img> markup from DevTools.

References:

• https://getbootstrap.com/docs/5.3/content/images/
• https://developer.wordpress.org/reference/functions/wp_get_attachment_image/
• https://developer.wordpress.org/reference/functions/wp_get_loading_optimization_attributes/
• https://woocommerce.github.io/code-reference/files/woocommerce-includes-wc-template-functions.html