Ask your WordPress questions! Pay money and get answers fast! (more info)

Edit woocommerce product image size to stop blurriness? WordPress



What part of the woocommerce css or code do I have to edit to reduce the size of the blurriness?

I have edited, cropped, changed the multiple bits of css but I can not the proper code to reduce the product page images so that they are the same size as the actual photo image.
<img src="" class="attachment-shop_single wp-post-image" alt="butter-light" title="butter-light" height="310" width="307">


Answers (2)


Remy answers:

It's in this part : the width: 100% that causes the image to scale to the container size and blur. You can replace the width: 100% by max-width: 100% and it will be fine

.woocommerce #content div.product div.images img, .woocommerce div.product div.images img, .woocommerce-page #content div.product div.images img, .woocommerce-page div.product div.images img {
display: block;
width: 100%;
height: auto;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
-webkit-transition: all ease-in-out .2s;
-moz-transition: all ease-in-out .2s;
-o-transition: all ease-in-out .2s;
transition: all ease-in-out .2s;

zoomlanski comments:

I have to add some more images, but that seems to be the fix.
File: woocommerce.css
width:100% -->> max-width: 100%

Thank you, thank you, thank you.


timDesain Nanang answers:

it is blurry because the image source smaller than display area.
try this:
1. Go to:
2. set the <strong>Single Product Image</strong> size to 720 x 9999 (see screenshot)
3. install and activate plugin:
4. regenerate the thumbnail (