fbpx

How to Customize WooCommerce Product Image Size & Fix Blurry Images

In the eCommerce industry, there is a popular phrase used by many business owners – ‘What is seen is sold.

Indeed, product images are an essential component for any WooCommerce store. Check 10 different online stores, and you would most likely find 10 different image sizes used on them. The choice of the right product image size type does depend on the overall UI design of the store. Particularly when you sell apparel or dresses online through your store, there are numerous ways to customize WooCommerce image size for dresses.

Since there are different sizes of WooCommerce product images, it is not always easy to know how to change them to fulfill your business-specific needs.

Before we move now to understand how to customize WooCommerce product image size, you must also know why doing this is crucial.

Why Should You Customize WooCommerce Product Image Sizes?

There are two main benefits you get when you set WooCommerce thumbnail size or product image size:

1. No Image Blurriness

Adding product images in size different from what the store design theme allows, often result in blurriness. This image blurring effect, if not corrected, may make the prospects leave your store without buying.

2. High Website Performance or Speed

Images on a web page are one of the primary factors that determine its speed and performance. The larger images it has, the more time it will take for it to load, which often leads to lesser revenue and more unsatisfied customers.

What are the different types of product images in WooCommerce?

Before we move on to editing the product images, let’s see the types of WooCommerce product images.

Single Product Images

It is the largest image among the product images and refers to the main/featured image in the product details page. The settings in WooCommerce Customizer does not apply to this image. The minimum size for this image should be 800 × 800 pixels.

Catalog Images

These are medium-sized images appearing in product loops, such as the Shop page, Product Category pages, Related Products, Up-sells, and Cross-sells.

Product Thumbnails Images

These are the smallest images used in the Cart, Widgets, and Gallery thumbnails undern the Single Product Image.

How to Set WooCommerce Product Image Size

From the WooCommerce 3.3 version, a new and simpler way has been introduced to customize WooCommerce images size for dresses or other products. Also, you need not regenerate the images after customization.

‘Appearance->Customize->WooCommerce->Product Images’ is the simple formula you should remember for this task.

You can easily crop, resize, and automatically regenerate images, using the steps given below:

  1. In the WordPress dashboard of your online store, go to Appearance -> Customize.
  2. Then, click WooCommerce->Product Images.
  3. You will see the ‘Main Image Width’ field, enter the desired width that you want for a specific image.
  4. Click ‘Publish’.

By changing the image product resizing settings, the height of product images will not change or get cropped. You also get automatic thumbnail resizing features with which all the product images get resized or regenerated automatically in the background on setting the width. This was not possible with the earlier versions, and extra plugins were to be installed to regenerate the images based on new settings.

How to Customize Thumbnail Size for Images in WooCommerce

Here are the steps you should follow to resize WooCommerce thumbnail size:

  1. Follow the same formula – ‘Appearance->Customize->WooCommerce->Product Images’.
  2. In the thumbnail width, enter the desired width you want for thumbnails.
  3. Click ‘Publish’.

How to Reset Height of Shop Product Thumbnail Images

To customize the height of product images, you need to change thumbnail cropping options available, as shown below:

1.1: 

On selecting this option, the images will get cropped into 400 px width and 400 px height, assuming you have entered ‘400px’ in the Thumbnail width field.

Custom:

This selection allows you to choose from various aspect ratios for the images, like 1:1, 5:4, 4:3, 3:2, and others.

Uncropped:

This option is selected when you do not want the height of the image to be resized at all. It will display the pictures in their original aspect ratio (at the time of upload).

How to Fix Blurry Images in WooCommerce

Blurry images in WooCommerce occurs mainly because of two reasons:

Bad Quality Image Upload

The quality of the product image you upload on your WooCommerce store matters a lot in defining how it will appear at the front end. If a low-quality image is uploaded in the first place, it will not appear as clear and crisp as you would want it to be.

Inappropriate Thumbnail Settings 

Think of inappropriate thumbnail settings as not giving the right image in terms of dimensions to your website. For instance, if your WooCommerce shop page image size is 150x150px and you have uploaded a 100 x 100px product image for the same, then the system will automatically enlarge the image, making it look blurry.

Here are the steps to be followed to fix WooCommerce blurry images:

  1. Access WordPress Customizer by going to Appearance-> Customize->WooCommerce
  2. Select ‘Product Images’.
  3. Enter correct values for ‘Main Image Width’ and ‘Thumbnail Width’. If in doubt, use values 600px and 300 px respectively, as defaults.
  4. Otherwise, inspect images in your theme to obtain the right sizes.
  5. Use thumbnail cropping as required.
  6. Click ‘Publish’.

You can also use third-party plugins to fix WooCommerce blurry images.

FAQs Related to Customizing WooCommerce Product Image Size

1. Why cannot I find the main image width and thumbnail width fields in the theme customizer?

It is a common issue that many WooCommerce store owners face. It occurs because the chosen theme has declared WooCommerce support and the settings have been defined in the file theme’s functions.php’. Since they are pre-defined, they are not available in the customizer.

In simple words, image width settings will not be available to you if the chosen theme declares the size of the images.

2. How to change image width settings if they are declared by the theme developer?

To make image width settings, you need to either remove or change the parameters defined in the function.php file. If you do not know how to make code-level changes, hire a developer to help you out.

3. How can I change the sizes of catalog images?

From the WooCommerce 3.3 version and above, you can resize both shop product images and catalog/category images using the general settings:

Appearance > Customize > WooCommerce > Product Images > Thumbnail Width

4. What are the steps to change the single product image size for WooCommerce 3.2?

(We recommend you to use the latest versions of WooCommerce)

You can customize the WooCommerce product image size for a single product page using the following steps:

  • Click WooCommerce -> Settings
  • Go to the ‘Products’ tab -> Display
  • Scroll down to reach the ‘Product Images’ section
  • Enter the desired width & height in the ‘Single Product Image’ field
  • Click the ‘Save Changes’ button

Leave a Comment

Your email address will not be published. Required fields are marked *