In this tutorial we will see step by step how to change the size of product images in the latest version of WooCommerce.
Modify the size of WooCommerce images from the customizer
As of version 3.3, several changes are included that make it easier to adapt themes with WooCommerce. In this case, they have also changed the route to modify the size of the images, now they are in the customizer.
To access these options we must go to the Desktop -> Appearance -> Customize -> WooCommerce:
And then select the “Product images” option, within the “WooCommerce” menu.
From here we can modify the widths of two images, the one of the individual product and the one used in the catalog (thumbnail photo).
We will simply have to change the value to the desired one depending on the dimensions that are appropriate for our theme as we have seen in the other sections. The available options are the following:
As we can see, we have two customization options:
- Main Image Width: It is the width of the main image on the product pages. This image will not be cropped.
- Thumbnail Width: Width of the image used in the product catalog (on the Store / Shop page).
It also allows us to set specific crop settings for the thumbnail image:
- 1:1: By selecting this option we will have square images of the same width and height that we have configured in the “Thumbnail width” box.
- Personalized: In this case the images will be cropped to a custom aspect ratio.
- Uncropped: We will indicate this option if we want the images to be displayed using the aspect ratio in which they were uploaded.
We can play with these values while we see how they would look in the preview. It would be a good time to take a look at the previews for other devices as well. This is how we would make a day about how the store could look according to the configuration that we are adjusting.
Clicking on Publish will automatically start the process of creating the new images. Their sizes will depend on the uploaded image, the width that we have configured, and the cropping parameters that we establish for the thumbnail.
This process runs in the background, and it will take more or less depending on the number of images we have.
If we want to check the status of the creation of the new thumbnails, we can go to the Desktop -> WooCommerce -> Status -> “Records” tab.
If the process has not finished yet, a message will appear indicating that it is running in the background. In this section we can also consult the log, as we see in the image above.
Option to set width of images in WooCommerce does not appear in customizer
But watch out! If the size of the images has been declared in the theme that we have active, the customizer does not show the options to modify the width of the images, but only the cropping options appear, as we see below:
This happens if we are using themes like Storefront or those of the Twenty series, since WooCommerce itself establishes specific directives in its code to facilitate compatibility with them.
If we want to see the options in the customizer again, we are going to need to add a little code to our WordPress so that it removes those declarations and makes visible the options that are not being displayed.
This code can be added in a new plugin, or in one of the utilities that we have created. More on these possibilities in class. Here we have it:
// Disable image widths in themes with WooCommerce support. add_action( ‘after_setup_theme’, ‘ap_modify_theme_support’, 11 ); function ap_modify_theme_support() { $theme_support = get_theme_support( ‘woocommerce’ ); $theme_support = is_array( $theme_support ) ? $theme_support : array(); unset( $theme_support, $theme_support ); remove_theme_support( ‘woocommerce’ ); add_theme_support( ‘woocommerce’, $theme_support ); }
With after_theme_setup we managed to modify the load order and have this code run right after theme setup. The detail of the whole is also important.
Once all this is done, if we go back to the customizer (Desktop -> Appearance -> Customize -> WooCommerce -> Product Images), we will see that the options to modify the width of the product image and the thumbnail image already appear, and we can perform the changes from the visual interface.
Once we make the modifications we want and publish them, the new thumbnails will begin to be regenerated in the background, and as soon as the process is finished we will see them correctly.
Regenerate image thumbnails
In versions 3.3 and higher, it is not usually necessary to manually activate the thumbnail creation process, if what we do is change the image widths from the customizer, since when publishing it will automatically generate the images in the dimensions that we have specified .
Also, if we need it, we can also go to WooCommerce -> Status -> “Tools” tab. At the bottom we have a button to regenerate the store thumbnails. When we click on Regenerate, the thumbnails will activate the process of creating new images according to what we have specified.
We can also use the plugin, which is the one we will use for previous versions, and which offers us more information about the size of the images configured in WordPress.
For versions prior to 3.3 it is necessary to regenerate the thumbnails after any changes.
Facebook Comments
Disqus