Why fuzzy images in Woocommerce store?

Question

WordPress

Help me understand why and how to fix a bug with product images
https://amico-hc.com/shop/
Some product images look fuzzy when viewed from a phone or tablet (everything is ok on a desktop).
All images are the same size. And I can’t understand the logic why some are OK, while others are blurry. Tried loading different extensions, etc. The problem is not solved in any way.

Answer 1

It seems to me that the problem is in the adaptive tag and how woocommerce distributes which image to which device to give.
If we are talking only about thumbnails in the product cycle, then the easiest way is to overwrite their output:

function woocommerce_template_loop_product_thumbnail(){
    $product_img = get_the_post_thumbnail_url();
    echo '
        <div class="product-image" style="background-image:url(' . $product_img . ');"></div>
    ';
}

In this code, I display the thumbnail as a background, it’s easier for me personally to manage the appearance later, you just specify the height to the parent, and , product-image: background-size: contain - and all the business

Answer 2

Added code, but now all images are gone:
joxi.ru/MAjZJBNUvMpo1A

Answer 3

Hello!
1) check the Wocomerc version and update if necessary
2) update your theme's Wocomerc templates
3) check your theme's Wocomerc templates and see what thumbnails are being returned.
4) regenerate thumbnails by setting regenerate thumbnails maybe you just changed the theme and forgot to regenerate thumbnails.