Skip to Content

Optimize Your Woocommerce Product Image Size

This content may contain links to products, software and services. Please assume all such links are affiliate links which may result in my earning commissions and fees.

Selecting the right image sizes for your Woocommerce products is a crucial step in optimizing your online store.

Product images are often the first thing customers see, so making sure they are properly sized and formatted goes a long way in providing a polished user experience.

In this comprehensive guide, we’ll walk through everything you need to know about configuring Woocommerce product image size, from adjusting default settings to utilizing plugins and custom CSS.

Follow along for tips on adding multiple image sizes, resizing images, and best practices for image dimensions to showcase your products in their best light.

Optimize Your Woocommerce Product Image Size

Optimize Your Woocommerce Product Image Size Configuring the right Woocommerce product image dimensions is key for a polished online store.

Default sizes like Product Thumbnail (200px x 200px) and Single Product (600px x 600px) can be adjusted in your dashboard settings.

For best results, upload large high-res source files, use common aspect ratios like 1:1, and regenerate all thumbnails after making size changes.

Compressing final images also improves site loading.

With properly sized product photos that balance visual impact and fast performance, you can showcase your products in their best light and keep customers engaged.

Follow our guide for customizing sizes with CSS, adding multiple images, and leveraging plugins to optimize your Woocommerce product images.

Woocommerce Product Image Size Settings

Woocommerce enables you to configure product image sizes right within your dashboard settings.

Navigating to WooCommerce > Settings > Products > Display allows you to define widths and heights for different image types. The main image sizes are:

  • Product Thumbnail Image – Default is 200px x 200px
  • Product Single Image – Default is 600px x 600px
  • Product Gallery Thumbnail – Default is 100px x 100px

Adjusting these settings globally resizes all product images of that type in your shop.

You can make them larger to zoom in on details or smaller to load faster.

Just be sure to also re-upload images at the new size for crisp results.

How do I add different sizes to my product in WooCommerce?

  1. Upload your high-resolution original image files to the product image gallery. These should be large files, at least 2000px or more on the longest side.
  2. Install and activate the “Regenerate Thumbnails” plugin. This allows you to create multiple resized versions of your original images.
  3. Go to WooCommerce > Settings in your WordPress dashboard. Under the “Products” tab, click on “Display” to access image size settings.
  4. Adjust the image dimensions for Product Thumbnail, Single Product, and Product Gallery Thumbnail. Make them larger or smaller depending on your needs.
  5. Save your changes to the image sizes.
  6. Next, go to Tools > Regenerate Thumbnails in your dashboard menu.
  7. Check the image sizes you want to regenerate fresh thumbnails for. Typically, you’ll want new thumbnails for all sizes.
  8. Click “Regenerate Thumbnails”. This will create newly resized versions of your product images.
  9. Upload the newly generated thumbnail images to your product gallery. Delete the original large images if desired.
  10. The different image sizes will now show up on the frontend product pages, archives, etc. based on the template.
  11. Use CSS to further customize image sizes by product type, category, etc. if needed.

Woocommerce product image size css

One option for finer control over your product image sizes is adding custom CSS code.

This allows you to override the default global WooCommerce settings and target specific product types or categories.

For example, to increase the product gallery thumbnail size, you can use CSS such as:

.product-type-clothing .thumbnails img {
  width: 150px;
  height: 150px; 
}

This specifically increases the thumbnail dimensions for products in the clothing category. The key steps are:

  1. Add CSS code to your theme stylesheet targeting the desired selectors
  2. Adjust the width and height properties to set a custom size
  3. Enable the new image size when regenerating thumbnails
  4. Upload properly sized images to utilize the new dimensions

With some strategic CSS, you can fine-tune image sizes across your products for a tailored look and optimized site performance. Woocommerce product thumbnail image size

The default Product Thumbnail image size in Woocommerce is set to 200px by 200px.

This smaller image size displays in product category archives, shop pages, related products sections, and other product listings across your site.

The main purpose of the product thumbnail is to provide a smaller, faster loading image to accompany vital product information like the title, price, rating, etc.

Using a thumbnail image rather than the full single product image improves page speed and creates a consistent look across your shop pages.

While 200px x 200px is the standard dimension, you can customize the thumbnail size by adjusting the settings in your dashboard.

Just be sure to regenerate new thumbnails and upload properly sized images to take advantage of your updated dimensions.

Check out my other articles for Best Woocommerce Multi Warehouse Inventory

Woocommerce product thumbnail size change

  1. Go to your WordPress dashboard and navigate to WooCommerce > Settings.
  2. Click on the “Products” tab.
  3. Select “Display” from the menu.
  4. Scroll down to the Image sizes section.
  5. Under “Thumbnail size”, update the width and height pixel dimensions. For example, you can increase both to 300px for a larger thumbnail size.
  6. Be sure to maintain the proper aspect ratio when adjusting the dimensions. The default is 1:1 (square).
  7. Click “Save changes” at the bottom to update the settings.
  8. Install and activate the “Regenerate Thumbnails” plugin if you haven’t already. This allows you to batch resize images.
  9. Go to Tools > Regenerate Thumbnails in your dashboard sidebar.
  10. Check the thumbnail size you want to regenerate fresh images for.
  11. Click “Regenerate Thumbnails”. This will create new thumbnail images based on the new size.
  12. Upload/replace the new thumbnail images for each product.
  13. Clear any page caches and view your site. The updated thumbnail size should now be live.
  14. Use CSS or plugins to fine-tune sizes further if needed.

Woocommerce Product Image Aspect Ratio

The aspect ratio of a product image refers to the proportional relationship between its width and height.

Maintaining consistent aspect ratios for your Woocommerce product photos results in images that don’t appear distorted, stretched, or squished.

The standard aspect ratio for Woocommerce product galleries and single images is 1:1 – meaning the width and height are equal, creating a perfect square image. Other common ratios are 4:3 or 16:9.

When adjusting image sizes, be sure to keep the same aspect ratio to avoid distortion.

If you have non-square source files, you may need to crop them into the desired ratio.

Using an image editing tool, crop images symmetrically to get square thumbnails with no warped stretching.

Consistent aspect ratios contribute to a polished, professional look across your shop.

With properly sized and cropped product images, you can do justice to the visual quality of your items for sale.

Woocommerce Product Image Size Recommendation

Woocommerce Product Image Size Recommendation Use high-res source files at least 2000px wide for optimal quality and performance.

Adjust global settings to balance visual impact and faster loading. Common aspect ratios like 1:1 and 16:9 prevent distortion.

Regenerate all thumbnails and compress final images after size changes. Follow these best practices to properly showcase products with impactful and fast-loading images.

How Do I Optimize My Woocommerce Product Image?

  • Upload high-res source files at least 2000px or larger
  • Use common aspect ratios like 1:1, 4:3, 16:9
  • Adjust settings to balance image quality and file size
  • Regenerate all thumbnails after changing sizes
  • Compress final images to improve loading

How Do I Resize a Product Image in Woocommerce?

  1. Install the Regenerate Thumbnails plugin
  2. Go to WooCommerce > Settings to update image sizes
  3. Navigate to Tools > Regenerate Thumbnails
  4. Check the sizes you want new thumbnails for
  5. Click Regenerate Thumbnails
  6. Upload newly sized images

Check out my other articles for Gravity Forms Woocommerce Add To Cart

Woocommerce Product Image Size Recommendation Template

A handy template for optimizing your Woocommerce product image sizes would list the following for each image type:

Image Type Size Aspect Ratio
Gallery Original Full size  
Gallery Thumbnail 400px x 400px 1:1
Single Product 600px x 600px 1:1
Product Thumbnail 300px x 300px 1:1

Woocommerce Product Image Size Plugin

Plugins extend the functionality of Woocommerce to offer more advanced control over resizing product images.

The WC Image Sizes plugin lets you define custom sizes beyond the global defaults. Configure image dimensions by product type, category, or other criteria.

Regenerate Thumbnails enables batch resizing existing images to any new sizes.

Use it when changing global settings. The two plugins work hand-in-hand to add and resize multiple image sizes. Additional plugins like Imagify optimize images for faster loading.

With the help of plugins, you can bypass limits of global settings and tailor product images to perfectly fit your design needs.

They provide easy ways to bulk process images while maintaining visual quality.

Configuring your Woocommerce product image sizes is crucial for providing the best user experience.

Follow our guide to adjust global settings, use plugins, customize with CSS, and properly resize and regenerate thumbnails.

Finding the ideal balance of image quality and faster loading takes testing.

But with high-resolution source files, consistent aspect ratios, and multiple sizes for different contexts, you can showcase your products in their best light across your shop.

Well-sized product images influence conversions and keep customers engaged. Invest time into optimizing them.

With the right settings and workflows, your Woocommerce product photos will impress customers and enhance your brand image.