Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

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 (