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

ok,admin info

Hello,

Now check back your site and check the issue.

Best Regards

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.

Hello,

Could you please check how it works with some default WordPress themes like TwentyTwenty or WooCommerce Storefront to understand if is it our theme issue or not?

Best Regards

I tested it with the above two themes respectively, and the product images on the category pages are not blurry, as shown in the screenshots. It is definitely a problem with your theme. Do you have any technical staff to help solve this problem?

Attachments:

You must be logged in to view attached files.

Our products are all square. Why did you set the data ratio like the screenshot in Media Settings? Is this the reason?

Attachments:

You must be logged in to view attached files.

Hello, why did the company logo on the bottom left of our website suddenly disappear? How can we restore it? Our website originally had 5 columns, and the policies column was at the end. Why did it suddenly change? How can we fix it?

Attachments:

You must be logged in to view attached files.

Hello,

01. I have further investigated the issue on your site. I have added a test product on your site and uploaded images. The images are not blurry. Please check the test product on the shop page.

Please try using images of higher resolution as the images now are displaying the same quality as uploaded. Then clear cache and check back.

02. Navigate to Appearance > Widgets > Add the “Footer 1 column Dark” HTML block in the footer 1 column.

Best Regards

The picture you uploaded is rectangular, and the pixel requirement is not high. In fact, your chart band is also blurred. Is it because your theme requires that product pictures must be rectangular, such as clothing, but jewelry pictures are all square, and rectangular pictures are not good-looking. Is it because of this reason? Do pictures on product category pages require square shapes?

I have another question for you. Why can only one product in Frequently bought together of WordPress choose attribute values, but the other product cannot choose attribute values? How can I modify it so that both of them can choose attribute values? It is unreasonable that they cannot choose attribute values. How can I modify it?

Attachments:

You must be logged in to view attached files.

I have the Frequently bought together theme on my WooCommerce website. I have never installed the Frequently bought together plugin and I don’t know where to set it so that other product attributes can also be selected.

Hello, why is the size of the featured image displayed on the homepage not aligned with other blogs every time I upload a blog? The size of the images we upload is uniformly 1200 * 742 pixels

Attachments:

You must be logged in to view attached files.

Hello,

Your given login details are not working anymore. Please share the correct login details so I will check the issue and give you the possible solution.

Best Regards

Login Information

Please help me check how to solve the previous few problems

Hello,

Now again your given login details are not working for me, please share the correct login details and please do not change the logins until I will check and give you a solution about your issue.

Best Regards.

The new login password is correct

Hello,

No the logins are not working for me, if you will share your email, I have sent you the video that the logins are not working for me.

Best Regards.

My friend, most of your problems are your faults, not the faults of your woodmart colleagues. If I was a support I wouldn’t answer your every question a lot of things are elementary to fix…

Hello @gzlongjuanfengkj,

No the logins are not working for me, if you will share your email, I have sent you the video that the logins are not working for me.

Best Regards.

[Author]

Posts