Thumbnails for WooCommerce products showing as blurry or cropped

[reesebitesyou]

Hey all,

Love the theme, but there is one obnoxious issue that I can’t seem to wrap my head around.

I’ve tried creating a product several times with all numbers of variation on image sizes, WooCommerce thumbnail settings, and failed attempts at regenerating thumbnails (keep getting errors) and for whatever reason, some of my products have perfect thumbnails, while others have blurry, compressed, or oddly cropped ones. The weird part is, sometimes these blurry thumbnails look totally perfect on the product page itself. It’s extremely frustrating, as other products seem to handle the thumbnail just fine, while some don’t. Please help!

I’ve attached a screenshot to demonstrate what I mean. If you’d like to see the issue on the site, visit http://issues.chaos-mag.com

Thanks,

Reese

[Swift Ideas – Ed]

Hi there,

What is the resolution of the image that you’ve uploaded, but is blurry? What do you have set as the image sizes in the WooCommerce settings?

– Ed

[reesebitesyou]

Hi Ed,

The size of the images I am using, for all, is 1200 x 1566. That is the size of all of the magazine covers that I have, those work just fine. I have tweaked this and tried to change it to the container size, and that didn’t work either. It doesn’t make sense because the images are the same quality and size as all that I am using, but with these apparel items they get weird.

I’ve attached a screen shot of the WooCommerce image settings area. This has been tweaked to try to fix the issue because the default settings were not working either for the apparel items. Again, it is very weird because the only problem is with the apparel items, not the digital magazine issues. Could this be because of the item type?

Thanks for responding.

Reese

[Swift Ideas – Ed]

Hi Reese,

It shouldn’t matter what type of product you’re uploading, but bear in mind that when you change the size of the image settings, that you’ll need to regenerate the thumbnails again.

Try uploading a fresh image so that the new size is created for the image. If you are still struggling then provide a link/login in a private reply and I’ll take a look.

– Ed

[cmohs01]

I ran into this as well – there is a setting in that is discussed in the read-me file for image sizes. WooCommerce Settings > Catalog > and then at the bottom “Image Options”. Use the read-me files suggested settings.

Catalog Images Width [540] Height [720] Hard Crop
Single Product Image Width [540] Height [720] Hard Crop
Product Thumbnails Width [120] Height [178] Hard Crop

Next you’ll have to install the plug-in “Regenerate Thumbnails” – (this is a really handy tool) – then you’ll go to “Tools” > Regen. Thumbnails and run the script. It should fix your problem – just resolved this for my own site (www.christophermohs.com) this evening.

LOVE THIS THEME THOUGH!

[Melanie – SUPPORT]

Spot on 🙂 Thanks for posting that up cmohs!

[onderozkoc]

Hi, I didn’t change the demo theme image size, but catalog images seem blurly. I tried converting the ever images as 90×90, 150×150 and 300×300, and upload again but catalog pictures are still blur.

http://www.sbtskateboards.com/urun-kategori/kaykaylar/pro-model-kaykaylar/

When you click the product, you’ll see the same pictures very clearly on product detail page.

What is the my mistake?

[onderozkoc]

I am sorry, when I looked again, I solved the problem =)

[Melanie – SUPPORT]

Fantastic!