Followers of this blog will know that we’ve been talking about the possibility of revamping our product gallery display on single product pages. This post is simply to document that this has now been confirmed and indeed merged in to core. The feature will be included in WooCommerce 2.7.
Here’s a (very) quick video demonstrating the new gallery:
The improvements, in a nutshell
To re-iterate the points from previous posts;
- Visitors now have access to both magnification and zooming (lightbox)
- Gallery behaviour is more intuitive – clicking a thumbnail updates the main image rather than opening a lightbox
- Dramatic improvements on handheld, in particular; touch gestures – swipe to scroll through the gallery, pinch to zoom, swipe up to close, etc
- Opening the lightbox on mobile now displays the image in it’s true size, larger than the in-page display
Theme and plugin authors, please heed the following message
If you develop a WooCommerce theme or plugin that interacts with our gallery in any way we highly recommend that you checkout the WooCommerce master branch and test your product against it as soon as you possibly can. Themes will very likely need a few CSS updates to support the new gallery. Things to look out for include;
- We’ve adjusted how thumbnail columns are laid out. No more
firstandlastclasses, just a single.woocommerce-product-gallery--columns-xclass applied to the gallery wrapper. - When working on integrations with default themes we noticed some button style conflicts with the buttons in Photoswipe (lightbox).
- You’ll need to style the Photoswipe trigger (
.woocommerce-product-gallery__trigger)
Beyond this, we hope the update will be fairly unobtrusive. But we must stress that this is a potentially breaking change so it’s always best to test these things sooner rather than later.
Your thoughts welcome
2.7 is still a ways off, so if you spot any bugs, or don’t like something we’ve done with the gallery then now is the time to make your voice heard. As always, github is the place to do so.