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

Edit woocommerce product image size to stop blurriness? WordPress

  • SOLVED

Hello

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.

http://www.miltonscouts.ca/product/buttery-light-popcorn/
<img src="http://www.miltonscouts.ca/wp-content/uploads/butter-light-307x310.png" class="attachment-shop_single wp-post-image" alt="butter-light" title="butter-light" height="310" width="307">

Thanks
Tim

Answers (2)

2014-09-21

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.

2014-09-21

timDesain Nanang answers:

it is blurry because the image source smaller than display area.
try this:
1. Go to: http://domain.com/wp-admin/admin.php?page=wc-settings&tab=products
2. set the <strong>Single Product Image</strong> size to 720 x 9999 (see screenshot)
3. install and activate plugin: https://wordpress.org/plugins/force-regenerate-thumbnails/
4. regenerate the thumbnail (http://domain.com/wp-admin/tools.php?page=force-regenerate-thumbnails)