Let’s face it, product images are a vital driving force behind sales. Combine that with thousands of WooCommerce-enabled themes out there and it can become difficult to have product images that look good out-of-the-box on all of them. WooCommerce 3.3 aims 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.

Theme Support

In the past, theme authors had to make updates to settings directly via update_option calls to change the settings in the DB. This resulted in store owners experiencing issues where they would change image settings in the admin area just to have it revert back to what the theme updates it to on each page load. With WooCommerce 3.3 theme authors can now declare image sizes via the add_theme_support function. Declaring image sizes this way will take priority over any other settings and also hide the image settings section in the admin area.

add_theme_support( 'woocommerce', array(
'thumbnail_image_width' => 150,
'single_image_width' => 322,
) );

Thumbnail Cropping

A new thumbnail cropping section in the customizer will allow store owners to select one of three cropping ration settings with visual cues:

  • 1:1 (Square scropping)
  • Custom (Store owner can enter a custom aspect ratio)
  • Uncropped (Preserve single image aspect ratio)

Image sizes are then calculated based on the cropping option selected and the image width. It is important to note that Single Product Images are uncropped and not affected by the cropping settings.

Automatic Thumbnail Resizing

Apart from the new theme support and cropping settings, we have also introduced automatic thumbnail resizing. In the past when you changed a product image WordPress would not actually resize the image and you had to install a plugin like Regenerate Thumbnails in order to have WordPress resize the images for you. In WooCommerce 3.3 we have now added on-the-fly thumbnail resizing as well as background thumbnail resizing.

How this works is when you change your image settings WooCommerce will kick off a background process that automatically resizes all your images for you to the correct new sizes. While the images are being resized or if for some reason the resizing did not run or complete, we’ve added on-the-fly resizing to the frontend, ensuring that your images will always look great to your customers.

The on-the-fly resizing also plays an important part in ensuring that you have a great experience when visually editing your site through the customizer. If your theme adds support for it you can play around with different image sizes and cropping settings from within the customizer and see the results instantly.

These changes are already in the master branch and will be going out with the WooCommerce 3.3 release in January 2018.

If you have any thoughts or feedback you would like to share, feel free to leave them in the comments.