Image carousel on product page does not show all thumbnails

Hello,

the image carousel on product page with vertical thumbnails does not show all the images in the product gallery. You can only scroll through around 5 images. The rest of the images is hidden. By dragging the carousel with the mouse I can make the images visible. When you let go of the mouse, the thumbnails jump back to their original position.
Regards

Hello,

The images for these product thumbnails should be of equal sizes. The first thumbnail is very little so you have such an issue.

https://prnt.sc/epdGlGuilj1i

So the problem is in the images themselves, you need to upload images of equal sizes after that they will appear well.

Kind regards

Hello,
this information does not make me happy. I should have known this before buying the theme. To have a working layout I would have to resize, upload and tag every product and gallery image in our shop! I used the plugin MagicThumbs before which worked with different image sizes. It should be possible with woodmart too.

Hello,

With the help of the below code, you can make each thumbnail of equal sizes. Please, enter it into the “Global Custom CSS” area that is situated in Theme Settings -> Custom CSS.

.slick-slider {
height: 591px !important;
}
.slick-list {
height: calc(100% - 30px)!important;
}

.slick-track {
height: 100% !important;
}

.slick-vertical .slick-slide {
height: 33.333%!important;
}

.slick-vertical .slick-slide img {
height: calc(100% - 10px)!important;
object-fit: cover!important;
}

In the next update, we will add a special option in Theme Settings for that.

Kind Regards

Hello @Luke,

In the next update, we will add a special option in Theme Settings for that.

Thank you so much. As this has been the terrible pain and very much frustrating, since beginning of the Theme. And till now, nobody actually cared about to resolve such a basic thing. Even the default Storefront theme also shows square sized (or equal sized thumbnails) on the Product and on Shop pages equal sized grid, even if the images are of Un-equal size and proportions.
Although, even I have already managed to resolved it on my own, by first making all the images of Equal sizes for each product, but that again is time consuming and frustrating. As well as a temporary alternative, not the actual solution.

So many other themes and All other major ecommerce sites are already showing equal sized thumbnails and with no such issues, no matter what the size of each individual image of each respective product is.

But, really thanks a lot, for listening to your customers and implementing some feature to have such sort of issues to be resolved in coming update.

Regards

Hello @harshwe,

We put customer experience and satisfaction as our priority, and your words reaffirm the hard work we put in every day. So thanks for your kind words and we look forward to seeing you again.

Kind Regards

Hello Luke, thanks a lot for the CSS. It solved the problem with the hidden images. The update should also solve the problem with the different heights of the thumbnails on mobiles. On small devices the vertical thumbnails switch to horizontal thumbnails at the bottom of the main image. It would look much nicer if the thumbnails would all have the same proportion. There should be an option to switch to square thumbs if needed.

Hello Luke, two more questions:
1. Could you help me with some CSS to display square thumbs on mobiles?
2. Why is the width of the thumnails 170px while I set them to 150px in the theme options? Maybe this is why my thumbnails look blurred?
Nice regards!

Hello,

So far we are not planning such an option.

We have the “Thumbnails image width” option which can crop the image in a square shape.

https://gyazo.com/5f23705c7bf1ecc925770d982ff23a63

After defining this option, regenerate the thumbnails with the below plugin:

https://wordpress.org/plugins/regenerate-thumbnails/

Otherwise, you can use the below custom code, enter it into the “Custom CSS for mobile” area that is in Theme Settings -> Custom CSS.

.woocommerce-product-gallery .thumbnails .product-image-thumbnail img {
    height: 120px;
    object-fit: cover;
}

https://gyazo.com/93b6f0fe2538c75cb3398cb3e3d186e2

If you’re having trouble of any kind issue, please let me know. I’ll do everything I can to help.

Kind Regards

Hello,
the option “Thumbnails image width” option does not crop the image in a square shape! I´ve set it to 150px but without the CSS you gave me the thumbnails are not square. I regenerated all thumbnails but no change! Now I added the CSS and they look square. But why is the thumbnail width not 150px but 172 px, see screenshots?
Regards

Attachments:

You must be logged in to view attached files.

Hello,

1. The “Thumbnails image width” option reduces the width of the thumbnail therefore the height decreases proportionally.

2. For now, the “width” of the thumbnails is already reduced on your website.

https://prnt.sc/doXd2UVPAAee

But the images are stretching to the width of the container so you see the 172px. I suggest you set the “172px” in the “Thumbnails image width” area and regenerate it again.

https://gyazo.com/515994f00a9e767592253c91f7b000a8

Kind Regards

Hello, I did this and now all the thumbnails of images with a vertical format look fine and all the thumbnails of images with a horizontal format look blurred. This is because the horizonal images reduced to a width of 172px have less height and are streched by the CSS to a square format.
Do you have a better solution?

I also would like to know how to influence the width of the main image and the thumbnails. In you demo the thumbnails have a width of 120px.
Regards

Hello,

So that the images are not blurred, you need to increase this size more via the “Thumbnails image width” option. Then the original images will be larger but not wider than the container.

The width of the main image you can adjust via Theme Settings -> Single product -> Images -> Product image width.

https://gyazo.com/60272f0b36ccad12b521da3dc155ec33

In our demo, the thumbnails have equal dimensions by default and also they are by default small so at the end, they have a 120px width.

Kind Regards

[Author]

Posts