product thumbnail images blurry on Products grid page

Hello, why are the product images on the Products grid page such as https://timelesstar.com/shop/ blurry, but become clear when the mouse is placed on the product thumbnail? How can I set the product thumbnails on the product category page to be clear from the beginning, without blurring? How can I solve this problem? Our images are 3500*3500 or 1600*1600 square high-pixel images. I also generate product thumbnails according to 1:1, which should not be blurry. Please help me fix the problem of blurry product images

I set it up in the background, is there any problem? Our site width is 1600px

Attachments:

You must be logged in to view attached files.

The settings in WooCommerce Product Images are like this, is it ok?

Attachments:

You must be logged in to view attached files.

Hello,

Basically, the product images are controlled by WooCommerce and the WoodMart theme doesn’t influence this. The size of the thumbnail you set should be larger than the size of the product thumbnail displayed on the shop page. If the thumbnail size is smaller than what the default size expects, it may appear blurry or not display correctly.

You can find the sizes used on the demo here:
https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/

and Regenerate thumbnails using the appropriate plugin. https://wordpress.org/plugins/regenerate-thumbnails/

Here is the WooCommerce Manual:
https://woocommerce.com/document/fixing-blurry-product-images/

Best Regards

Hello, please give me a targeted solution. Can you provide a solution based on our actual situation? Our Site width is 1600px, and the category page displays 4 columns of products. The original size of our product images is square, and they will be uniformly changed to 850px*850px later. I set the Thumbnail width in WooCommerce Product Images to 400px, and the Thumbnail cropping is 1:1, as shown in the screenshot uploaded. Is there a problem with my settings? I also set the Medium size of Media Settings in settings to 400, as shown in the screenshot. Is the setting correct? After completing all the above settings, why are the product images displayed on the product category page still blurry? What’s the problem? Please give me a specific solution

Attachments:

You must be logged in to view attached files.

We decided to make a 1600px*1600px square product image and generate a thumbnail image of 800px. Is that ok? I generated all thumbnails in WooCommerce. Although it is clearer than before, it is still blurry. You can open https://timelesstar.com/shop/ and hover the mouse over the product image. You will eventually see a very clear image. How to remove the Hover image effect so that the products on the category page start with the product image? The final clear effect is definitely related to your theme, not what you said.

Attachments:

You must be logged in to view attached files.

Hello,

Navigate to Appearance > Customize > WooCommerce > Product Images > Choose the Thumbnail cropping “Uncropped” and check the issue.

Navigate to Theme Settings > Product Archive > Product Styles > Disable the option “Hover image”.

Best Regards

I followed your instructions, but it didn’t improve the clarity of the product images on the product category page. I found that a large number of customers who used your theme encountered the same error of blurry product images. It seems that this is a problem with your theme, but you have never really solved this problem.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

[Author]

Posts