In the previous article, you may know definitely How To Setup Shop As Homepage. So in this article, I will show you how to customize the WooCommerce Product Image Size. The default product image size of Woocommerce might not as you want, they can be smaller or bigger than the default. Although the first article Initial Setup For WooCommerce has a glimpse of customizing product image size but this is an important feature so I will take an entire post to guide you fully all the tutorials on product image size. Let’s begin!
Setting WooCommerce Product Image Size
To set the product images in Woocommerce, access the Woocommerce >> Settings >> Products >> Display and navigate to the Product Images.
Catalog Image is for your product images on the shop page and for shortcodes. By default, it will have a size 300 × 300.
Single product image
Once you click on the product, large product image will be displayed on the left and that’s the Single product image. By default, its size is 600×600.
Product Thumbnail is for your smaller product thumbnails for widgets. By default, its size is 180×180.
To demo, now I try to fix it a little bit as below:
Click on Save Change. However, after the value change, the display of images may not be sharp as the default at all, or even not changing. We will need a plugin to fix this problem.
For the changes to take effect, we must proceed to reconstruct the image size, meant for WordPress recreate the image size according to the new size. You have to install the plugin Regenerate Thumbnails with some simple steps:
- Go to Plugin >> Add New
- Search Regenerate Thumbnails, find the one that has the description “ Allows you to regenerate your thumbnails after changing the thumbnail sizes” and click on “ Install Now”
- Click Activate to activate the plugin.
- Go to Tools >> Regen. Thumbnails and Select “Regenerate All Thumbnails” to recreate all your change of the product size.
When it runs outdone, go to Shop page again and you can see the result. Here is my demo’s result:
To make your online shop looks more professional you have to build up the “on page” from the smallest stuff like product image. After this article you have known definitely how to customize WooCommerce Product Image Size, for the next time I will introduce to you about