[Resolved] Woocommerce Single Product page – Images and Thumbs

[David]

Hi Tom,

currently my single product page has no rollover or zoom effects for the product images or thumbnails. Clicking on either product image or thumbs just opens the image up on a blank page.

Is there a way to get the same functionality as the Storefront theme, where hovering on image provides zoom, clicking opens lightbox and hitting thumbnail slides the image in the main image?

regards

David

[Leo]

Hi David,

This post might help: https://generatepress.com/forums/topic/woocommerce-product-images-in-lightbox-have-no-exit/#post-303205

Let me know.

[David]

Thanks Leo

I will give it a go once my host stops messing around with my PHP memory limits!
Will keep you posted. More for my own memory – link to the theme support PHP for Woo 3.0.

https://gist.github.com/generatepress/0d81e87b1ec4494023121f3ecc753ccd

[David]

Hi Leo, all done and works well. Have an issue with the thumbnail and the zoom sizes but that i am sure will be another topic!

[Leo]

Awesome. We will be here!

[brianna]

Hello there I’m wondering if your familiar with a plugin that allows me to change the orientation of my product thumbnails on my site. Im not sure if I’ve missed an option in the theme for this. I’d like to be able to do this https://www.modcloth.com/shop/casual-dresses/adventure-ahead-a-line-dress/10094193.html?dwvar_10094193_color=083&cgid=casual_dresses_111#start=1 so the thumbnails appear on left or right of main image. This is mine currently https://blackbutcher.com/?ae_global_templates=single-product-page&elementor . Im not familiar with how to use CSS and as per another question I’ve had on the forum i have simple css as a plugin but not sure how to add more CSS. I thought a plugin for changes would be easier. Im just not sure given my lack of experience if I’m even searching the correct terms to make this happen

[David]

Hi Brianna (BTW i’m not one of the support guys but your question was something i was also investigating).
What you are looking for can be done with Simple CSS. Leo and Tom are far more experienced than i am and can no doubt assist with making the following code work more effectively. But if you try adding the following code to Simple CSS it should give you the result you are looking for. I haven’t tried this with more than 3 thumbnail images so not sure if it will break if you have lots more. The weigh off is that the main product image and the thumbnails need to be smaller.

.flex-viewport {
    width:75% !important;   
    left: 100px;
}
.flex-control-nav { 
    position: absolute; 
    top:10px; 
    left: 0px;
    text-align: center;
}
.flex-control-thumbs {
    width:15% !important;
}
.flex-control-thumbs li {
    width:auto !important; 
    display: inline-block;
}

See here for adding simple CSS You can just cut and past the above code into the simple CSS editor on the customiser.

[Tom]

Thanks, David! 🙂

[David]

Your welcome, glad to be of assistance. For the sake of keeping things clean, updated code for Brianna (or whomever) so it is Woocommerce specific – just incase flex-viewport is in use elsewhere.

/* move thumbnail nav to vertical column RHS of image*/
.woocommerce .flex-viewport {
    width:75% !important;   
    left: 100px;
}
.woocommerce .flex-control-nav { 
    position: absolute; 
    top:10px; 
    left: 0px;
    text-align: center;
}
.woocommerce .flex-control-thumbs {
    width:15% !important;
}
.woocommerce .flex-control-thumbs li {
    width:auto !important; 
    display: inline-block;
}

[Jose]

Well done David, it’s a nice and most desired solution but, is not mobile responsive, at all.
I tried very hard doing research and tweaking things with AE Elementor, but no clue on how to tweak it further.

Two more things:

1.- An enclosing feature carousel-wise would be beneficial when your thumbnail galleries have more than 7 images (in my case: all my products), therefore, the CSS above runs an endless stripe of thumbnails and overlaps the following content section.

With carousel functionality or boxing, the number of thumbnails displayed, that will do.
2.- This is a vertical display (as I can’t find the .flex-viewport explained anywhere over the Internet), may I kindly ask you to drop the CSS for horizontal, wrapped like a carousel (limiting width or height where applies), along with the vertical mentioned in number 1.

Sorry to bother, but this flex-viewport seem to make a good deal, although is not mobile-friendly…

[David]

Hi Rafik,

the code above can be wrapped inside a media query so it only applies to desktop / tablet. However, as this is quite an old topic, can you raise a new one where you can also share your URL privately so i can provide you with a new variant.

[Author]

Posts