Clicking thumbnail changes main product image

Hi there,

I would like to have the main product image change when clicking a thumbnail. Currently it opens up a fancy lightbox every
time a thumbnail is clicked. Additionally I would like the light box to open when clicking the main image. This is how it is on my existing shopify site and this seems to be the way that most big online retail stores are.

Is there a way to change this using setting? If not can you direct me how to code this? I have a child theme set up.

Thanks in advance
G

Hi Giolla,

Thank you for writing in,

Yes, that is the default behavior of the product gallery, and its not opening a lightbox.

There is a magnifying icon on the upper-left of the image gallery, that should launch the lightbox.

If you don’t get that behavior on your end, please ensure that you are fully up to date. WordPress, Theme, and Cornerstone (Version Compatibility).

Updating Your Themes and Plugins

Cheers!

Hi,

I had a Lightbox plugin installed. After deactivating it I can see the correct behaviour I wanted by the default. I should have checked this before posting here.

However my products have many variants which require many images(as much as 27). When there is too many it covers up the zoom button and it is not clickable(see attached image). This was the main reason to install a lightbox plugin (also to be able to add video as one of my product pic images)

Is there a way to move the thumbnail to the bottom of the image(not below) - so they still overlay it like they do now at the top.

Also is there a way to add a video as a product image with default Lightbox?

thanks
G

Hey @Giolla,

It’s possible to move the thumbs to the bottom by adding this code in Theme Options > CSS.

.flex-control-nav.flex-control-thumbs {
    top: auto;
    bottom: 0;
}

WooCommerce does not support videos in the lightbox out of the box. You will need to use a third party plugin for that or have a web developer create a custom function for you. We regretfully, do not have a suggestion.

Thanks.

Thanks for the code. It worked perfectly. Will this code need to be put in again at any stage? for example if X-theme or woo update?

Hi there,

That code is specifically based on the current markup for the current X and Woocommerce version. Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Hope this helps.

Thanks . . it is noted that if versions change it may require slightly different code and i am responsible for that.

Will it disappear completely on a theme update? Isn’t this change meant to be on a child theme to stop this?

Its ok. . I see now after some research that theme options are not usually affected by major updates.

thanks for support. Its much a appreciated

You’re welcome!
We’re glad we were able to help you out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.