How to Fix WooCommerce Image Size Issues

Are you having problems with the image sizes on your online store? You’ve come to the right place. In this guide, we’ll show you different ways to fix the most common WooCommerce image size issues.

WooCommerce is one of the best eCommerce platforms, but once in a while, you might encounter some issues. We’ve already seen how to fix the most common problems on the checkout and what to do when the Add-to-Cart button isn’t working. In this tutorial, we’ll show you different solutions to fix image size issues.

These problems can happen due to various reasons, such as theme or plugin incompatibility, wrong image sizes, image fields missing, and so on. Before we see how to solve the various image size problems, let’s have a look at the different types of images in WooCommerce.

Types of Images in WooCommerce

There are many types of images you can add to your website, but the three primary types used in WooCommerce are product, catalog, and product thumbnail images.

• Single product images: Large images are used to view a single product. This is the primary image of the product that you display to customers when they open the particular WooCommerce product page. You can add multiple product images to showcase the product from different angles.
• Catalog images are medium-sized product images typically used on the WooCommerce shop page. If you have a separate category page in your online store, these catalog images can also be displayed on product categories or on the products themselves.
• Product thumbnail images: small images. They are displayed to identify products on various WooCommerce pages, including cart pages, widget areas, and order pages.

Common Problems with WooCommerce Image Sizes

Now you have a better understanding of the various types of WooCommerce images and their size differences. Images are vital for converting visitors into customers, so problems with your images can be a significant headache.

To resolve WooCommerce image size issues, you first need to identify the problem. The tricky part is that you may encounter several issues related to image sizes. Some of the most common ones are:

1. Blurry images

This is one of the most common problems. The images you upload for your products or thumbnails appear blurry and may not be clearly visible, even if the original image wasn’t compressed, was clear, and had excellent quality.

Not only do blurry images look bad, but they also give the impression that your site isn’t professional.

Original Image

Blurry Image

2. Low-quality image

Like blurry images, some pictures on your website might look lower quality after you upload them. They might seem pixelated or lack the smooth lines of the originals.

This can happen even if the uploaded image has excellent quality. We’ll see why and how to fix it in the next section.

3. Wrong image sizes

Sometimes you might notice that the uploaded images are different sizes from the originals. This is a very common issue if you don’t adjust your image settings according to the theme requirements.

For example, let’s say your theme requirement for catalog images is at least 250 x 250 pixels, but the WooCommerce image settings of your store are set up to 200 x 200 pixels. Since the settings aren’t configured to meet the theme requirements, your image may be automatically resized to an incorrect size.

4. Zoom, lightbox, or slider issues

WooCommerce provides you with zoom, lightbox, and slider options to preview your images. This was a new feature that was added to WooCommerce with the release of version 3.0. If your theme hasn’t been updated in accordance with its specifications, you may encounter issues.

5. Image width and thumbnail fields Missing

You might also notice that the width and thumbnail fields of your WooCommerce images are missing from the Customizer under Appearance > Customize > WooCommerce > Product Images.

This can be the case if your theme has very strict image sizes, so you can’t change them in the admin at all. In that case, you will need some programmatic knowledge, which we will discuss in the solutions below.

Now that we have a better understanding of the types of images and the most common problems, let’s explore different solutions to fix image size issues in WooCommerce.

How to Fix WooCommerce Image Size Issues

Since you are familiar with some of the most common WooCommerce image size issues, let’s fix them as well. However, the image size issues you encounter may be due to various factors. Therefore, there may not be a specific solution for them.

Therefore, we recommend using one of the standard solutions provided below to address any image size issues. We are confident that one of the solutions will resolve the WooCommerce image size issues.

1. Initial Checklist to keep in mind

Before we address the specific solutions to fix image size issues, there are a few key points to keep in mind. First, ensure that you have correctly set up WooCommerce, following all steps without any omissions. You might face issues with your website if it’s not installed correctly.

Second, we would like to remind you to verify that all information on your website is up to date. There can be problems in your store if you haven’t updated your theme or plugins to the latest version.

Similarly, ensure that you update WooCommerce to the latest available version. To know if you have pending updates, go to Plugins > Installed Plugins on your WordPress dashboard. If you receive notices asking you to update WooCommerce, click ‘Update Now.‘

Moreover, if you have updated WordPress to the Gutenberg editor, make sure WordPress is also up to date. On the other hand, if you use WordPress with the classic editor, it’s best to update it to the newest version of WordPress 4.9.

Once you’ve completed all these steps, if you still experience issues with the image sizes, proceed to the next solution.

NOTE: We will use the Divi theme for this tutorial, so some of the pages might look different than your website if you use another theme. However, you should be able to follow every single solution without any problems. If you’re looking for a new theme compatible with WooCommerce, have a look at this article.

2. Set Custom WooCommerce Image Sizes

Adding custom image sizes is one of the most common ways to fix the WooCommerce image size issues. Since most problems stem from changes to the default image sizes, this should be your first step.

Setting up a custom image size is relatively easy. On your admin dashboard, go to Appearance > Customize and open the WooCommerce tab to access the Customizer.

Then, open the Product Images option. Here you can resize the product page and thumbnail images of your products. To edit the main image on the product page, enter the desired image size in the Main Image Width section.

You can also edit the thumbnail sizes and cropping here. To adjust the thumbnail image size, edit the Thumbnail Width option.

Furthermore, there are three options for adjusting thumbnail cropping: 1:1, custom, and uncropped. To minimize the image issues for both functionality and appearance, 1:1 cropping is the best option. After you have made all the necessary changes, click Publish.

3. Check your Theme’s Product Image Dimensions

If you are still facing problems even after adding custom image sizes, then the image size may be incorrect. As mentioned earlier, regarding the incorrect image size issue, WooCommerce has specific theme requirements for image sizes. If those sizes don’t meet the requirements, you may face some problems.

To resolve these WooCommerce image size issues, it is best to check the theme’s product image sizes first. Open the product page of any of your products and use the Inspect Element developer tool in your web browser to view the theme image size.

For example, if you’re using Google Chrome, right-click on the product image and press Inspect. You will be able to see the image size in the Inspect Element developer tool as shown below.

In this case, the product image size is 900 x 600. If the image requirements of your theme differ, you may encounter problems.

You can adjust the product image size in the Customizer using the method described in point 2. Similarly, you can inspect the thumbnail image size the same way and further edit it in the Customizer if needed.

4. Change Default Image Sizes

If you have tried all the above solutions but are still experiencing image issues, you may need to adjust WordPress’s default image sizes.

To do that, go to Settings > Media on your WordPress dashboard, and you will see the size options for thumbnail, medium, and large images.

Set the image sizes according to the theme requirements and save the changes.

Additionally, you can remove unused default sizes. To learn more, check out our guide on removing WordPress default image sizes.

5. Fix WooCommerce Image Size Issues with Plugins

Another alternative to fix the WooCommerce image size issues is to use a dedicated plugin. There are several tools available for this purpose. In this section, we will show you a few ways to prevent further image size issues on your website.

Let’s have a look at some of the best tools you should use.

5.1. Perfect Images and Retina Support

In simple terms, Retina Support is a display option for images on your website with a very high resolution and quality. A retina-ready display ensures that any image displayed on any device, regardless of screen size, is sharp and free of visible pixelation or borders.

This is a perfect solution if the pictures uploaded to your site are blurry or low-quality.

If you want to create a retina-ready image manually, you need to double the image’s size and dimensions, optimize it, and then re-upload it. However, you can use a plugin to automatically make your images retina-ready. For this, Perfect Images is one of the best plugins out there.

Perfect Images is a simple plugin that adds retina-ready images to your site. It automatically detects images with retina issues and creates retina-ready copies. Additionally, you can create individual retina-ready images or do it in bulk to save time.

Now, let’s see how to use this plugin.

5.1.1. Install and Activate the Plugin

First, install and activate it. In your WordPress dashboard, go to Plugins > Add New, look for the plugin, and click Install Now.

After the installation is complete, activate the plugin. Alternatively, you can install it manually. If you aren’t sure how to do that, have a look at our guide to installing a WordPress plugin manually.

5.1.2. Configure the Image Options for Retina Display

After activating the plugin, you have to configure the retina options for your WooCommerce or website images.

Go to Meow Apps > Perfect Images, and you will see all the options for your retina images in the Retina tab. The default options are ok for most websites as they create retina images for the most common image sizes.

However, after the images are converted into retina-ready formats, they might need to be optimized. Retina-ready images tend to be very large and can slow down your website. This can be a major turn-off for your customers, as most users now shop online on mobile devices.

To ensure retina images don’t slow down your website, you need to optimize them properly.

You can do this from the plugin by going to the Easy IO tab. Keep in mind that for this, you will need to subscribe to their premium plan, which includes Easy IO for optimization and costs $ 10 per month.

Alternatively, you can also optimize them manually using an image optimization plugin or service such as TinyPNG or Smush.

5.1.3. Convert Images for Retina Support

After you have configured all the necessary options for your retina images, you can start converting them. First, go to Media > Perfect Images, and you will be redirected to the Retina Issues tab. Here, you can create retina-ready images to resolve WooCommerce image size issues.

You can also generate thumbnails and retina images by selecting the images you want.

5.2. Regenerate Thumbnail

Regenerating thumbnails is also an effective way to resolve issues with image sizes, particularly with thumbnail images.

These problems usually occur when you have recently changed your theme. The new theme may have different image size requirements, so you will need to adjust them accordingly.

If you have a large number of thumbnails on your website, consider using Perfect Images. All you need to do is configure the image size options just like we did in steps 5.1.1 and 5.1.2.

Then, go to Media > Perfect Images, open the All tab, and you will see all the images on your site. Similar to the retina support step, you can regenerate thumbnails for particular images or in bulk.

To regenerate images in bulk, press Bulk Actions and select Regenerate All Entries to regenerate thumbnails. Please note that this process may take a few minutes, especially if your site contains a large number of images.

6. Programmatic Solution

If you’ve come this far, you have tried to fix the image size issues with the default WooCommerce options and even with plugins. If nothing else works and you are still facing problems, there is one more thing you can try. To use this solution, we recommend having basic programming knowledge, as we will be using some code.

There are some code snippets that you can use to resolve image issues, but please note that the snippet we will use will modify the image sizes on your website. This can be useful when the main image widths and thumbnail fields are missing in your theme Customizer and you want to set custom WooCommerce image sizes.

As we’ll be editing some core files, we recommend that you back up your WordPress website before we start. Additionally, it’s a good practice to create a child theme or use any of these WordPress child theme plugins.

Change Image Size using Code Snippets

To change the image sizes when the image width and thumbnail width are missing in the Customizer, you can use the following code snippet. Go to Appearance > Theme Editor and open the functions.php file.

Then, add the following code snippet at the bottom of the editor.

add_theme_support( 'woocommerce', apply_filters( 'divi_woocommerce_args', array(
   'single_image_width' => 600,
   'thumbnail_image_width' => 300,
   'product_grid' => array(
   'default_columns' => 3,
   'default_rows' => 4,
   'min_columns' => 1,
   'max_columns' => 6,
   'min_rows' => 1
   )
) ) );

This snippet sets the product image width to 600 and the thumbnail width to 300, which are the default values. Adjust these values according to your requirements and don’t forget to update the file.

7. Support Options

If you have tried every solution mentioned here but couldn’t find the solution to the image size issues, either the problem you are facing is rare, or there is an issue with the core files of WooCommerce or your theme.

At this point, the best course of action is to contact customer support. WooCommerce offers excellent support options, allowing you to contact them about your image size issues.  Alternatively, if you believe your theme may be the issue, you can contact your theme provider and request their assistance.

Common Image Troubleshooting Checklist

If your WooCommerce product images still appear incorrect after adjusting the settings, use this checklist to identify and fix common problems:

• Did you regenerate thumbnails: After changing image size settings, use a plugin like Regenerate Thumbnails to apply the new dimensions to existing images.
• Are your original images high-resolution: Make sure your uploaded product images are at least as large as the configured dimensions. Small or low-res photos will appear blurry.
• Is your theme overriding WooCommerce settings: Some themes, especially premium ones, apply custom image sizes. Check your theme documentation or settings panel for overrides.
• Is caching showing outdated images: Clear your browser cache, site cache, and any CDN (such as Cloudflare) to ensure you’re viewing the updated versions of your images.
• Are you using a consistent aspect ratio: For a uniform layout, use the same aspect ratio (such as 1:1 or 4:3) across all product images.
• Are any image optimization plugins compressing too much: If you’re using image compression tools, check their settings. Over-compression can lead to blurry or distorted images.

Best 3 WordPress Plugins to Fix Image Issues

Here are three plugins you can use to fix the most common WordPress image issues:

1. Regenerate Thumbnails

Regenerate Thumbnails is a must-have plugin when working with WooCommerce product images. After you change your image size settings in the Customizer, previously uploaded images won’t automatically update to match the new dimensions.

That’s where this plugin comes in. With just a few clicks, you can regenerate thumbnails for all images in your Media Library. It works for both standard WordPress image sizes and custom sizes defined by your theme or plugins.

This is particularly helpful when switching themes or modifying product display settings in WooCommerce. The plugin also supports bulk regeneration, which saves time for stores with hundreds of products. You can choose to regenerate thumbnails for all images or only for those that are missing sizes.

It’s lightweight, regularly maintained, and works seamlessly with most themes and plugins. For any WooCommerce store owner, this plugin ensures your image updates are applied cleanly and consistently across your site.

2. Simple Image Sizes

Simple Image Sizes gives you complete control over all image sizes used on your WordPress site, including those created by WooCommerce. Once installed, it adds a visual interface to your WordPress Media Settings, where you can edit or remove existing image sizes and create new custom ones.

This is especially helpful if your theme or a plugin defines additional image sizes that aren’t working well with your layout. With this plugin, you can adjust dimensions and cropping behavior directly without modifying any code.

It also includes an option to regenerate thumbnails after applying changes, helping you maintain a consistent image appearance. For WooCommerce stores, it’s a helpful way to manage catalog images, single product images, and thumbnail sizes with greater precision.

Whether you need a 1:1 ratio for your grid or uncropped images for larger displays, this plugin makes the process intuitive. It’s a time-saving tool for store owners who want better image control.

3. Resize Image After Upload

Resize Image After Upload automatically scales down large images as soon as they’re uploaded to your site. This can be a lifesaver for WooCommerce stores that use high-resolution product images, as they can slow down performance or exceed server limitations.

You can define maximum width and height values, and the plugin will resize every image accordingly without manual intervention. It helps maintain consistent image dimensions and ensures that no oversized files are served to users.

This is especially useful for non-technical users or teams that upload images in bulk. It also reduces storage usage and bandwidth without requiring any compression plugins. Resize Image After Upload works well alongside image optimization tools and is compatible with WooCommerce out of the box.

If you want to avoid bloated image uploads and simplify image management across your store, this plugin offers a simple yet powerful solution that works automatically in the background.

Frequently Asked Questions

Now, let’s examine some frequently asked questions about this topic.

Conclusion

All in all, there are various image types (single product, catalog, and product thumbnails), and several common issues with image sizes. The most common problems include blurry or low-quality images, incorrect image sizes, incorrect zoom settings, and missing lightbox and slider options, as well as missing width and thumbnail fields.

In this guide, we’ve explored various solutions to address the most common WooCommerce image size issues.

1. Update your theme and plugins to the latest version, including WooCommerce
2. Set custom WooCommerce image sizes
3. Check your theme’s image product dimensions
4. Change default image sizes
5. Use plugins
6. Programmatic solution with a bit of code
7. Contact WooCommerce or your theme’s support team

If this article was helpful to you, share it on social media and help your friends overcome these problems.

Have you faced these issues before?

How did you solve them?

Let us know in the comments below.

For more useful guides, here are articles that you might find interesting:

• How to add an image to a product in WooCommerce
• 3 Methods to Remove Thumbnails in WordPress
• How to Add Custom Image Sizes in WordPress