How to Customize WooCommerce Product Image Size?

woocommerce-product-image-size

Images are one of the most critical parts of any online store. But there are many different types of WooCommerce product images. And it is not always easy to figure out where you can change them to suit your specific needs.

Since WooCommerce image sizes can be a little complicated, we have created this guide to look at each of the fundamental aspects. 

First, let’s see why customizing WooCommerce product image size is important. Then, we will learn how to do it.

What are The Benefits of Sizing Your WooCommerce Product Images?

When you set the WooCommerce image sizes, there are two main benefits you will get:

No Image Blur

Adding product images in a different size than that allowed by the theme often results in blurry photos. This visual blur, if not corrected, can cause potential customers to leave your store without buying anything.

High Website Speed and Performance 

The images on your website are one of the main factors that determine the website’s speed and performance. 

The larger the image, the longer your online store takes to load. This often leads to lower revenue and more unhappy customers.

What is the Best Image Size for WooCommerce Products?

The best size for WooCommerce product images largely depends on the products you are selling and the theme you are using for your store.

For example, you should use an image size that is 800px – 1000px wide if you are selling simple products like plain t-shirts.

However, if you have detailed or complex products, uploading a larger image will allow potential customers to zoom in and see those details up close. In that case, images with 2000px width may work better for you.

WooCommerce image zoom

Note: Never upload images that are too large. Oversized ones will slow down your site and, as a result, will probably affect sales.

How Many Different Types of WooCommerce Product Images?

Before moving on to product image editing, let’s look at the WooCommerce product image types first. There are 3 types of product images in WooCommerce.

Single Product Images

This is the largest image type. It refers to the featured/main image on product detail pages. 

The minimum size for this type should be 800 × 800 pixels. The maximum can be any size. However, keep in mind that the larger the images, the slower your site will be.

Product Thumbnail Images

These are the smallest images used in product gallery thumbnails below the single product Image, shopping carts, and widgets.

Catalog Images

These are mid-sized images that appear in product loops, such as product category pages, shop pages, related product sections, upsell/cross-sell sections, etc. 

However, in WooCommerce 3.3 and above, they have been removed. Instead, WooCommerce category image size and WooCommerce shop page image size now use the same settings as the thumbnails’.

How to Customize WooCommerce Product Image Size?

From WooCommerce version 3.3, the developers have introduced a new and easier way to make all WooCommerce product images the same size. Also, you do not need to regenerate the image after customization.

Change WooCommerce Thumbnail Size and Main Image Size

  1. Image sizes can now be configured in WordPress Customizer. Go to Appearance Customize > WooCommerce > Product Images.
woocommerce-product-image-size-4
  1. Here you can set the WooCommerce thumbnail size and main image size. Type in the numbers you want. 

After you make changes to these settings, WooCommerce will generate new images with the new sizes automatically. This may take some time to process. However, it runs in the background.

Image heights have been intentionally removed as they are automatically calculated based on the image widths. 

Setting up the Cropping Feature for the Thumbnails

In the same window, you can customize the thumbnail heights by setting up the cropping feature. There are three options you can choose from:

  • 1:1: When this option is selected, the height of the images will be the same as the widths.
  • Custom: This selection allows you to choose from different aspect ratios for the images, like 1:1, 5:4, 4:3, 3:2.
  • Uncropped: Select this option if you do not want to resize the images. WooCommerce will render the images in their original aspect ratio.

Single product images no longer have any cropping setting. They always show uncropped.

Check the Status of the Background Process

  1. If you want to see the status of the background reconstruction, from the admin panel, go to WooCommerce > Status > Logs.
  1. After that, select the log from the dropdown that starts with ‘wc-image-regeneration’.
WooCommerce image regeneration

Why the ‘Thumbnail Width’ and ‘Main Image Width’ Fields are Sometimes Missing? 

You might see that the ‘Main image width’ and ‘Thumbnail width’ fields are missing from WordPress Customizer.

Not to worry! These settings will be removed from the WordPress Customizer if your theme has been declared WooCommerce support and predefined WooCommerce image size settings.

WooCommerce comes with some theme support declarations. This means that they have set the best image sizes for your theme.

But often, you will find these settings elsewhere in the admin area, like in the theme settings inside Customizer or the theme’s settings page. 

If not, your theme is probably really strict about the image sizes it uses and does not allow them to be changed easily. If you are in doubt, contact the theme developers or use their support system to double-check.

In this case, you need to modify or remove the parameters defined in the Functions.php file to change WooCommerce product image sizes. 

If you do not know how to make changes at the code level, hire a developer to help you or use a different theme. 

Therefore, you should check if a theme allows you to edit these things in WordPress Customizer before deciding to use it for the long term. In this case, you can try Woostify free WooCommerce theme. This theme is completely built for online shop and allows you to custom all WooCommerce image sizes.

How to Optimize Images if They Slow Down Your Website?

The final part is to focus on optimizing images to reduce loading speed. Nowadays, there are so many different devices and connection speeds. That is why image optimization is more critical than ever.

Make Sure Your Images are not Too Large

While you do not want to use images below 800px × 800px, you also do not want to do it the other way around. Uploading images that are too large will slow down your website.

Optimize Images

First and foremost, optimizing images means reducing file sizes as much as possible while keeping the highest possible image quality.

With Photoshop, you can save images at 80% quality, and they will still be usable. Additionally, you may need to consider using another tool to remove excess data from your image files and compress them further.

For this, I recommend using a free WordPress plugin called Smush. It removes redundant image data, resizes images to a suitable size, and then compresses them before saving them back to the media library.

Serve Your Media Assets from a CDN

CDNs are optimized to deliver static content such as images. When using one, the visitors’ browser requests the image file from it instead of overloading your server.

These are set up specially to handle millions of file requests efficiently. Through their robust network, you can distribute the images to your visitors extremely quickly while offloading your servers.

There are several excellent CDN services you can use:

  • Cloudflare
  • MaxCDN
  • KeyCDN

WooCommerce Product Image Size Too Big

This is often because you set the image sizes too big. Follow our guides above to reset them, and the problem should be resolved.

WooCommerce Product Images Different Sizes

If your product images show up in different sizes in your WooCommerce store, there are a few things you can do:

  • Before uploading your product images, make sure all of them are the same size. Our recommendation is to create a template with an image editor that you can use for any product image. 
  • Make sure you have adjusted your WooCommerce product image settings, including WooCommerce product thumbnail size and cropping.

WooCommerce Product Image Blurry

If your WooCommerce product images are blurry, you need to check a few things:

  • Is your image quality good from the start? Check the quality of your product images. If it is low, when added to your WooCommerce store, it will not look as sharp and clear as you want.
  • Check your thumbnail settings. For example, you want 800px images for your product pages and 200px images for your category pages. However, you only uploaded 200px images. In this case, WooCommerce will automatically enlarge them, causing the images to appear larger and blurred.

Add WooCommerce Photo Reviews to Increase Trust

Allowing customers to upload product images is a great way to provide social proof to new customers. This also creates new content for your products/services. 

Product reviews

You can use a WooCommerce testimonial plugin like Ryviu to create a modern and professional WooCommerce testimonial section with photo review capabilities.

If customers’ images are genuine, you can use them as your product images and for social media marketing or other marketing channels.

Final Words

In this tutorial, you have learned how to manage WooCommerce product image size. 

We already explained how to change WooCommerce thumbnail size and main image size. We also came up with solutions to some of the common issues you might encounter.

We all know how critical product images are to sales in your online store, so always make sure your product images are working well.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x

Download Woostify Now

Enter your email address and be the first to learn about updates and new features.

stay informed!

Subscribe to receive exclusive content and notifications