New product gallery merged in to core for 2.7

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 first and last classes, just a single .woocommerce-product-gallery--columns-x class 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.

30 responses to “New product gallery merged in to core for 2.7”

  1. 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.

    1. Give it a test and let us know? 🙂

  2. 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.

    1. Sorry I should have mentioned that in the post. Prettyphoto (not Fancybox) will continue to be registered but not enqueued.

  3. Luke Cavanagh Avatar
    Luke Cavanagh

    Great change for WC 2.7.

  4. […] WooCommerce will ship version 2.7 with a brand new product gallery set up, and you can view a preview here. […]

  5. 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. 😉

  6. 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?

    1. Nope, that will all be inherited.

  7. New changes look good. Can you scroll the main image instead of selecting the thumbnails?

    1. Clicking the thumbs will scroll the main image on desktop.

      On handheld you can swipe the main image to scroll.

  8. Mark Gason Avatar
    Mark Gason

    OI assume all woo themes will be updated ahead of this release. My site is based on MyStile.

    1. Storefront is already updated. We’ll be working on the others in time for the release of 2.7.

  9. thinkdelaney Avatar

    Great addition. Images are everything when merchandising products. Making a better user experience will improve conversions. Thank you!

  10. […] 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. […]

  11. This is great news. Glad to see the gallery being updated to a more standard experience.

  12. 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.

  13. […] Source: New product gallery merged in to core for 2.7 – Develop WC […]

  14. […] You can read more about the new gallery here. […]

  15. […] 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 […]

  16. 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?

    1. You can just dequeue the script the disable the zoom feature.

      1. Hm – and where do I have to do that exactly?

        1. In your child theme or customisation plugin.

          1. I need a specific function name or place where to look – I have no idea where the function is being called

          2. 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.

          3. > 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.

          4. 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.

          5. > 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.

Leave a Reply

Your email address will not be published. Required fields are marked *