You may be wondering how to edit the WooCommerce Image proportion because images are one of the essential parts of any online store. For this reason, we’ll explain in this guide how to edit, resize, customize, or change the WooCommerce WordPress plugin shop product images sizes proportions and aspect ratio.
WooCommerce 3.3 introduced a new and easier way to resize product images. You can now change the WooCommerce Product picture size from Appearance > Customize > WooCommerce > Product. And the great thing is you don’t have to regenerate the images after resizing them.
From WooCommerce 3.3, you can crop, resize and automatically regenerate images from Appearance > Customize > WooCommerce > Product Images. Product Image settings are on WooCommerce > Settings > Products > Display to Appearance > Customize > WooCommerce > Product Images.
Understanding Image Options
In the “Product Images” section, you will see three important options:
- Catalog Images: These are the images displayed on your shop and category pages.
- Single Product Image: This is the main image shown on the individual product pages.
- Product Thumbnails: These smaller images appear below the main product image on the product pages.
How To Change WooCommerce Products Image Proportion?
Follow these steps to change the single product image size: Learn how to edit, resize, customize, or change the WooCommerce WordPress plugin shop product images sizes proportions and aspect ratio.
- Go to Appearance > Customize
- Then go to WooCommerce > Product picture
- Write your desired width in the “Main image width” field.
- Click on “Publish”
The height of a single or main product picture will remain uncropped and not affected by the cropping settings. One of the cool features introduced in WooCommerce 3.3 is automatic thumbnail resizing.
After setting the width, all your product photos will resize automatically and regenerate the background. Previously we had to install the “Regenerate Thumbnails” plugin to regenerate the images to a new resolution.
WooCommerce Product Thumbnail Image: Edit Image Proportion
Follow these steps to change the shop, catalog or product category photo size: Adjusting Product Thumbnail Proportions
Now, proceed to the “Product Thumbnails” option. These smaller images complement the main product image on the product pages. Choose a suitable thumbnail size, typically around 150×150 pixels or 200×200 pixels, maintaining an appropriate aspect ratio.
- Go to Appearance > Customize
- Then go to WooCommerce > Product
- Write your desired width in the “Thumbnail width” field.
- You can set the height of the images in “Thumbnail Cropping”
- Click on “Publish”
Shop Product Image Height Settings
Setting the Height of the Shop or Catalog image in WooCommerce WordPress plugin:
- Firstly, 1:1: If you select 1:1, your images will be cropped into 360px width and 360px Height (assuming you add the image width 360px in the Thumbnail Width field.
- Secondly, custom: In Custom you can select the image’s aspect ratio. Here is some of the popular aspect ratio (1:1, 5:4, 4:3, 3:2, 16:9 and 3:1).
- Finally, uncropped: The height of the image will be without change. Images will display using the aspect ratio in which they were upload.
Woocommerce Image Edition In Conclusion
Finally, I hope you now understand how to deal with these changes and how to customize them to suit your needs. Moreover, feel free to use the comments section to share your experiences. By following this tutorial, you’ve learned how to edit WooCommerce image proportions effectively.
Maintaining consistent aspect ratios for your catalog images, single product images and thumbnails will create a visually appealing online store that attracts and engages customers. Remember that high-quality and suitably sized product images enhance user experience and boost sales. Happy selling!
