Hello,
01. To make the product gallery thumbnails square and reduce their size on mobile devices, please add the following CSS in Theme Settings > Custom CSS > Custom CSS for mobile.
.woocommerce-product-gallery .wd-gallery-thumb img {
aspect-ratio: 1 / 1;
object-fit: cover;
}
.woocommerce-product-gallery .wd-gallery-thumb {
max-width: 250px;
margin: auto;
}
02. Your images differ in size considerably. Please check this manual and upload the same size of the product images: https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/
The only way to make the view awesome is to upload images of the same size and proportion.
WooCommerce allows some settings that you can find under Appearance >> Customize >> WooCommerce >> Product Images.
You can define the “height” of the shop thumbnails by setting up the width : height aspect ratio in the “Thumbnail cropping” section:
Custom: In Custom, you can select the aspect ratio of the image.
Here are some of the popular aspect ratios (1:1, 5:4, 4:3, 3:2, 16:9 and 3:1).
Uncropped: The height of the image will be untouched. Images will be displayed using the aspect ratio in which they were uploaded: https://ibb.co/6mR6DbD
Best Regards
.
