How To Change Product Images Size?

0
682 views

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 WoocommerceHow To Change Product Images Size? >> Settings >> Products >> Display and navigate to the Product Images.

Setting WooCommerce Product Image Size
Setting WooCommerce Product Image Size

1. Image catalog

Image catalog
Image catalog

Catalog Image is for your product images on the shop page and for shortcodes. By default, it will have a size 300 × 300.

2. Single product image

Single product image
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.

3. Product thumbnails

Product thumbnails
Product thumbnails

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:

Demo Setting
Demo Setting

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.

Regenerate Thumbnails

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
 Plugin >> Add New
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
Regenerate Thumbnails
Regenerate Thumbnails
  • Click Activate to activate the plugin.
Activate The Plugin
Activate The Plugin
  • Go to Tools >> Regen. Thumbnails and Select “Regenerate All Thumbnails” to recreate all your change of the product size.
Regenerate All Thumbnails
Regenerate All Thumbnails

When it runs outdone, go to Shop page again and you can see the result. Here is my demo’s result:

Product Image Size
Product Image Size
WooCommerce Product Image Size
WooCommerce Product Image Size

Final Thoughts

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 Hosting Providers for WooCommerce.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz