How to override WooCommerce Image Sizes

Image sizes are not always fun to deal with in WordPress.

Where are they set?  Where do I change them?  Why are my images not showing up as the right size?

In this guide, we’re going to cover all the basics of how image sizes are set, and how to override each individual image size to make sure your site has the right image sizes you need.

What are the image sizes?

Catalog Image
Image name: woocommerce_thumbnail
The catalog image is the image that shows in an archive page like the Shop or a Category page.

Single Product Image
Image name: woocommerce_single
The single product image is the main image that will show when viewing a single product page:

Product Gallery
Image name: woocommerce_gallery_thumbnail
The product gallery shows underneath the main product image on the single product page:

Where are the image sizes set?

Let’s take a default theme like Twenty Seventeen and look to see where the image sizes come from.

Interestingly, the sizes are not set on the theme!  WooCommerce has default image sizes for all the default themes:

	<?php
	add_theme_support( 'woocommerce', array(
	'thumbnail_image_width' => 250,
	'single_image_width' => 350,
	) );
	}

view raw seventeen.php hosted with ❤ by GitHub

As you can see, WooCommerce sets the thumbnail_image_width to 250, and the single_image_width to 350.  The gallery_thumbnail however, is not set so it uses the default 100 x 100 pixel size from WooCommerce.

What if my theme doesn’t declare a custom image size?

If that’s the case, the woocommerce_thumbnail and the woocommerce_single images will be set through the Customizer:

The gallery_thumbnailis going to use the default 100 pixels in this case.

What about the Storefront theme?

Storefront currently set’s the woocommerce_single and woocommerce_thumbnail sizes like this:

	<?php
	add_theme_support( 'woocommerce', apply_filters( 'storefront_woocommerce_args', array(
	'single_image_width' => 416,
	'thumbnail_image_width' => 324,
	'product_grid' => array(
	'default_columns' => 3,
	'default_rows' => 4,
	'min_columns' => 1,
	'max_columns' => 6,
	'min_rows' => 1
	)
	) ) );

view raw storefront-image-sizes.php hosted with ❤ by GitHub

How do I override an image size?

woocommerce_single

Here’s an example of how you can override the woocommerce-single image:

	<?php
	add_filter( 'woocommerce_get_image_size_single', function( $size ) {
	return array(
	'width' => 400,
	'height' => '',
	'crop' => 0,
	);
	} );

view raw single-image.php hosted with ❤ by GitHub

In this example, we’re setting the width to 400, the height to “automatic”, and we are not cropping the image by default.

If you wanted to set the image to a specific size and crop it to fit, you would do this:

	<?php
	add_filter( 'woocommerce_get_image_size_single', function( $size ) {
	return array(
	'width' => 500,
	'height' => 500,
	'crop' => 1,
	);
	} );

view raw single-image.php hosted with ❤ by GitHub

woocommerce_thumbnail

	<?php
	add_filter( 'woocommerce_get_image_size_thumbnail', function( $size ) {
	return array(
	'width' => 500,
	'height' => 500,
	'crop' => 1,
	);
	} );

view raw thumbnail-size.php hosted with ❤ by GitHub

This snippet will change the woocommerce_thumbnail image to 500 x 500 pixels and crop the image.

woocommerce_gallery_thumbnail

	<?php
	add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
	return array(
	'width' => 400,
	'height' => 400,
	'crop' => 1,
	);
	} );

view raw gallery-thumbnail.php hosted with ❤ by GitHub

The snippet above will make the single product gallery images 400 x 400 pixels.

What if my image sizes are not showing up as the right size?

What most often happens is that the image sizes are being set correctly, but the theme files are still putting them in containers that are smaller.  For example, in Storefront, if I set the gallery_thumbnail size to 500, they still show smaller because they are given a percentage width based on how many gallery images there are.  If you have 4 images, for example, each one gets a width: 14.2857142857%;  so your images are much smaller than 500 pixels.

The best thing to do in these cases is to make sure the image size is being loaded properly in the markup, and then see if there are any CSS conflicts that are making the image load smaller:

When you change an image size, you might need to regenerate your thumbnails for the new sizes to be created.  To do that, you can use a plugin like Regenerate Thumbnails.

More helpful documentation can be found here: https://github.com/woocommerce/woocommerce/wiki/Customizing-image-sizes-in-3.3