WooCommerce Product Images Blurry and not Fitting

@richarduk
?? Makes much more sense ??
Thank you – and now for the detective job (many hours ahead)!

There are so many people asking this same thing about blurry images and WooCommerce!

@richarduk
Operation failed!
I am sorry to say that the images are still blurred …(but bigger!)

@grafikbutik

Post a link and I’ll take a look. Can’t promise anything

https://www.forlagetmunay.dk/webshop

??

Good luck

Try this:

ul.products li.product img {width:auto;border:1px solid red;}

Get rid of the border, it’s just there to show that we’re in the right ballpark

See! Indeed we are in the right ballpark ??
Now what? ??

Now what indeed ??

View source and you’ll get this:

<img width="150" height="150" src="https://forlagetmunay.dk/wp-content/uploads/2013/11/Lydbog_dvd-150x150.png" class="attachment-shop_catalog wp-post-image" alt="Lydbog_dvd" />

Click on the link part of that and it’ll take you to the image

https://forlagetmunay.dk/wp-content/uploads/2013/11/Lydbog_dvd-150x150.png

The images are more or less – nearly – the same size. As I mentioned above in my case I was happy enough with that, it wasn’t worth digging any deeper. You should have noticed when you added the CSS and refreshed the page that the images shrunk slightly, so it has done something. If you want bigger images then you’re going to have to reset the image size in WooCommerce and either upload new images (try one test one) or regenerate the images.

Hehe, fantastic!
Thank you SO much for your help!

For now, I think I’ll settle with the smaller size img. – looks kind of nice with the border also…hmmm ??

Just been experimenting with this and a few things to note:

1. WooCommerce may have changed the CSS classes and IDs. On my site the products are wrapped in a <div id="content-woocommerce"> So I had to change richarduk’s code accordingly. But richarduk’s code is still a huge help.

2. Using the Regenerate Thumbnails plugin is a huge time saver. Again, on my site it makes thumbs at both WordPress image sizes and WooCommerce image sizes. That is, I have WP images set at 150px, 200px and 400px, I have Woo images set at 186px, 291px and 150px. So when I regenerate thumbnails it makes 5 different sizes.

3. WP seems to supply WooCommerce with the closest size match image available. If your product listings show images at 200px but you have only generated images at 90px and 500px (for example), you will see a 90px image stretched to 200px. Not pretty.

4. Editing the code in a CSS file belonging to a plugin is not advisable as it will be overwritten when the plugin updates. Instead, you should create a child theme and use your own style.css file. See the WP Codex on how to create a child theme (it’s pretty simple).

Hope this helps someone.

Cheers.

This solution worked for me . really good. renoirIII made it.
blurry images on featured products

It should be easier than that…

1. change your thumbnail size in Woo to, say, 150 x 150
WC Settings >> Catalog >> Image Options

2. change your thumbnail size in WordPress to 150 x 150 also
WP Settings >> Media >> Image Dimensions

3. install and run Regenerate Thumbnails plugin
As this will only apply to new images, retrospective resizing should be done with Regenerate Thumbnails – its pretty easy

Your “related products” and “You may also like” images should be looking fine if you have uploaded your images larger than 150 x 150

Just started using Woo-Commerce and have had to over come many issues thus far and when it was all said and done and working, the images, like all of yours, were blurry. So frustrating! While I *DO* need to go through and adjust the css accordingly as it makes perfect sense, I just am burned out with all the fixes at this point. So, I used @chrisjackson’s little catalog adjustment sizes and the Regenerate Thumbnails plugin and the issues was corrected in less than a couple of minutes! Thank you both for saving my sanity this round!

I second @chrisjackson’s fix. Poor coding job on Woo’s part.

WooCommerce has finally posted instructions and a short video about sizing your images. A few folks show how to do this on YouTube, too. Together, all this info above (thanks!) and some leap-of-faith inference solved my issues, but I decided to save someone else some time (like those above did) and make my own infographic. Visual learners might be helped by this: https://valeriehudgins.com/how-to-fix-blurry-images-woocommerce/ If not, soldier on! Peace.

For me that seems not to be a solution, as it looks like that only works if you really have square previews with always the same resolution.

I sell artworks, and I find it important that they show completely in the preview (so I can’t just crop them). And obviously I won’t paint only square from now on because of WooCommerce ??
But proper sharp thumbnails and previews are important.

I found no setting or even CSS tweak to fix this for all images – and find it rather strange that the shop is scaling them so randomly. WooCommerce should just stick to the size given, and generate the image sizes accordingly.

Here is my shop for reference: https://www.oxpal.com/shop
Some of the paintings (namely the flower one) are also blurry in the big picture of the product view.