Adding support for the new WooCommerce 3.0 gallery features

Snippets / Wordpress

WooCommerce 3.0 and the new gallery features

WooCommerce 3.0 introduced some pretty cool new features specifically for your WooCommerce photos including:

Image zoom / magnification built right into core – no need for any third party plugins for zoom functionality anymore!

Lightbox – brand new and much-improved image on the old one.

Slider – yip – no need for any advanced third party plugins for a nice slider for your photo gallery.

These are pretty big changes to how product images get presented in WooCommerce. Over the past few years, many third party extensions have become quite popular to address the previous shortcomings in core WooCommerce. For this reason, the WooCommerce team made the call to not enable the new gallery features by default.

In order to avail of these new features, you must be using a WooCommerce compatible theme that has specifically opted in to support the new gallery features. This also allows theme authors to pick and choose which new features they wish to support – while maintaining compatibility with their own theme features and/or compatibility with third-party WooCommerce gallery and lightbox extensions.

Allowing theme authors to control which new gallery features are enabled is smart and is the right call by the WooCommerce team to minimize disruption to WooCommerce websites that have existing alternative product galleries. The major downside to this approach though, is that if your WooCommerce theme doesn’t have it’s own gallery implementation and relies solely on the default WooCommerce lightbox, chances are right now that your lightbox is no longer working. Why? The old lightbox has been completely deprecated and removed from the product page. So unless your theme author has already added support for the new 3.0 gallery features you’re caught in no mans land right now with no functioning lightbox!

Adding support for the new WooCommerce 3.0 gallery features

The good news is that adding support for the new 3.0 gallery features is a piece of cake! If you’re using a WooCommerce supported theme that is maintained by a theme shop or a themeforest author my first recommendation is to get in touch with your theme author and ask them to add WooCommerce 3.0 support asap. If you’re managing your own WooCommerce theme you simply need to add a few lines to your after_setup_theme action. (most likely in your functions.php file).

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' );
}

Once you add those lines head back over to your product page and you should see something like this.

If your theme hasn’t disabled the core WooCommerce styles that should be all you need to do to use the new gallery. But it’s quite common for themes that provide deep WooCommerce support to disable the core WooComerce styles and therefore you’ll need some additional CSS to get things looking nice. The following CSS is a slightly modified version of the css that ships with the Storefront WooCommerce theme. Try adding this to your themes style.css if you manage your own theme.

/* WooCommerce 3.0 Gallery */
.woocommerce-product-gallery {
position: relative;
margin-bottom: 3em
}.woocommerce-product-gallery figure {
margin: 0
}.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
width: 25%;
display: inline-block
}
.woocommerce-product-gallery .flex-control-thumbs li {
list-style: none;
float: left;
cursor: pointer
}
.woocommerce-product-gallery .flex-control-thumbs img {
opacity: .5
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover {
opacity: 1
}
.woocommerce-product-gallery img {
display: block
}
.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
width: 33.3333%
}
.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
width: 25%
}
.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
width: 20%
}
.woocommerce-product-gallery__trigger {
position: absolute;
top: 1em;
right: 1em;
z-index: 99;
}
a.woocommerce-product-gallery__trigger {
text-decoration: none;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: .875em;
right: .875em;
display: block;
height: 2em;
width: 2em;
border-radius: 3px;
z-index: 99;
text-align: center;
text-indent: -999px;
overflow: hidden;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
background-color: #169fda;
color: #ffffff;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
background-color: #1781ae;
border-color: #1781ae;
color: #ffffff;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
font: normal normal normal 1em/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
content: "\f00e";
line-height: 2;
text-indent: 0;
}