Resizing Product Thumbnail Image
Follow these steps to change shop, catalog or product category image size:
- Go to Appearance > Customize
- Then go to WooCommerce > Product Images
- Write your desired width in “Thumbnail width” field.
- You can set the height of the images in “Thumbnail Cropping”
- Click on “Publish”
Thumbnail Cropping
- 1:1: If you select 1:1, your images will be cropped into 360px width and 360px Height (assuming you have set the image width 360px in Thumbnail Width field.
- Custom: In Custom you can select the aspect ratio of the image. Here is some of the popular aspect ratio (1:1, 5:4, 4:3, 3:2, 16:9 and 3:1).
- Uncropped: Height of the image will be untouched. Images will display using the aspect ratio in which they were uploaded.
You have to remove or change the image width settings from your themes functions.php file. For example, In Storefront, you will not find any Main Image or Thumbnail field settings. Because they declared that beforehand in
storefront/inc/class-storefront.php
4
5
6
7
8
9
10
11
12 | // Declare WooCommerce support.
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
)
) ) ); |
Single Product Image has been set to 416px wide and thumbnail to 324px wide. In that case, you can either remove these two lines or change the width number to your desired width. But make the change after creating a child theme; otherwise, it will revert back to previous settings if you update the theme.
ahileo.tk
