Changelog

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.

It used to be that you had to find specific WooCommerce-compatible themes for your store. In the upcoming release we have made big improvements in how WooCommerce handles themes that were previously unsupported, so now you can run WooCommerce with any theme!

On themes that don’t formally declare WooCommerce support the templates will render inside the content. This keeps everything looking natural on the site while ensuring everything still works great. Here are some before and after examples using themes that do not formally declare WooCommerce compatibility:

In order to make sure everything looks as nice as possible and so customers can see products well on themes with narrow content areas, lightbox and zoom will automatically be enabled for themes that don’t formally support WooCommerce. If your theme currently declares WooCommerce support the theme will still have full control over whether lightbox and zoom are enabled on products.

One thing that you will notice is that the product reviews area is not present on these themes. In our testing the CSS used by most themes that do not support WooCommerce did not work well with WooCommerce’s CSS for review styles. These themes will use the regular comments form. Themes that declare WooCommerce support will still use the review template.

Column and row settings

We’ve also added the ability to select the number of rows and columns displayed in the shop to the customizer. Everything updates dynamically so you can preview how your shop will look while changing the settings. The width of the columns will automatically increase or decrease depending on your settings, so everything should look nice and fill the available area. This feature is available on all themes.

Theme developers can set the minimum, maximum, and default settings for the columns and rows when declaring WooCommerce support:

function my_custom_woocommerce_theme_support() {
add_theme_support( 'woocommerce', array(
// . . .
// thumbnail_image_width, single_image_width, etc.

// Product grid theme settings
'product_grid' => array(
'default_rows' => 3,
'min_rows' => 2,
'max_rows' => 8,

'default_columns' => 4,
'min_columns' => 2,
'max_columns' => 5,
),
) );
}

add_action( 'after_setup_theme', 'my_custom_woocommerce_theme_support' );

Testing and feedback

These changes are merged into our master branch on GitHub if you want to try things out. If all goes well, they will be part of 3.3 release in January.

Thoughts and feedback welcome in the comments.