[stag_alert style=”grey”]Update: As of version 2.0, WooCommerce is no longer packaged with the excellent FancyBox (I guess due to some licensing issue or something). I’m leaving this article up for those still on WC 1.6.6 and previous, and for historical purposes. To learn how to make use of the new WooCommerce-2.0 compatible lightbox, read on in the new and updated article How to Use WooCommerce Lightbox Part 2[/stag_alert]

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:

WooCommerce > Settings > General > Styles and Scripts

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:

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

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:

<?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 );

Published by Justin Stern

Justin is one of our co-founders, and is our resident overengineer. He likes to write developer tutorials and make black magic happen in our plugins. He thinks that writing code is a lot easier than writing words.

67 Comments

  1. Is it possible to have single page products show in the lightbox instead of going to the page? Might be nice for the users.

    • Yeah, it’s definitely something that people have talked about, and there’s certainly no reason it couldn’t be done. Don’t know whether anyone actually has however

    • You can using an iframe. I am trying to figure out how to remove the header and footer when doing so.

      • Would you allow customers to go through the whole checkout process right there in the lighboxed iframe though? What would be the next action after the customer brought up the framed product page?

        • Hi Justin,

          I haven’t tested to the checkout process because it was having issues with going to the next slide items. Every time it would load the new slide it would do a page refresh and the lightbox would go down a whole div. It was pretty janky.

          I am now going with a different design that doesn’t involve products being shown in lighbox.

          Looking forward to finding a solution doing this thou in future projects and will stay posted to this thread.

          Cheers,

          Mike

    • As far as simply adding the lightbox zoom class to the images on the product page I di this here http://karensheperd.com/shop/. This was practical because the products had 1 image to them and were simple products. After using Justin’s script on the function.php to be sure fancybox was loaded on all pages i added this to the function.php:

      remove_action( ‘woocommerce_before_shop_loop_item_title’, ‘woocommerce_template_loop_product_thumbnail’, 10);

      add_action( ‘woocommerce_before_shop_loop_item_title’, ‘woocommerce_template_loop_product_thumbnail’, 10);

      /**

      * WooCommerce Loop Product Thumbs

      **/

      if ( ! function_exists( ‘woocommerce_template_loop_product_thumbnail’ ) ) {

      function woocommerce_template_loop_product_thumbnail() {

      echo woocommerce_get_product_thumbnail();

      }

      }

      /**

      * WooCommerce Product Thumbnail

      **/

      if ( ! function_exists( ‘woocommerce_get_product_thumbnail’ ) ) {

      function woocommerce_get_product_thumbnail( $size = ‘shop_catalog’, $placeholder_width = 0, $placeholder_height = 0 ) {

      global $post, $woocommerce;

      if ( ! $placeholder_width )

      $placeholder_width = $woocommerce->get_image_size( ‘shop_catalog_image_width’ );

      if ( ! $placeholder_height )

      $placeholder_height = $woocommerce->get_image_size( ‘shop_catalog_image_height’ );

      if ( has_post_thumbnail() ) { ?>

      <a itemprop="image" href="” class=”zoom” rel=”thumbnails” title=””>ID, apply_filters( ‘single_product_large_thumbnail_size’, ‘shop_single’ ) ) ?> <a title="view this products details" href="”>Detailsβ†’ Click Here

      <img src="” alt=”Placeholder” />

      <?php

      }

      }

      }

      I did this last october after reading this post, I should have read the comments.

  2. Hi, I can’t enable lightbox script, when I check that option and save the changes it still appears unchecked πŸ™

    so I tried your second method, but I remove the conditional if ( $lightbox_en ), so can always the lightbox be enabled wether is checked or not, but still doesnt work πŸ™

    http://xn--blumediseo-19a.com/tienda/?product=anillo-cuadrado-con-perla-malva

    can you help me please? thanks a lot in advance πŸ˜‰

    • Hey Manuel, I’ve never seen that happen (the lightbox option not saving). Is that happening for all options in your WooCommerce settings, or just the lightbox option? Either way it doesn’t make a whole lot of sense, there should be nothing that would prevent these options from saving, so I’d try and figure out what’s going on there first. I took a look at your page, and only the fancybox css is being loaded, not the javascript, which is also odd. Wish I could be more help, but it’s tough to say what’s going on with your install, definitely not typical.

  3. Hi justin thanks for your reply, and yeah that thing is just happening with the lightbox option, after wasting some hours, I find Shutter Reloaded

    http://www.laptoptips.ca/projects/wp-shutter-reloaded/, works fine for what I’m doing πŸ™‚

  4. now I’m trying to remove the product count for the categories page

    http://xn--blumediseo-19a.com/tienda/?page_id=119

    I tried this:

    ul.products .count { display:none !important; }

    and

    mark {

    display: none;

    }

    and

    mark{ background:none; }

    but no one seems to be working πŸ™

    • Yeah, that actually should work if you’re using the latest content-product_cat.php template, but I’m not seeing the mark element in your example page, so maybe your theme is overriding that template or something

      • Hi justin, thanks for your replys, and thanks a lot for show me where is the php file that handle that count, finally removing that, the category count is gone πŸ™‚

  5. now the last thing I’m working on it, is trying to figure out what happen whit the div.quantity .plus and div.quantity .minus buttons that don’t show up in the product page http://xn--blumediseo-19a.com/tienda/?product=sol-en-plata-925-con-amatista-y-onix-sol-en-plata-con-amatista-natural

    • Ha, those plus/minus buttons are interesting, aren’t they? They’re actually added dynamically by a little snippet of JavaScript, which appears in the woocommerce.js file, which I see is not being included on your product page. Actually it doesn’t look like any of your woocommerce javascript files are being included on that page, so lots of things will break, including your tabs. Even your inline woocommerce javascript isn’t showing up on the page, dunno how this is happening to you, but I guess it must be some issue with your theme. Try switching to the Twenty Eleven theme to verify things work there, then get in touch with whomever you bought the theme from, or your designer. And let me know what the solution ends up being, if you don’t mind, I’d be curious

      • yeah, no script is loading et all, since I noticed that Lightbox stop working, I just create a child theme of MyStile theme http://www.woocommerce.com/products/mystile/ and of course when I activate that or any other theme everything works, ligthbox,that buttons and the tabs, I just made a child theme to add the personalized header.php and footer.php and thats all, but all the woocommerce scripts are gone :(, I think I remove some parts of that files that prevent the scripts load properly :/

        • Ok, that would explain it. So I guess just use the MyStile header/footer templates as starting points for your child theme modifications, and make your customizations, making sure to leave in place the important code, probably most critically: wp_head(); and wp_footer();

  6. oh gosh, I want to kill my self hahaha LOL, I just have to add

    on footer.php, and lightbox, plus/minus buttons, tabs and everything is now working πŸ™‚

    thanks a lot for you support, and my apologies to use your entry for post my problems, cheers!

    • You’re welcome Manuel, glad you were able to get things working in the end πŸ™‚

    • Hi Manuel

      How did you get this to work? Can you please put up screenshots or more detailed explanation?

      I’m having the same problems you had – no lightbox, and no styled tabs!

      Thanks πŸ™‚

  7. I’m sure this is a totally dumb question….but…..

    I want to have a text link that is clickable to a popup window showing the image. I’m on wordpress/woocommerce/emporium theme (child of emporium, actually, but whatever).

    So, in a product description, I want to be able to say “available in one of four colors”, and have the ‘four colors’ words as a link that opens up an image showing the actual four different colors…since I have thickbox included with my woo, as shown above, it SEEMS that there should be some way that I could code the link to make it work…but I’m not getting it. Do I need to add code to my functions.php? as you said above…this is a product page, though, so the zoom class should be already loaded; i just don’t know how to *use* it….

    This is probably basic html, but I have very haphazard and cobbled-together self-taught-knowledge of how to do stuff…and this isn’t one of them.

    • Hey Shawn, did you ever get this working? You should be able to do what you’re describing using my method here. Just create an anchor tag that links to your image, and has the class “zoom”, and probably a rel of “colors” or something for good measure. Here’s an example link to an image on my server: four colors

  8. Hey Justin,

    Great article and exactly what I was looking for! However I’d be ever so grateful if you could help me a little bit more.

    You mention “if you want to limit it to certain pages/sections you can make use of the wide array of conditional tags available.” Which is exactly what I want to do. I want to limit it to loading only on posts assigned with a certain category (press). How would I go about making that happen?

    Thank you kind sir! Please be aware I’m not much of a developer, I can get by, but an “explanation for a dummy” would be much appreciated!

    • Hey Dan, not that it’s really a big deal to have these scripts loaded on a page where they’re not used, but if you wanted to make this happen you could try adding something like the following:

      function frontend_scripts_include_lightbox() {

      global $wp_query;

      if ( is_category() && $wp_query->queried_object->slug == "my-category" ) {

      // code from above to load the scripts

      }

      }

  9. Hi again!

    Just wondering if there’s a way to make the fancy-box plugin work like this:

    Click on small thumbnails to make the large preview change to the currently clicked-on image, instead of opening the pop-up image container.

    Thanks!

    • Hey, that’s like a thumbnail gallery with a preview image, and it’s not what lightbox is designed to do. I’m guessing there’s probably some other plugins to do that sort of thing

  10. The a class=”zoom” trick used to work for me (WooCommerce 1.2) to make non-product images show in a lightbox. Since updating to WooCommerce 1.6.6 and Wootique 1.6 it doesn’t.

    I found code disabling it in wootique/includes/theme-woocommerce.php, beginning with this line:

    // If theme lightbox is enabled, disable the WooCommerce lightbox and make product images prettyPhoto galleries

    See the page linked as website above.

    Any ideas for a workaround?

    Thanks!

    • You made sure the “Enable WooCommerce lightbox on the product page” option is checked on the WooCommerce > Settings page?

      • Sorry, I should have mentioned that. Yes, it’s checked. I also just went in and re-saved the settings, but no change.

  11. Sorry if this is a silly question but where are you placing the code:

    $(“a.group”).fancybox({

    ‘transitionIn’ : ‘elastic’,

    ‘transitionOut’ : ‘elastic’,

    ‘speedIn’ : 600,

    ‘speedOut’ : 200,

    ‘overlayShow’ : false

    });

    add_inline_js( $javascript );

    • Hey Leon, keep in mind that you only need that if you want to do something fancy beyond the normal lightbox behavior. But you could put it in the same frontend_scripts_include_lightbox() function shown in the Including Lightbox section.

  12. Great stuff! How would I add it to a single page with a custom template?

  13. You know Sam, I often include javascript/css using the custom fields technique described by Mike Jolley: Including CSS & JavaScript in wordpress posts using Custom Fields. After you add the code he describes, you can just create custom_js and custom_css custom fields on any given post or page and include whatever scripts you need. works great!

    • Thanks for responding. I am relatively new to wordpress so bear with me. I have a custom page on my site that I have added images via html and I wanted to include the light box function to only that page so it doesn’t load on every page. I was able to add your code to my functions.php and it worked but I am having trouble getting to load only on that specif page. I tried to adapt an answer you gave another commenter for categories but I couldn’t get it to work in my situation. Thanks for your help in advance.

  14. Hi!

    Is there any way to enlarge image at shop page without going at single product page? Here it is http://kronero.ru/magazin/

    I tried to use built in WooCommerce lightbox feature as described at this article, but it doesn’t work.

  15. This doesn’t seem to work in WooCommerce 2.0. Any ideas how to get it up and running again? I’m trying to get it working on the thumbnails here (under the main image on the left).

    http://visioncreativegroup.com.au/demos/360/project/skateistan-cambodia/

    Thanks in advance.

    • Yeah, WC 2.0 uses the prettyphoto library rather than fancybox, so a decent portion of this article needs to be rewritten to reflect that. In fact just as with my plugins, a bunch of my articles require updates for WC 2.0+ πŸ™ they’re in the works

      • Damn. Thanks anyway, man.

      • Hello Justin, I tried to change your code as below, but it still doesn’t work. Do you have any suggestion?

        [code]add_action( ‘wp_enqueue_scripts’, ‘frontend_scripts_include_prettyphoto’ );

        function frontend_scripts_include_prettyphoto() {
        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( ‘prettyPhoto’, $woocommerce->plugin_url() . ‘/assets/js/prettyPhoto/jquery.prettyPhoto’ . $suffix . ‘.js’, array( ‘jquery’ ), ‘1.7.1’, true );
        wp_enqueue_script( ‘prettyPhoto’, $woocommerce->plugin_url() . ‘/assets/js/prettyPhoto/jquery.prettyPhoto.init’ . $suffix . ‘.js’, array( ‘jquery’ ), ‘1.7.1’, true );
        wp_enqueue_style( ‘woocommerce_prettyphoto_styles’, $woocommerce->plugin_url() . ‘/assets/css/prettyPhoto.css’ );
        }
        }

  16. Im only selling a single product, and the WP theme im using doesnt support multiple pages, so i HAVE to have the whole checkout process go through a modal window like LightBox. I can’t seem to get this to work. Help??

    thanks

    • Hey Ben,

      Making the whole checkout go through a lightbox would be fairly complicated and probably involve some custom development. You might also try adding it to http://ideas.woocommerce.com and see if anyone else would want a extension built πŸ™‚

  17. Hello,

    How can I remove the title from the image popup page? Some of the images have names like “234.jpg” and the title is 234. I do not want that.

    Thanks.

    • I am also needing to remove the file names on the lightbox.

      Joseph, have you found a solution to this?

      Thanks

      -Chris

      • I am having this trouble too! One way to to do it would to remove the title when you import the gallery items. Its tedious but it works. The title is on the right hand side when you select the photos to import. This can also be done when you set the featured image.

    • I am having this trouble too! One way to to do it would to remove the title when you import the gallery items. Its tedious but it works. The title is on the right hand side when you select the photos to import. This can also be done when you set the featured image.

  18. Hi,

    might be a stupid question in this article, but is there an option to disable all the lightboxes. I have one featured image and some additional product images. If I click on the featured image I don’t want to present a lightbox instead a zoom feature should be shown on the side of the photo. If I click on the smal product images, the should appear in the area of the featured image. How can I realize it?

    Thanks and regards
    Christian

    • Yep, you can disable the default WooCommerce lightbox by going to WooCommerce > Settings > General and unchecking “Enable Lightbox”. You might have to disable it in your theme as well. To get the zoom feature, I’d suggest trying the WooCommerce Cloud Zoom extension πŸ™‚

  19. Don’t know if anyone else is experiencing this, but thought I would ask if there is something I can do about the arrows that show up directly on the image in the lightbox. The arrows also show up below the image, so I don’t know why they also show up on the image itself. The arrows on the image in the lightbox don’t even work, only the ones below the image work.

    Anyone know how to disable these or get rd of them?

    Much appreciated.
    (I don’t have a link to the site because it is still in development.)

    DJ

  20. Hello I need to click on the product image in the product list, rather than go to the product page, I want to open the image in lightbox. How do I do that? Thank you.

  21. Hi, I am using Woocommerce 2.0.19 so I am not sure if I should even post this here but if so, does anyone know how to disable the “click event” on the single page product image? So right now my Lightbox is disabled but when I click the image, it opens a new tab with the image inside the window. I want to turn this off completely, so that the user cannot click on anything.

    • Hey Sean, you can make the product images non-clickable by adding the following snippet to the bottom of your theme’s functions.php:

      add_filter( 'woocommerce_single_product_image_html', function( $html, $product_id ) {
      
        if ( has_post_thumbnail() ) {
          $image_title 		= esc_attr( get_the_title( get_post_thumbnail_id() ) );
          $image = get_the_post_thumbnail( $product_id, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
            'title' => $image_title
          ) );
        $html = $image;
        }
      
        return $html;
      } );
      
  22. Hi! I have woocommerce with wootique installed
    I have enabled lightbox for the product pages… but there is a problem I am having! The window opens fine, but then I can’t close it! I click on the “X”, but it doesn’t work… I have to click on the browser’s “back” button to exit (which also takes me to the previous page, not the product page I was on).

    I have tried disabling lightbox (and then of course there is no lightbox effect…), and I tried installing a different lightbox plugin but none has worked.

    any ideas? TIA!
    the site is O Colo da Lua if you want to see what I mean.

    • Hi Heather, not sure why you’re experiencing this, as I was able to use the lightbox normally and exit by clicking “X” or outside of the lightbox area. You could always hit “escape” as well to prevent leaving the page or “refresh”. Possibly an issue with the browser you’re using not being supported by the theme – I was using Chrome and it worked correctly.

  23. Hi all
    Not sure if I am in the right place but I need to add a ‘click to enlarge’ icon to the main featured image on the product page. It opens in to fancy box fine and I get the icons to ‘close’ ‘expand’ etc.

    Thanks in advance

    Matt

    • You could do this with a bit of CSS that displays a custom message when mousing over the image, although the lightbox script that WooCommerce uses might allow you to change the configuration options to do this for you.

  24. Hello everyone,

    I am already using lightbox for gallery view, but I would like to know if it’s possible for the box to draw specific information from a product.
    For example, being on a product page, I want to be able to click on a button and the lightbox to bring some extra information of that product (weight, or anything extra) that is not visible on the page.
    I tried using Javascript for that with no luck. In which direction do you thing I should look?

    Thank you in advance.

  25. Awesome, this saved me some time and adding extra javascript code.

    Kudos! πŸ™‚

Hmm, looks like this article is quite old! Its content may be outdated, so comments are now closed.