Categories
WooCommerce Core

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! 🙂

By James Koster

Product Designer

23 replies on “The New WooCommerce Product Image Gallery”

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.

Like

By Post Author

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

Like

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.

Like

By Post Author

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

Like

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 🙂

Like

By Post Author

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

Like

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!

Like

By Post Author

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,

Like

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.

Like

By Post Author

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

Like

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!

Like

Comments are closed.