Thumbnail Image Alignment Issue in Single Product Gallery

Hello support team, I’m experiencing an issue with the thumbnail images in the single product gallery. I would like them to fit neatly inside the solid border. Currently, they appear stretched in height and width. My desired outcome is to have them look like the reference image provided, with the thumbnails aligned on the left side and properly fitting inside the border box. I would appreciate your assistance with this matter. For your convenience, I’ve granted you access to the site in private content. Thank you for your help. Site is under maintenance but you can access through credentials provided below.

Attachments:

You must be logged in to view attached files.

Hello,

Seems that the access is wrong, more detail is here: https://take.ms/V1WE3

Please update the access and confirm the permission for plugins deactivation, and switching to the parent/default theme. As soon as we complete the testing we will enable all back.

Kind Regards

Sorry for the wrong details, Here below you can access it. Yes, I have backup already . You have permission for plugin deactivation, and switching to the parent/default theme.

Waiting , Please someone help me out with it, Provided all the details

Hello,

I apologize for the delay.

You need to reduce the “Thumbnails per slide” for showing the images in better quality. So please edit that product layout and set there e.g “3”. Then clear the cache and recheck the issue.

https://take.ms/21og9

Kind Regards

Hi Luke, I did what you suggested to me. The issue is still there with some products although they all have similar resolutions, Can you please look into it?

Attachments:

You must be logged in to view attached files.

Hello,

After defining 3 thumbnails in the product gallery, it started to look well, here is a screenshot: https://take.ms/tzwCS

Please check it on your side and let me know.

Kind Regards

I want to add equal borders around them , can you please provide me with css similar as I provided the reference image, I was waiting for it

Hello,

Please define the below code in Theme Settings -> Custom CSS and then check the gallary.

.woocommerce-product-gallery .wd-v-thumb-custom .product-image-thumbnail img {
    border: 1px solid #f1f1f1;
    width: 130px;
    border-radius: unset;
}

Kind Regards

thank you

Hello,

You are welcome! In case you need any additional help, I’d be more than happy to assist you.

Have a good day!

Kind Regards

[Author]

Posts