WooCommerce Images Size Change Guide

Guide & tutorial on how to change the images, photos, & pictures size, proportions & dimensions from WooCommerce plugin products & thumbnails

Updated on March 5, 2023
WooCommerce Images Size Change Guide

Let’s face it, product images are a vital driving force behind sales. WooCommerce images in 3.3 aim to improve that with changes to image size settings and the rendering of images. Learn in this guide & tutorial how to change the images, photos, and pictures size, proportions, and dimensions form your WooCommerce WordPress plugin products, shop page, and thumbnails.

WooCommerce 3.3 introduces new image cropping settings. Store owners can now control the width and height of their main images, as well as the cropping with visual cues as to what the photos might look like on the front end. We are also giving themes with explicit WooCommerce support more control over image settings to ensure product images look good out of the box.

So how do you set the product image size in WooCommerce now? Image sizes can currently be configured under the Customizer. Go to Appearance > Customize > WooCommerce > Product Images.

Here you can set the Main image width, Thumbnail width, and Thumbnail cropping. Image heights have intentionally been removed, as they are calculated automatically based on your settings. It’s worth noting here that your main, or “single”, product image no longer has any crop settings; they will always show uncropped.

When you change these settings, WooCommerce will automatically generate the new image sizes. This may take a little while to process, but it runs in the background.

If you want to see the status of the background regeneration, you can go to WooCommerce > Status > Logs and select the log from the dropdown beginning with wc-image-regeneration.

Re-sizing a Single Product Page Featured Image Image

Follow these instructions to alter the single product’s image size:

  • Head to Appearance > Customize
  • Then visit WooCommerce’s Product Images > Go.
  • Specify the desired width of the main image in the “Image width” field.
  • Click on “Publish”

The height of individual or primary product images will not be cropped and will not be affected by the cropping settings.

Resizing the Shop Page Product’s Thumbnail Image

Follow these instructions to alter the image size of the shop, catalog and product categories:

  • Head to Appearance > Customize
  • Then visit WooCommerce’s Product Images > Go.
  • Specify the desired thumbnail width in the “Thumbnail width” field.
  • Click on “Publish”

Additionally, you can specify the “length” of the shop thumbnail’s thumbnails by adjusting the “Width” and “Height” aspect ratios in the “Thumbnail cropping” section:

  • 1:1: If you choose this option, your pictures will be resized to squares.
  • Custom: This option allows you to choose the aspect ratio of the image. Popular aspect ratios (also known as film ratios) include (1 to 1, 5 to 4, 4 to 3, 3 to 2, 16 to 9 and 3 to 1).
  • Uncropped: The height of the image will remain untouched. Images will be displayed according to the aspect ratio in which they were originally uploaded.

Sizes Missing

You may notice that the Main image width and Thumbnail width settings are missing from your customizer screen.

Not to worry, if your theme has declared WooCommerce support and defined those settings, they are removed from the customizer. WooCommerce also comes packaged with popular theme support declarations, which can be found under woocommerce/includes/theme-support/. Keep reading to learn in this guide & tutorial how to change the images, photos, and pictures size, proportions, and dimensions form your WooCommerce WordPress plugin products, shop page, and thumbnails.

WooCommerce Images Size

In your child/custom themes, functions.php, or in a custom plugin, you can use the following code to remove the theme support and have the options show again in the customizer:

/**
* Unset image width theme support.
*/
function iconic_modify_theme_support() {
$theme_support = get_theme_support( ‘woocommerce’ );
$theme_support = is_array( $theme_support ) ? $theme_support[0] : array();

unset( $theme_support[‘single_image_width’], $theme_support[‘thumbnail_image_width’] );

remove_theme_support( ‘woocommerce’ );
add_theme_support( ‘woocommerce’, $theme_support );
}

add_action( ‘after_setup_theme’, ‘iconic_modify_theme_support’, 10 );

Alternatively, you can change the values to something else like so for WooCommerce images size change:

/**
* Modify image width theme support.
*/
function iconic_modify_theme_support() {
$theme_support = get_theme_support( ‘woocommerce’ );
$theme_support = is_array( $theme_support ) ? $theme_support[0] : array();

$theme_support[‘single_image_width’] = 800;
$theme_support[‘thumbnail_image_width’] = 150;

remove_theme_support( ‘woocommerce’ );
add_theme_support( ‘woocommerce’, $theme_support );
}

add_action( ‘after_setup_theme’, ‘iconic_modify_theme_support’, 10 );

If you’re building a custom theme with no existing WooCommerce support declaration, you’d just add support like so for WooCommerce images size change:

add_theme_support( ‘woocommerce’, array(
‘single_image_width’ => 800,
‘thumbnail_image_width’ => 150,
) );

In WooCommerce 3.3+, catalog image sizes have been removed. Instead, the catalog uses the same settings as thumbnails.

It’s possible to set the cropping value programmatically. You can simply run an update_option() call like so:

update_option( ‘woocommerce_thumbnail_cropping’, ‘1:1’ );

The values can be any of the following for WooCommerce images size change:

  • uncropped
    Don’t crop thumbnail images at all.
  • 1:1 (any ratio)
    Crop images based on the thumbnail width and this ratio.
  • custom
    Custom is also based on the thumbnail width, and comes alongside two other options:
    • woocommerce_thumbnail_cropping_custom_width
      A width ratio, for example, 4.
    • woocommerce_thumbnail_cropping_custom_height
      A height ratio, for example, 3.

To set the cropping to custom, for example, you can do this:

update_option( ‘woocommerce_thumbnail_cropping’, ‘custom’ );
update_option( ‘woocommerce_thumbnail_cropping_custom_width’, ‘4’ );
update_option( ‘woocommerce_thumbnail_cropping_custom_height’, ‘3’ );

Note: WooCommerce watches for changes to any of these options and will automatically begin a background image regeneration process if they are changed.

Final Words to Change WooCommerce Products Images Size

There were some changes to how image sizes are handled in WooCommerce, which may be confusing at first. I hope you now understand how to deal with these changes and how to customize them to suit your needs.

In my opinion, one of the best things to come from this is background image regeneration. This will save users a lot of time and confusion! I Hope it helps you to learn in this guide & tutorial how to change the images, photos, and pictures sizes, proportions, and dimensions form your WooCommerce WordPress plugin products, shop page, and thumbnails.