Storefront Theme Homepage Images Blurry

Hello @chinwonder ,

Okay, I can understand the problem.

You can set the WooCommerce’s product thumbnail size from wp-admin > Appearance > Customize > WooCommerce > Product Image. You can set your expected image size for thumbnails.

You will find more details on WooCommerce images here – Image Sizes for Theme Developers

You can also use plugins like Regenerate thumbnails to create new image sizes that is added by your theme.

Alternatively, using this CSS in wp-admin > Appearance > Customize > Additional CSS field can reduce the auto-enlarging of the product images –

.wc-block-grid__products .wc-block-grid__product-image img {
    width: auto !important;
}

You will find more details on fixing blurry image in WooCommerce here – Fixing Blurry Product Images

I hope you find the information useful.

Thank you ??

Hello @rur165 , thank you very much for responding.

In wp-admin\Appearance\Customize\WooCommerce\Product Image I selected uncropped.

I looked at a couple of thumbnail plugins, not sure they could help, because the reducing and then enlarging problem only occurs on the homepage. The images there are also not thumbnails.

I just don’t understand. The originals are 800×1200, why not just reduce to 341×512 without losing quality, instead of reducing to 324×486 before enlarging to 341×512 and making the images blurry?

Thank you.

Hello @chinwonder ,

Okay, first we have to understand that, WordPress will generate multiple copies of your image in different sizes. Both WordPress has their own image sizes and WooCommerce also adds additional image sizes. Theme developers can use those specific image sizes on different templates to minimize the page size and improve the performance of the site.

Now, it looks like WooCommerce blocks do not take into account the image sizes added via themes. As discussed in this thread you have to use custom CSS to adjust the image size in the block grid.

If you use the suggested CSS from my previous reply it will stop the enlarging of the image and will show in its correct size.

.wc-block-grid__products .wc-block-grid__product-image img {
    width: auto !important;
}

Let me know if the CSS does not work.

Thank you ??

Hello @rur165 , thank you very much for responding again and helping me understand. Your CSS code works for my purpose. Thank you again!