Taken form Foxrun Software

WooCommerce comes with Fancybox, a Lightbox implementation, bundled as part of the core. It’s used on the product pages to display the image gallery pictures, and a common question is “How do I use WooCommerce’s fancybox to do X”. This article will walk you through how to do just that.

Enable Lightbox

The first step is to ensure that the Lightbox is enabled by going to WooCommerce > Settings > General > Styles and Scripts, and making sure that “Enable WooCommerce lightbox on the product page” is checked.

Including Lightbox

If you want to use the lightbox on, say, a product page, you’re in luck, with the above setting enabled, the lightbox styles/scripts will be automatically included. If however you want to use the lightbox on a different part of your site, you will likely have to include those files with an action like the following:

add_action( 'wp_enqueue_scripts', 'frontend_scripts_include_lightbox' );

function frontend_scripts_include_lightbox() {
  global $woocommerce;

  $suffix      = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
  $lightbox_en = get_option( 'woocommerce_enable_lightbox' ) == 'yes' ? true : false;

  if ( $lightbox_en ) {
    wp_enqueue_script( 'fancybox', $woocommerce->plugin_url() . '/assets/js/fancybox/fancybox' . $suffix . '.js', array( 'jquery' ), '1.6', true );
    wp_enqueue_style( 'woocommerce_fancybox_styles', $woocommerce->plugin_url() . '/assets/css/fancybox.css' );
  }
}

This can be added to your theme’s functions.php in the usual manner (theme-name/functions.php), or perhaps to your custom site plugin. Note that this will have the effect of loading the lightbox script/style on every page of your site; if you want to limit it to certain pages/sections you can make use of the wide array of conditional tags available.

Bring out the LIGHTBOX!
Now that lightbox (really fancybox) is enabled and included, we can start using it. If you just want to display one or more images in their own popup or little gallery, it’s as simple as wrapping them in an anchor tag and adding the “zoom” class, and/or a “rel” name to group them into a slideshow:

<pre><a class="zoom" rel="my-gallery" title="My Picture 1" href="/path/to/image1.png"><img src="/path/to/image1.png" /></a>
<a class="zoom" rel="my-gallery" title="My Picture 2" href="/path/to/image2.png"><img src="/path/to/image2.png" /></a></pre>

Advanced Usage

If you need more control over the lightbox behavior, and/or wish to display content other than an image, you can make full use of the fancybox demos and api. You’ll just be responsible for injecting the relevant javascript into your page source, or including it in an external script, or whatever you prefer. I am a fan of using the WooCommerce class add_inline_js() method, which can be used like so:

<pre><?php
ob_start();
?>
$("a.group").fancybox({
  'transitionIn'  : 'elastic',
  'transitionOut' : 'elastic',
  'speedIn'       : 600, 
  'speedOut'      : 200, 
  'overlayShow'   : false
});
<?php
$javascript = ob_get_clean();

$woocommerce->add_inline_js( $javascript );
?></pre>