How To Edit WooCommerce Image Proportion

In this guide how to edit, resize, customize, or change the WooCommerce WordPress plugin shop product images sizes proportions & aspect ratio.

By Claudio Pires
Updated on July 31, 2023
How To Edit WooCommerce Image Proportion

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:

  1. Catalog Images: These are the images displayed on your shop and category pages.
  2. Single Product Image: This is the main image shown on the individual product pages.
  3. 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:

  1.  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.
  2. 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).
  3. 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!

Claudio Pires

Claudio Pires is the co-founder of Visualmodo, a renowned company in web development and design. With over 15 years of experience, Claudio has honed his skills in content creation, web development support, and senior web designer. A trilingual expert fluent in English, Portuguese, and Spanish, he brings a global perspective to his work. Beyond his professional endeavors, Claudio is an active YouTuber, sharing his insights and expertise with a broader audience. Based in Brazil, Claudio continues to push the boundaries of web design and digital content, making him a pivotal figure in the industry.