When we add images to our store, WooCommerce defines them depending on the case in which it will be used, these cases are stipulated in three important sections, the product, the thumbnail of said featured image and the possible WordPress thumbnails of other images that create a gallery in the product.
Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training
Send up to 1,000,000 emails/year. Mautic support in Spanish 24 hours, 365 days
Next, we are going to review in a very specific way how we can change the size of images in WooCommerce regardless of the theme we are using.
Image sizes in WooCommerce
Continuing what has been said regarding the cases in which WooCommerce assigns the proportions of the images, they could be defined in the following:
- woocommerce_thumbnail: is used in product “grids” in places like the store page.
- woocommerce_single: it is used in the simple view of the product.
- woocommerce_gallery_thumbnail: is used below the main image in the to change the gallery.
Taking into account the 3 cases in which the image can be resized in WooCommerce according to its use, its default values must be taken into account, which are the following:
- woocommerce_single displays the , as loaded, so it’s always uncropped by default. The default value is 600px wide.
- woocommerce_gallery_thumbnail it is always cropped square and defaults to 100 × 100 pixels. It is used to browse the images in the .
- woocommerce_thumbnail has a default width of 600px, cropped to a square shape so that the product grids look neat. The store owner can customize the aspect ratio for cropping.
It is important to note that despite the actual aspect ratio being set on the image, themes may ultimately resize images displayed using , and image widths may be limited by the width of the grid. / product column.
Resize product images from theme
As of WooCommerce 3.3.0, themes can declare what sizes of product images should be used in WooCommerce. If a theme defines the image sizes (widths), the store owner will not be able to change them, but the defined size should be optimal for the theme.
add_theme_support( ‘woocommerce’, array( ‘thumbnail_image_width’ => 200, ‘gallery_thumbnail_image_width’ => 100, ‘single_image_width’ => 500, ) );
So, for example, if we wanted to change the gallery thumbnails to be 150x150px uncropped images, we could use the following code:
add_filter( ‘woocommerce_get_image_size_gallery_thumbnail’, function( $size ) { return array( ‘width’ => 150, ‘height’ => 150, ‘crop’ => 0, ); } );
When calling WordPress functions that correspond to the size of an image, for example , the names of the image sizes must be used, which are:
- woocommerce_thumbnail
- woocommerce_single
- woocommerce_gallery_thumbnail
Store owners will still be able to control aspect ratio and cropping.
Resize WooCommerce Product Images in Customizer
The customizer houses the options that control the .
If the theme declares image sizes, the top section will be hidden and only the cropping option will be visible.
Changing the crop option, or widths, will update the preview on the right hand side to show how things will look. The changes will not be visible to clients until the changes are saved to the customizer and the thumbnails have been regenerated to the new dimensions.
The thumbnail cropping section of the customizer allows store owners to select one of three crop ratio settings for catalog images:
- 1:1 (square crop)
- Custom (store owner can enter custom aspect ratio)
- No Cropping (preserve the aspect ratio of a single image)
The actual dimensions of the image are calculated based on the crop option selected and the width of the image.
Resize product image using hooks
While themes can set WooCommerce product image sizes to certain widths, and store owners can control widths and aspect ratios, if you need more control over thumbnail sizes, there are a few available that we can use. .
WooCommerce uses the function wc_get_image_size to get the dimensions of the image size. The return value of this is passed through the following filter:
woocommerce_get_image_size_ {SIZE_NAME_WITHOUT_WOOCOMMERCE_PREFIX}
If we use this hook, it will be passed a variety of sizes as an array, similar to this:
Array( ‘width’ => 200, ‘height’ => 200, ‘crop’ => 1, )
We don’t recommend that plugins and go this route because they take control away from the store owner and their settings won’t be honored, but the option is available for those who want to use it.
After making changes to the WooCommerce image sizes, it may be necessary to generate the thumbnails again, so that the new sizes are taken from the existing images. This can be done by installing the following plugin.
Conclusions
As we could see, Woocommerce acts independently when defining the specific sizes of the images in WooCommerce that we add to our products; however, we always have the option to change these proportions to our liking, either from the customizer options, through code snippets or finally through plugins.
With this other article we can change the rest of .
For more information you can consult our free courses where we guide you how to make your store with WooCommerce
Help us improve our content by sharing your opinion
WordPress and Woocommerce support team at .
Facebook Comments
Disqus