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)
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: 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)
