The New WooCommerce Product Image Gallery

A couple of weeks ago we posted about an experiment we were working on to improve the product galleries in WooCommerce, particularly the mobile experience.

We laid out options to have a lightbox, a magnification/zoom, or both and included a poll to get your feedback. After 442 votes, the results of that poll look like this;

  • Lightbox – 18.55%
  • Zoom/Magnification – 51.81%
  • Both – 29.64%

What do these results show us?

  1. The majority of folks (81.45% – ‘both’ voters + ‘zoom’ voters) like the zoom/magnification feature
  2. A significant number of people (48.19% – ‘lightbox’ voters + ‘both’ voters) feel that we need to continue including a lightbox

Based on these results and internal discussions we’ve decided to include both a lightbox and a zoom/magnifier. To do this we’ll use the popular Photoswipe script for lightbox functionality alongside our own Flexslider which handles the carousel/swiping on mobile. Zoom is our script of choice for zooming.

How does it look

A little something like this;

photoswipe

And on mobile;

photoswipe-handheld

The (extra) nice thing about the mobile experience (which isn’t possible to capture in a desktop browser), is that you can tap/pinch to zoom once the lightbox is open which makes it feel very ‘native’. You also get to see the full size image, regardless of what size your thumbails display at.

Can I play with it?

You sure can. Just check out the add/product-galleries branch on github. There are a few styling tweaks to work through, and variation images don’t work yet. But you’ll get a very good idea of how things work.

Once again, a note to theme authors

Shamelessly copy/pasted from the previous post;

This change involves template changes to templates/single-product/product-image.phpand templates/single-product/product-thumbnails.php as well as the addition of some new scripts and a little css. If you dequeue WooCommerce styles in your theme and roll your own, you’ll need to add some css to support the new gallery.

Let us know what you think! 🙂

23 responses to “The New WooCommerce Product Image Gallery”

  1. […] via The New WooCommerce Product Image Gallery — Develop WC […]

  2. Just one question. Can the slider be configured to show the left and right arrows on hover?
    Thanks in advance!

    1. Do you mean the slider in regular view, or the slider when the lightbox has been opened?

      In the latter, arrows are already visible. No need for them on mobile, it’s more intuitive to swipe.

      You could add arrows to the regular view by filtering the flexslider args and adding a little css.

  3. What is ETA for the 2.7 version?

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

  5. Hi! Thanks for this post. Do you happen to know if there is a way to disable the ‘sliding effect’ on the product gallery, so the images only move if some clicks on the thumbnail or choose a color from the drop-down menu? Many thanks. Denice

    1. What you’ve described is how it works. The large image will only slide if you click a thumbnail or change a variation.

      If you need to customise other slider behaviour you can use the filter here.

      1. Dear James, thanks a lot for getting back to me 🙂 unfortunately my shop is not acting the way you discribe. (take a lot at the link: http://forklaede-co.dk/product/sort-herre-forklaede/). The images move in a loop regardless of how I interact with them. Also thank you for the link, but do you think you can help located the code I need to use for the images not to move in a loop by them self? I’m not good enough to read these kind of thing :-/ I can copy past stuff into my child theme though… Thanks, Denice

        1. That’s not the WooCommerce core gallery. Must be your theme or a plugin doing that.

          Our new gallery isn’t live yet, so unless you’re running a version of WooCommerce you downloaded from github you won’t be seeing it yet 🙂

          1. Okay, thanks for letting me know this. I’m running the theme ‘Jupiter’ along with the woocommerce plugin. Do you know if there is a way to overwrite this ‘sliding effect’ or get the original WC gallery? Thanks, Denice

          2. Your theme is overwriting the entire WooCommerce gallery. I’m not familiar with the theme personally so cannot really advise anything beyond speaking to the original author. Good luck!

          3. Thanks, this helped a lot!

  6. The article link to try the galleries is dead (404):
    https://github.com/woothemes/woocommerce/tree/add/product-galleries

    from:
    “Can I play with it?
    You sure can. Just check out the add/product-galleries branch on github”

    Is there an alternative?
    (apart from full wooCommerce master branch)

    1. > apart from full wooCommerce master branch

      It has been merged in to core now, so this is how you play with it 🙂

      1. Fair enough… :

        – Does testing the product gallery require an updated StoreFront theme as well as the wooCommerce master branch?
        – Is WordPress 4.7 beta required|recommended|not advisable to test along with wooCommerce beta?
        – Is there any equivalent to WordPress Beta Tester for wooCommerce/Storefront to help keep up to date with nightly builds? [I see there is a https://github.com/seb86/Storefront-Beta-Tester but I am not sure this is recommended]

        is there any blog note/readme on recommended setup for contributing to 2.7 testing?

        thanks,

        1. Hey Jon,

          > Does testing the product gallery require an updated StoreFront theme as well as the wooCommerce master branch?

          Storefront 2.1.5 already contains tweaks to make it compatible with the new WooCommerce gallery.

          > Is WordPress 4.7 beta required|recommended|not advisable to test along with wooCommerce beta?

          We’ll be testing this ourselves of course, but more testers are of course welcome. I’d test against the stable version of WordPress if I were you, then with 4.7 is you want to go the extra mile 🙂

          > Is there any equivalent to WordPress Beta Tester for wooCommerce/Storefront to help keep up to date with nightly builds? [I see there is a https://github.com/seb86/Storefront-Beta-Tester but I am not sure this is recommended]

          That plugin only works with tagged versions on github. So it’s good for major releases. Other than that, no, it’s quite tricky to automatically import a development version of a theme directly into a live environment.

  7. Hi, is this a function that will be part of woocommerce or online of the storefront theme? Having this functionality as part of woocommerce or creating a plugin so non storefront theme users can benefit of this would be great!

    thanks

    1. This is going in WooCommerce core 🙂

      1. Awesome, that’s going to be a great feature. Any idea concerning the timeline / expected launch date? Thanks and have a nice week. Cheers,

        1. It’s coming in 2.7, the next major release which is currently in beta 🙂

      2. Is there any chance you’ll also enable placing the product thumbnails vertically next to the product image rather than only horizontally underneath it? That would be a great feature, as it would help in terms of showing more content with less scrolling.

        Cheers and looking forward to the 2.7 update!

        1. Nope, that’s the job of the theme 🙂

Leave a Reply

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