WooCommerce Product Image Common Issues

16/12/2018

If you are using WooCommerce and notice that your product images either do not fill the size of the product box, or are displaying strange effects when you hover over the image, it is due to the WooCommerce catalog size setting and the original size of your images. The product images you use need to match the sizes you have entered in the WooCommerce image settings. You can change the sizes to anything you'd like, just make sure your original images are larger or match the size you choose. To change the image sizes, please follow the steps below.

Step 1 - Navigate to WooCommerce > Settings > Product and scroll to the bottom of the page to find the image size settings.

Step 2 - Input the sizes you desire, just make sure your original images are larger or match the size you input.

Step 3 - Once you are done, you need to install and use the Regenerate Thumbnails plugin. Install the Regenerate Thumbnails plugin and go to your media section and choose to regenerate your image thumbnails so the new size is created and displayed on your site.

For further information on WooCommerce, please see our documentation or visit the WooCommerce support site.