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
The catalog image is the image that shows in an archive page like the Shop or a Category page.
- Single Product Image
The single product image is the main image that will show when viewing a single product page:
- Product Gallery
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:
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:
gallery_thumbnailis going to use the default 100 pixels in this case.
What about the Storefront theme?
Storefront currently set’s the
woocommerce_thumbnail sizes like this:
How do I override an image size?
Here’s an example of how you can override the
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:
This snippet will change the
woocommerce_thumbnail image to 500 x 500 pixels and crop the image.
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