[Resolved] WooCommerce Product Gallery

Home Forums Support WooCommerce Product Gallery

  • This topic has 13 replies, 3 voices, and was last updated 4 months ago by David.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1452049
    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.

    #1452207
    David
    Staff
    Customer Support

    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

    #1452573
    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 πŸ™‚

    #1452962
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #1453463
    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

    #1453579
    Fredrik

    *Update.

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

    See video:

    Screen Cap

    #1454158
    Tom
    Lead Developer
    Lead Developer

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

    #1454171
    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

    #1454197
    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.

    #1454438
    Tom
    Lead Developer
    Lead Developer

    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.

    #1454507
    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.

    #1454907
    David
    Staff
    Customer Support

    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.

    #1455150
    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.

    #1455193
    David
    Staff
    Customer Support

    Yeah definitely looks like a woo support query.

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.