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.
Develop with WooCommerce 
30 replies on “New product gallery merged in to core for 2.7”
This is simple and looks nice! Great addition to WC. Looking forward to the release.
I hope this will work fine with wp retina @2x plugin at the wordpress repo.
LikeLike
Give it a test and let us know? 🙂
LikeLiked by 1 person
Will fancybox still be loaded on single product pages? I know there are quite a few plugins out there that rely on it to be present.
LikeLike
Sorry I should have mentioned that in the post. Prettyphoto (not Fancybox) will continue to be registered but not enqueued.
LikeLike
Great change for WC 2.7.
LikeLiked by 1 person
[…] WooCommerce will ship version 2.7 with a brand new product gallery set up, and you can view a preview here. […]
LikeLike
Nice addition. Also looking most forward to the proposed customer account changes in WC 2.7! Hopefully it gets a feature post like this soon as many 3rd party plugin integrate with that as well. 😉
LikeLike
Are there any required changes to how the featured and gallery image metaboxes function? Meaning, will images have be assigned manually in one or both meta boxes after installing the update?
LikeLike
Nope, that will all be inherited.
LikeLike
New changes look good. Can you scroll the main image instead of selecting the thumbnails?
LikeLike
Clicking the thumbs will scroll the main image on desktop.
On handheld you can swipe the main image to scroll.
LikeLike
OI assume all woo themes will be updated ahead of this release. My site is based on MyStile.
LikeLike
Storefront is already updated. We’ll be working on the others in time for the release of 2.7.
LikeLike
Great addition. Images are everything when merchandising products. Making a better user experience will improve conversions. Thank you!
LikeLiked by 1 person
[…] While we are waiting for the major version 2.7 update, there were three functional updates which contain more than 30 changes. WooCommerce 2.7 will bring a new gallery as we mentioned in the latest post about WooCommerce Updates. A demo and more information about this gallery can be found here. […]
LikeLike
This is great news. Glad to see the gallery being updated to a more standard experience.
LikeLike
Some really nice changes that are most welcome. I like the overall feel of this and it keep woo ahead of the game in terms of standard features. Great Job.
LikeLike
[…] Source: New product gallery merged in to core for 2.7 – Develop WC […]
LikeLike
[…] You can read more about the new gallery here. […]
LikeLike
[…] ein größeres Feature ist aber auch für Benutzer und Endkunden dabei. So bringt 2.7 mit einer komplett überarbeiteten Produktgalerie eine größere Änderung im Frontend mit sich. Weil der Umgang mit Produktbildern vor allem auf […]
LikeLike
I’m not quite fond of the new zoom/magnification feature in single products. Is there a way to turn this off or customize the look and controls of it?
LikeLike
You can just dequeue the script the disable the zoom feature.
LikeLike
Hm – and where do I have to do that exactly?
LikeLike
In your child theme or customisation plugin.
LikeLike
I need a specific function name or place where to look – I have no idea where the function is being called
LikeLike
The script is loaded here; https://github.com/woocommerce/woocommerce/blob/master/includes/class-wc-frontend-scripts.php#L361
Something like this should do the trick https://gist.github.com/jameskoster/5a0faea7d06c7ac01e89a3b5832e74a6
LikeLike
Ok – that worked to a certain point. The image is still cropped and not fully visible as I would love it and I still get the magnification glass on the upper left corner…but for now that’s better than it was. I’m still not understanding, why I got the beta version of the plugin. I never installed it and it’s acting up on me. The download links for downloadable products don’t show up in the customer e-mail as well.
LikeLike
> The image is still cropped and not fully visible
Check your thumbnail settings and turn off hard crop.
> I still get the magnification glass on the upper left corner
We only disabled the magnification, not the lightbox ;p Disabling that is a little more involved. You need to remove the script, the styles and the template file that gets loaded.
LikeLike
Turning off hard cropping didn’t do anything. 😦 I regenerated all thumbs again but nothing changed. It looks like the image gets loaded and then a white frame is pushed in on it.
I don’t like this new way of showing images at all – you guys should give us the option to decide, which way to use to display product images. I am scared that once the official version comes out and replaces the beta, all the changes I am making now, will be gone and the result will be inpredictable.
LikeLike
> I don’t like this new way of showing images at all
Nothing has changed that would affect cropping. I recommend posting in support about that as I can’t really diagnose it without more information. It’s unlikely to be caused by anything in 2.7, though.
> you guys should give us the option to decide, which way to use to display product images
There are options via customisation / plugins. In the interest of keeping WooCommerce core as lean as possible we decide not to add complex design options like this to core itself.
LikeLiked by 1 person