Product Page style

Hi,

1) Can we actually change the size of the thumbnails? We’d like it to be smaller.

2) Can we display more than 3 thumbnails? If the thumbnail sizes are smaller, is it possible?

3) Can we adjust the width of each column on the product page?

Please see screenshot in private content area

Hello,

1. You can change the image size globally in the Theme Settings > Product page > Product image size https://prnt.sc/p4f57x The same option is provided in the product page for each individual product.

2. The gallery can show 4 images at once on the product page, most would depend on the product page size. However, you can add more images to the gallery.

3. You can try to do it with CSS, however, take into consideration responsive on other devices.

Best Regards

Hi Elise,

1. You can change the image size globally in the Theme Settings > Product page > Product image size https://prnt.sc/p4f57x The same option is provided in the product page for each individual product.
–> I actually don’t mean the size of the main product image. I mean the size of the individual thumbnails (gallery thumbnails) on the left most of the page. It’s too big, and really unnecessary because the user has to scroll up and down to see how many images are there. Even worse is if the user thinks there are only 3 images and won’t bother to scroll up and down.

2. The gallery can show 4 images at once on the product page, most would depend on the product page size. However, you can add more images to the gallery.
–> How do I configure it to show 4 images at once? When the page loads, it seems to show only 3 thumbnails. But if I were to select a different product variant, for example, the red colour and a size, all of a sudden, there are 4 thumbnails on the gallery.

Steps to reproduce:-
1) Go to link in private content area. You will see only 3 thumbnail images on the left.
2) Now click on the Red colour and any size.
3) You will now see 4 thumbnail images on the left. (??) How do I get it to display 4 thumbnails like this when the page first loads?

3. Scrolling of product thumbnails
–> Due to the nature of our business, we have a lot of images (usually at least 6 images per product) to show. When you click the down arrow to get to the end of the thumbnails gallery and click on an image, you will find that the gallery immediately scrolls back up for some reason. As a user, I find this really annoying because I am not done looking at the back photos so I have to click the down arrow again to go back to the back photos. Can I stop the gallery from automatically doing this?

Steps to reproduce:-
1) Go to link in private content area.
2) Click the “down” arrow on the thumbnails gallery image 2 times. It should bring you to the end of the thumbnails gallery.
3) Now click on the last image thumbnail, just right above the up and down arrows. You will see that gallery has automatically scrolled back up. Not sure why??
4) As a user, now I have to click the down arrow button again because I wish to see the 2nd last image.

As you know, the less number of clicks on a page will lead to better conversions. This is really unnecessary.

Please help.

Hello,

You can configure your images in Appearance – > Customize -> WooCommerce -> Product Image and find the size option for product page image as well as images in a grid:

Thumbnail width – Image width used for products in the catalog, Image width for the catalog is 350px;
Thumbnail cropping checkboxes:

1:1 – Images will be cropped into a square;
Custom – Images will be cropped to a custom aspect ratio, for example, 4:3 or there is the option to insert the aspect ratio
Uncropped – Images will display using the aspect ratio in which they were uploaded

There is no option to change the product gallery. Such modification would require complete customization which is not covered by our support.

Best Regards

Hi Elise,

Ok I will try do some further testing on the image sizes to see if it will solve Issue #2.

As for Issue #3, I just tested it on your Basel demo and I see that you do not have the same problem as I am facing.

This is the page on your Basel demo which works exactly how I want it to:-
https://demo.xtemos.com/basel/shop/shoes/basic-contrast-sneakers/

As you can see, you have a total of 6 product images.

1) I will click on the thumbnail carousel’s down arrow button and I can see thumbnail Images #3 – 6. This is correct.
2) I click on thumbnail Image #6, and the thumbnail carousel does NOT move automatically up. –> This is exactly what I want. The carousel should NOT go up on its own. So, why does mine do that, I don’t understand.

Please could you help? Thanks.

Hello,

I have checked your product page and our demo https://demo.xtemos.com/basel/shop/bags/nombined-strapped-backpack/ as you can see they work in the same way.

Best Regards

Hi Elise,

Yes I do agree that the link you sent me works the same way as on my page now. However, that does not solve my problem.

As I’ve said before, this design is less ideal because it can become very annoying when you have many pictures in the gallery – which in our case, sometimes we may have up to 8-10 pics per product. Your gallery can only display at most 4 thumbnails, so the user definitely has to click the up and down arrow. With this design, can you imagine how many times the user has to click the down arrow over and over again just to see all the available pics?

The thumbnails carousel on this product page works much better because it doesn’t do that auto scrolling up – which is really annoying.
https://demo.xtemos.com/basel/shop/shoes/basic-contrast-sneakers/

I only just need to know how you configured the carousel to work that way (NO auto scrolling up please) as that is how I want mine to work as well – I hope you understand what I mean.

Please advise.

Hello,

We shall consider this on one of our updates. For now, it is not possible to change.

Best Regards

Hi Elise,

I think this is the second time you’ve completely misunderstood what I was asking. I’m not asking how do I change the carousel, but rather how did you configure your carousel in your DEMO page, so that I can do the same for mine too.

After wasting hours on this issue, I finally realised it is the total number of images that affects how your carousel behaves.

I am quite disappointed with the level of support provided. I appreciate that you are quick in responding to minor css issues, but when the problem is more complicated I feel that the level of detail and attention is seriously lacking. I am usually asked to try to activate/deactivate plugins, doing random things to test, etc. – shouldn’t this be something that you try to debug, and then tell me what the problem was, and what the solution is?

I only have 1 pending issue left which is the one below, and I sincerely hope that more care can be given to that
https://xtemos.com/forums/topic/attribute-swatches-not-working-after-changing-color-attribute/#post-143351

Hello,

I am very sorry you are disappointed. I tried to do my best.

2. 4 images at once – you need to set a large image and horizontal thumbnails position in the Theme Settings > Product page.

3. The gallery works in the same way as it works on our demo pages. We shall consider its way of working in one of our future updates.

What you would like to configure and what difficulties you have now? Please be specific.

Best Regards

Hi

It’s ok. For now I will try to find a developer to help with these changes instead.

Ok. If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts