product thumbnail images blurry on Products grid page

This topic has 11 replies, 2 voices, and was last updated 5 hours, 7 minutes ago by gzlongjuanfengkj.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
November 11, 2024 at 4:36 am #611150

gzlongjuanfengkj
Participant

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

November 11, 2024 at 4:58 am #611151

gzlongjuanfengkj
Participant

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.

November 11, 2024 at 5:01 am #611153

gzlongjuanfengkj
Participant

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

Attachments:
You must be logged in to view attached files.

November 11, 2024 at 12:50 pm #611239

Aizaz Imtiaz Awan
Keymaster

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

November 12, 2024 at 5:53 am #611470

gzlongjuanfengkj
Participant

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.

November 12, 2024 at 12:42 pm #611585

gzlongjuanfengkj
Participant

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.

November 12, 2024 at 1:42 pm #611608

Aizaz Imtiaz Awan
Keymaster

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

November 13, 2024 at 5:17 am #611744

gzlongjuanfengkj
Participant

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.

November 13, 2024 at 10:10 am #611798

Aizaz Imtiaz Awan
Keymaster

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

November 13, 2024 at 1:08 pm #611869

gzlongjuanfengkj
Participant

ok,admin info

November 13, 2024 at 3:16 pm #611905

Aizaz Imtiaz Awan
Keymaster

Hello,

Now check back your site and check the issue.

Best Regards

November 14, 2024 at 5:42 am #612020

gzlongjuanfengkj
Participant

Our current product images will be unified into 1600px*1600px later. I saw that you set some data, but the thumbnails are still blurry after regenerating. Why? You can compare the product images on the product category page with the product images after clicking into the product details. The clarity of the category page is obviously not as good as that in the product details. Our images are all square. In theory, they are compressed in the same proportion as the square, so they should not be blurry.
Author

Posts