Adding support for WooCommerce 3.0's new gallery feature to your theme

As you know we’ve redesigned the product gallery feature in WooCommerce to deliver a richer experience in 3.0.

This is a significant frontend change that can be broken down in to three separate new features;

Image zoom / magnification
Lightbox
Slider

To enable each of these features in your theme you must declare support using add_theme_support() like so;

[code language=”php”]
add_action( ‘after_setup_theme’, ‘yourtheme_setup’ );

function yourtheme_setup() {
add_theme_support( ‘wc-product-gallery-zoom’ );
add_theme_support( ‘wc-product-gallery-lightbox’ );
add_theme_support( ‘wc-product-gallery-slider’ );
}[/code]
This allows you the flexibility to pick and choose exactly which features you want to include/exclude in your theme or at your store.

Styling

If your theme disables WooCommerce core styles you will also need to provide a layout for the new gallery. The classes you’ll want to work with are;

.woocommerce-product-gallery – The gallery wrapper. This wrapper will also include a class that indicates how many columns thumbnails should be arranged into, e.g. .woocommerce-product-gallery--columns-4
- .woocommerce-product-gallery__wrapper – The slider wrapper
  - .woocommerce-product-gallery__image – The figure that contains the image itself, which is wrapped in an anchor
.woocommerce-product-gallery__trigger – This is the link that triggers the lightbox functionality
.flex-control-thumbs – If you’re using the slider functionality the Flexslider script creates the thumbnails in a ol with this class

A note on the column class; If you anticipate that your users might want to change the columns using the woocommerce_product_thumbnails_columns filter, you might also want to include styles for other column layouts besides the default.

If you’re interested you can find the sass we use in Storefront to style the new gallery layout here.

That’s it! Go forth and add support for WooCommerce 3.0’s gallery feature to your themes!

Keep yourself in the loop!

43 responses to “Adding support for WooCommerce 3.0’s new gallery feature to your theme”

WooCommerce 2.7 Release Candidate – Develop WooCommerce

February 28, 2017

[…] Adding support for WooCommerce 2.7’s new gallery feature to your theme […]

Reply
WooCommerce 3.0.0 RC1 – Develop WooCommerce

March 15, 2017

[…] Adding support for WooCommerce new gallery feature to your theme […]

Reply
Chirag

March 16, 2017

I was testing a new product gallery update (RC1 3.0.0) in Twenty Sixteen as well as Twenty Seventeen. For the variable products, I have noticed that when I select the product variation, the first picture in thumbnail gallery displays in it’s original size i.e larger then the all remaining thumbnail gallery pictures. While testing in storefront theme it works good, no resized thumbnail.

Reply
1. James Koster
  
  March 17, 2017
  
  Best to open this as an issue on github.
  
  Reply
2. woutcompay
  
  April 5, 2017
  
  @Chirag Did you post this on github? I’m having the same issue so I can +1.
  
  @James Koster currently the new gallery features work great after adding theme support for it in my custom theme. However, it only works on single product pages but not on product pages shown on other pages through shortcode [product_page id=”99″] , is this intentional or will this be added in an update?
  
  Reply
  1. James Koster
    
    April 5, 2017
    
    Hmm it should work, I just tested myself and can’t see any issues. I suggest posting in support and opening a github issue if you think you’ve found a bug.
    
    Reply
    1. woutcompay
      
      April 6, 2017
      
      You’re right James, I was quick to jump to conclusions, the shortcode is working fine inside the standard content field. However, this particular shortcode is displayed inside a container generated through advanced custom fields plugin and then displayed using add_filter( ‘the_content’,…). It seems like the photoswipe and zoom css and js are not getting called… I’m testing where the problem is and will report back when/if I find it (might just be some bad coding on my part).
      
      please delete above comment https://woocommerce.wordpress.com/2017/02/28/adding-support-for-woocommerce-2-7s-new-gallery-feature-to-your-theme/#comment-2929
      
      Reply
    2. woutcompay
      
      April 10, 2017
      
      The new gallery code scans the post content for [product_page… shortcode, but since my added content containing the shortcode was added to the post content through add_filter( ‘the_content’,…) , the scan doesn’t find the shortcode and doesn’t call the new gallery scripts and css. I managed to fix this by including the shortcode [product_page] in the main content field. This doesn’t actually show any product but does trigger the call to the new gallery scripts and css.
      
      Reply
  2. Chirag
    
    April 5, 2017
    
    @woutcompay Well I have edited css classes. It seems working fine for me.
    
    Reply
printlabb

April 5, 2017

Is there to be update to WooThemes for the alteration to product display?

Reply
azieexpert

April 6, 2017

My product info is totally messed up due to the update of Woocommerce. Where do I add the code mentioned above so my store looks like it should agian?! I think the .woocommerce-product-gallery–columns-4
should do the trick right?

https://www.reis-expert.nl/product/hardcopy-reisgids-thailand/

thanks for the help!

Reply
1. James Koster
  
  April 6, 2017
  
  You can read about adding support for the new gallery in your theme here; https://woocommerce.wordpress.com/2017/02/28/adding-support-for-woocommerce-2-7s-new-gallery-feature-to-your-theme/
  
  Reply
  1. azieexpert
    
    April 6, 2017
    
    Hi James,
    
    Thanks for the reply. But in this post they don’t explain where to put the code. They just say “add this code”. Since i’m not a theme builder i have no idea where to add these codes.
    
    Kind regards,
    Sjoerd
    
    Reply
    1. James Koster
      
      April 6, 2017
      
      Which code in particular? You may want to speak to your theme author, or use a WooCommerce specific theme.
      
      Reply
      1. azieexpert
        
        April 6, 2017
        
        the theme is suppost to be Woocommerce specific but i will check with the theme author.
      2. James Koster
        
        April 6, 2017
        
        Perhaps they didn’t test with 3.0 yet? Have you checked for an update?
    2. cvasoya
      
      April 6, 2017
      
      Use that code in your functions.php file
      
      Reply
      1. azieexpert
        
        April 6, 2017
        
        thanks for the help everyone! There is no update for the theme yet but i’m hoping it will come soon.
      2. gingerchickies
        
        May 1, 2017
        
        Hai, i have got the same problem. Where can i find the functions.php file? I use woocommerce in the Shop Isle theme but it seems i’ve lost the editor as well..
hollyknott

April 12, 2017

Can you clarify that the code above needs to be edited – that is, my child theme is called “Dynamik.” So would I change:

add_action( ‘after_setup_theme’, ‘yourtheme_setup’ );

function yourtheme_setup() {
add_theme_support( ‘wc-product-gallery-zoom’ );
add_theme_support( ‘wc-product-gallery-lightbox’ );
add_theme_support( ‘wc-product-gallery-slider’ );
}

to read:

add_action( ‘after_setup_theme’, ‘dynamik_setup’ );

function dynamik_setup() {
add_theme_support( ‘wc-product-gallery-zoom’ );
add_theme_support( ‘wc-product-gallery-lightbox’ );
add_theme_support( ‘wc-product-gallery-slider’ );
}

? Or do I also replace the word “theme” where still visible above with Dynamik? Thanks for any tips!

Reply
1. Mike Jolley
  
  April 13, 2017
  
  That can work, but if this is a WC theme you may want to ask the author to include it. You may also want to choose something more unique than ‘dynamik_setup’ in case they do the same! Any name/prefix will work.
  
  Reply
thelistasia

April 13, 2017

Hi folks,

I have this to work with my custom theme (local dev MAMP) but I want it to have directional arrow links and want the images below the main slider image to be like this example.

http://flexslider.woothemes.com/thumbnail-slider.html

How do I go about doing this in my custom theme? I am totally lost.

Cheers,

Ben.

Reply
1. thelistasia
  
  April 13, 2017
  
  Hey Mike, you answered my question on Stackoverflow and directed me here but I need some help if you have time. I basically want my single product images to look like this:
  
  http://flexslider.woothemes.com/thumbnail-slider.html
  
  This is how it looks now:
  
  https://postimg.org/image/ebfsp8end/
  
  but I want it to be like the flex slider example
  
  If you could help I would be very grateful.
  
  Cheers,
  
  Ben.
  
  Reply
  1. James Koster
    
    April 13, 2017
    
    You can filter the flexslider parameters here https://github.com/woocommerce/woocommerce/blob/f18015f6c94736a51ba7279000e7ef784108a3d3/includes/class-wc-frontend-scripts.php#L467
    
    You’ll need some CSS tweaks to copy the flexslider demo 100% though.
    
    Reply
2. James Koster
  
  April 13, 2017
  
  You can use `woocommerce_single_product_carousel_options ` to customize flexslider. See; https://github.com/woocommerce/woocommerce/blob/f18015f6c94736a51ba7279000e7ef784108a3d3/includes/class-wc-frontend-scripts.php#L467
  
  Reply
  1. thelistasia
    
    April 13, 2017
    
    Hi James,
    
    Thanks for both of the replies. I will check out the links and do some digging,
    
    Have a great day,
    
    Ben.
    
    Reply
Matt

April 17, 2017

I’m currently using the Divi theme and it looks like they have chosen the product zoom by default without the ability to switch back to lightbox. A bad move to force a site to change functionality.

How can I turn off the zoom feature and revert back to lightbox using functions?

Reply
1. James Koster
  
  April 18, 2017
  
  Hard to say without seeing their implementation. Probably best to contact them about it.
  
  Reply
  1. Matt
    
    April 18, 2017
    
    But just to clarify.
    
    The implementation of one of the three image gallery methods (lightbox, zoom or slider) is a choice made by the theme developer?
    
    Reply
    1. James Koster
      
      April 19, 2017
      
      Correct.
      
      Reply
vvnenovv

April 19, 2017

Hi,

This works perfectly. Thank you so much.

Is there an option to have image caption or title from image metadata, displayed across main image when clicked on thumbnail or how to achieve that.

Other option is to have caption showed on thumbnails if it is easier to achieve.

Thank you so much.

Best regards.

Reply
gcwebbyuk

April 21, 2017

Is there a simple way, using Woo Canvas to switch off the zoom facility – or does this need to be coded in functions.php in the child theme?

Reply
1. James Koster
  
  April 21, 2017
  
  You’ll need to add this as a customisation.
  
  Reply
balvan64

April 22, 2017

The new Slider does not work in an RTL site, the pictures (.woocommerce-product-gallery__image) slide to the wrong side.

Reply
1. James Koster
  
  April 24, 2017
  
  Please open an issue on github 🙂
  
  Reply
Deby Coles

May 6, 2017

Artificer theme, one of the free ones from WooCommerce has an update to 1.3.17 to integrate WC version 3 changes, but I’m stuck on 1.3.16 in my WordPress. I’m not getting the option to update my theme within WordPress and am not tech savvy enough to want to do this manually. I have a bunch of friends in the same situation.
How can I get WordPress to recognise that there is a theme update due and apply it to my site? The products won’t display properly following the WC3.0 update, so I need the theme update too.

Reply
1. Deby Coles
  
  May 6, 2017
  
  I found the WooCommerce Helper plugin which has updated the theme file, but sadly it still is not working properly with the new WC version 3+.
  
  Reply
Deby Coles

May 6, 2017

Artificer theme is broken by the update. Even though there is a new theme update, the new theme doesn’t work either. The front page featured products will not display. It must be affecting thousands of people who use the free Artificer theme for their Woo Stores. I can’t find how to fix it.

Reply
1. James Koster
  
  May 8, 2017
  
  We’ll look into this. Expect a release soon 🙂
  
  Reply
  1. Deby Coles
    
    May 14, 2017
    
    Hi James. My bloggy pals and I have all now got the latest everything, including the new Artificer release 1.3.18 which is supposed to fix the featured product images issue. However none of us can still get featured products to show on the front page of our stores. Couple of examples here – http://homemadebytheheart.com/ and https://fandbags.com/ We’re all in the same position. It all worked before, now it won’t work for any of us despite the new theme update.
    “2017.05.12 – version 1.3.18
    * Fix – Fixes the WooCommerce 3.0.0 compatibility for the featured products query.”
    We don’t know how to fix this 🙁 Can you point us to any help docs that might sort this problem out?
    Thanks.
    
    Reply
    1. Deby Coles
      
      May 14, 2017
      
      Edit to my last comment. The new theme is working for sites where they already have featured products in place before the WC 3.0 update – see this example. https://sewstylishbags.com/ However for more recent sites set up that didn’t already have featured products before the update, they can’t get the featured products even with the 1.3.18 theme update. Hope that helps you track down the problem and solve it for us all soon 🙂 Thank you so much.
      
      Reply
    2. Jeffikus
      
      May 15, 2017
      
      Hi Deby
      
      Have you by any chance open up a support issue for this? If you haven’t could you please do that so I can take a look at your case. Please mention in the ticket that @jeffikus told you to log it so that the support staff can allocate it to me.
      
      Submit a ticket here -> https://www.woocommerce.com/my-account/tickets/
      
      Thanks so much!
      
      Reply
      1. Deby Coles
        
        May 15, 2017
        
        Thank you, I will do that now.