WooCommerce Product Gallery

[Fredrik]

Hello,

I’m using this code from David,

/* Vertical Scrolling Thumbnails */
	
	.woocommerce div.product div.images .flex-control-thumbs li {
		padding: 5px 5px 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

    .woocommerce-page div.product div.images {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-item-align: center;
        align-self: center;
		max-width: 450px;
    }

    .woocommerce div.product div.images .flex-control-thumbs {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 80px;
        flex: 1 0 80px;
        /* Adjust PX to suit width of thumbnails */
        max-height: auto;
        /* Adjust Height to Image height on desktop */
        overflow: auto;
    }

    .woocommerce div.product div.images .flex-control-thumbs li {
        width: 100%;
        padding: 0 10px 10px 0;
    }
}

But I have an issue with toggling product gallery images on touch (mobile) using the thumbnails. Any reason why the thumbnails doesn’t respond well using touch? Sometimes it works & sometimes it doesn’t.

On desktop, click events for the thumbnails work, but it doesn’t translate well to mobile.

[David]

Hi there,

its probably the CSS flexbox that is interfering with the carousels behaviour. Best way to test is try it without that CSS – if it works correctly then we know thats the problem.

Fix – don’t apply it to Mobile by putting the CSS inside a desktop media query

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Fredrik]

Hello David,

I tried without CSS, turned off all custom CSS on the site, only running default GP.

Still an issue I’m afraid.

On initial page load, it’s not working. Scroll down to the footer & back up, toggle touch starts working.

Reload page it stops working, scroll down & back up it starts working. Almost as if the lightbox is not loaded. This behavior is consistent on both Chrome & Safari on iOS.

So definitely not your code at least 🙂

[Tom]

How do we see the issue exactly? Just loaded it on mobile and the carousel/lightbox seems to work fine without scrolling down and up.

Let us know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Fredrik]

Hello,

Hmm strange one, still have the issue on iOS (latest version), both Chrome & Safari (latest versions).

Did you swipe between images or toggle between images using the thumbnails?

Swiping works for me, but not toggle. You would expect that you can toggle using touch the same way you can toggle between images on desktop using mouse click 🙂

I also discovered the carousel/lightbox starts working when you press/touch somewhere on the description area. But reloading the page, not scrolling, or using touch anywhere else than on the thumbnails does not allow you to toggle between images.

I’ll try to get a video together that displays the touch events during a screen recording, but for now, you can see this video where I load the page & try pressing/use touch on the thumbnails to toggle between images, you can see there is a touch event registered but nothing happens:

Screen Cap

[Fredrik]

*Update.

When you interact with any “GP element” on the page the carousel/lightbox starts working.

See video:

Screen Cap

[Tom]

Does the same thing happen for you if you test one of our Site Library sites?: https://gpsites.co/merch/product/happy-ninja/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Fredrik]

It works perfectly!

Funny, I killed all custom CSS, tried deactivating all plugins, made sure everything is up to date etc. Still same problem.

https://prnt.sc/uly4o8

[Fredrik]

I figured it out, I think.

I’ve set up two products in my shop, identical from each other, except one is a variable product.

A simple product works perfectly, like the Site Library site.

A variable product breaks the product gallery on iOS. This happens when you add a price to each variation. Before adding a price, the product gallery still works.

[Tom]

Strange, does it continue to happen if you deactivate GPP and use TwentyTwenty? Trying to figure out if it’s our code or a bug in Woo.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Fredrik]

Switching to TwentyTwenty comes with the same issues.

So at least not GP related by the looks of it 🙂

Interestingly there is the small space around the thumbnail (the edges/frame) that allows toggle on a variable product for iOS. Almost as if the “toggle element” is misaligned or hiding, having a wrong z-index.

[David]

I think this issue may be covered in this Pull Request:

https://github.com/woocommerce/woocommerce/pull/20002

Notable comments:

Listening for touch support works but requires interaction first.

and

Ensure images switch with the gallery controls

So the touch support listener first requires an interaction with the gallery.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Fredrik]

Hello David,

Thx! Seems to be the same sort of issue or related to the zoom issue, surprisingly this was 2 years ago.

I’ll try to get in contact with someone at WooThemes. Hopefully they can provide a fix since it’s an essential feature in the product gallery.

[David]

Yeah definitely looks like a woo support query.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts