Issue with product page thumbnail dimensions

I want to confirm whether the theme supports setting a separate size for thumbnails on product pages. The thumbnails appear overly large on mobile, and I intend to adjust them to a square size of 100 by 100. However, I find that any changes made will also alter the product display sizes in the product catalog.

I only want to adjust the thumbnails on product pages to a square shape with customizable dimensions. Please advise if the theme supports this kind of independent setting.

Attachments:

You must be logged in to view attached files.

Most importantly, the product thumbnails are too large when viewing products on mobile devices. Is it possible to adjust them to the style shown in the reference image?

Attachments:

You must be logged in to view attached files.

Hello,

Navigate to Theme Settings > Single Product > Gallery and set the “Thumbnails gallery height and width”: https://postimg.cc/1fPXW3vT

Also, set the Thumbnails image width to resize it.
https://postimg.cc/d7z0nvKx

Best Regards

I tried setting up the mobile and tablet versions, but neither one worked. Only the desktop version took effect.

Additionally I would like to check if the product category page supports cropping images to a uniform height. At present some product images display different heights.

Attachments:

You must be logged in to view attached files.

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

[Author]

Posts