Let’s face it, product images are a vital driving force behind sales. WooCommerce images in 3.3 aim to improve that with some changes to image size settings and the rendering of images.

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 images might look like on the frontend. Apart from that, we are also giving themes with explicit WooCommerce support more control over image settings to ensure that product images look good out of the box.

WooCommerce Images Size Change Guide
WooCommerce Images Size Change Guide

 

So how do you set the product image size in WooCommerce now? Image sizes can now 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.

As soon as you make any changes to 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.

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, then they are removed from the customizer. WooCommerce also comes packaged with some popular theme support declarations, which can be found under woocommerce/includes/theme-support/.

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 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:

/**
* 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:

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:

  • 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

There were some changes to how image sizes are handled in WooCommerce, and it may come across as 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 the background image regeneration. This will save users a lot of time and confusion!



Share This Post