Many people who have bought some of my WordPress themes ask me How to fix blurry photos in WooCommerce so I´ve decided to make a really fast instructional tutorial.
If you’re having issues with your WooCommerce product images being too small, blurry or too big, this may be because of the image you’ve uploaded do not match your WooCommerce product image settings.
- First of all you should enter site admin panel and navigate to WooCommerce > Settings.
- Under the Products you should see the Display option, which defines the product images dimensions Width X Height in pixels. We need to change them.
- Catalog Image is for your images on the shop page and for widgets.
Single Product Image is for your images on the single product pages.
Product Thumbnail is for your smaller product thumbnails.
The photos you upload to products will be resized to match the values you have input here. If your settings are 100×100 and you upload a 300×600 image it will be resized to 100×200. You can also choose to ‘hard crop’ your images which will force them to be the size specified in these settings, regardless of the raw image you upload, but will be cropped rather than distorted in scale.
4. The minimum suggest width for images is 600px. If you do not want the image cropped, leave the height field blank.
5. Once you have made your changes to the image dimensions, click ‘Save Changes’.
6. If you change the image dimensions after you have uploaded product images, you will need to download and run the Regenerate Thumbnails plugin just once Regenerate Thumbnails – this is to ensure that all affected images are resized to match the new dimensions.
That concludes my tutorial for fixing the blurry product images on your WooCommerce shop.