Woocommerce Image in Product Thumbnails Blurry

Support
#1

HI,
Our images are blurry on the product thumbnails, when you open up to the single product image is perfect, when zooming in is also perfect. The problem is in thumbnails. I looked here.

But is not helping.

Thank you.

#2

Hi @cmadrid0220,

Thanks for writing in.

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

Thanks. :slight_smile:

#3

Your product catalog uses 300x300px size image.

Please go to WooCommerce > Settings > Products > Display and under Product Images, change the Catalog images’ size. Remember to regenerate your images after that.

Thanks.

1 Like
#4

This is not working. I resize the images, changed the settings on Woocomerce and regenerate thumbnails, nothing is working my images are all blurry in the catalogue display.
Do you know why images take too long to upload and save?

Thank you

#5

Hello There,

Thanks for updating in! I am another staff checking on this thread. I can see that you are using Jetpack plugin. Please disable Photon Module because it is caching your images and displayed the old cache of your images even if you already have regenerated the thumbnails. I would recommend that you review the Pros and Cons in using Photon module. Please check it right here: https://developer.wordpress.com/docs/photon/

Your product images is not appropriate for the exact display size. You should have at least 460x60 for the product catalog image size (http://prntscr.com/g6nqg3) and at least 600x600 pixels for the single product image size (http://prntscr.com/g6nqnr). You can change all these sizes in WooCommerce > Settings > Products > Display and under Product Images. You must regenerate the thumbnails again. And since you are using W3 Total Cache, you will need to clear your plugin cache first before testing your site.

Regarding your single product image thumbnails (http://prntscr.com/g6nrd6), yes it is so small. This is because this is a product image thumbnail. If you want to have the default thumbnail, please disable the product image slider. For more information, please check it out from this thread:
https://theme.co/apex/forum/t/resizing-woocommerce-images/1706

Hope this helps. Please let us know how it goes.

#6

Hi there,

I can confirm missing images while I’m testing, and I’m not sure how your host system works, you must contact your hosting provider to see why there are missing images. Our theme has no connection with image generation which is why you need 3rd party plugin to generate them.

I myself can’t find what’s going on, instead, please add this code to your global custom javascript to enforce full-size images in your catalog pages.

jQuery('.post-type-archive-product.woocommerce .attachment-shop_catalog').each( function() {

jQuery(this).attr('src', jQuery(this).attr('src').replace( new RegExp('(-[0-9].*x[0-9].*)\.jpg$'), ".jpg") );

} );

This code will only work on your current setup and may not work in the future, so please use it with caution and we can’t provide support for custom codes.

Thanks.

#7

WOW Thank you!!! I spend an entire day trying to fix this mess… and then I found your little piece of javascript that kept me from deleting this theme. Thanks again!!!

#8

You are most welcome. :slight_smile: