WooCommerce 2.0 comes with prettyPhoto, 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 lightbox 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

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( 'prettyPhoto', $woocommerce->plugin_url() . '/assets/js/prettyPhoto/jquery.prettyPhoto' . $suffix . '.js', array( 'jquery' ), '3.1.5', true );
    wp_enqueue_script( 'prettyPhoto-init', $woocommerce->plugin_url() . '/assets/js/prettyPhoto/jquery.prettyPhoto.init' . $suffix . '.js', array( 'jquery' ), $woocommerce->version, true );
    wp_enqueue_style( 'woocommerce_prettyPhoto_css', $woocommerce->plugin_url() . '/assets/css/prettyPhoto.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 prettyphoto) 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 “prettyPhoto” rel:

<a rel="prettyPhoto" title="My Picture 1" href="/path/to/image1.png"><img src="/path/to/image1.png" /></a>
<a rel="prettyPhoto" 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 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.

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.

27 Comments

  1. Hi Justin,
    I was pleased that I found this post but alas prettyPhoto doesn’t appear to work on my test site.
    I’ve been experimenting with a customised review-order.php template. I’m working towards displaying ‘terms and conditions’ using prettyPhoto with inline

    or iframe.
    For my initial tests however, I’ve used the code for an image (lightbox) as shown in your examples.
    Both the thumbnail image – and when thumbnail is clicked, the ‘lightbox’ image appears but opens in a full browser window – not within the light box.
    The prettyPhoto script is included on this WooCommerce page (jquery.prettyPhoto.js?ver=3.1.4), the WC is version 2.0.10, WC setting ‘Enable Lightbox’ is checked and ‘rel=”prettyPhoto” is included in the url.

    It would be great if you could shed some light on this

    • The only thing I can think of, is perhaps some of the other jQuery libraries aren’t being included? Not really sure though to be honest

  2. Thank you for this. Saved a lot of time.

    You forgot to mentioned the rel=”prettyPhoto[gallery]” which adds navigation between related images. Saw that in your code.

    Thank you again.

    • Yeah, the rel=”prettyPhoto[gallery]” is really only necessary if you want to have more than one independent slideshow on the same page, as opposed to having all the images be in a single slideshow. I didn’t mention that part just to keep the article more simple, and since that part is explained in the prettyPhoto docs as well. Good catch though!

      • Since I’m adding images through the products gallery in WooCommerce, how can I add this rel tag in the code? There’s no field in the image editor to add anything like this, that I can find, and I want navigation or scrolling between the product images. Each image seems to be placed individually, instead of as a gallery, and I’m quite frustrated trying to figure this out, without purchasing yet another expensive add on. Any help would be appreciated, thank you!

        • Hi there! If you’re talking about a product page, then the lightbox will already be enabled for these images and users can scroll through all product images in the lightbox by clicking the left/right arrows once they’ve clicked on one. This tutorial will let you use that lightbox in the same way on other pages or posts.

  3. Hi! I am working on the lightbox as we speak. And I realise that it is not responsive like many other lightbox plugin.

    Could you guide me to where should I replace the current woocommerce lightbox with third party responsive lightbox out there?

    I really don’t wanna mess up the codes but will there be an update in the next version that responsive lightbox to be included?

    I know this will really help many developers and designers. 🙂

  4. Hi,
    I’m programming a payment gateway for Woocommerce and I need show a iframe using lightbox, I read you post but it doesn’t work for me.

    The libraries (of above) are shown correctly when I see the HTML source but when I click in the image, this open in other tab, doesn’t use lightbox.

    I have a test website, the only plugin installed is Woocommerce 2.x, I have used rel=”prettyPhoto[iframes]” and too rel=”prettyPhoto” (with a image), but neither work.

    Note1: My option lightbox in the admin panel is enabled.
    Note2: The payment gateway is PagoEfectivo.

    • From the setup you’re describing the lightbox *should* be working. I’d have to take a look at your test site page to try and diagnose the issue

      • Hi Justin,

        Been reading your blog with great interest and loving your plugins.
        I’m running into the following problem:

        I have a website that uses stock management from our dropshipper. The file we get from the dropshipper is a csv stock file and contains the SKU number and a simpel Y or N to let us know if the product is in stock.

        So we run a cronjob where the sku number gets compared to the products and then shows if the product is in stock or not. But we run into the problem that Woocommerce only accepts the strings “instock” or “outofstock”. Any idea how i can change that?

    • By chance, did you ever find a solution for displaying the iframe in the woo lightbox?

  5. Hi, Thanks for all of your great responses. I’m still hunting for the solution to make a lightbox on the product listing page: (http://agsmarketing.net/jirikalina-wp/?page_id=306) – WC 2.0; Lightbox IS enabled, class=”zoom” and rel=”prettyPhoto[gallery]” are inserted into woocommerce/templates/content-product.php
    <a class="zoom" rel="prettyPhoto[gallery]" href="”>
    Some how I think I need to get the href to point to the image gallery of the product, but I’m new to WC and not really sure how to move forward? Any suggestions would be appreciated. Thanks!

    • Hey Chrissy, well the difficulty here is that the lightbox is really meant for displaying images which are already included on the page, as they are on an individual product page. The gallery photos for every product will *not* be included on the catalog page however, so this would require a bit more customization than I’m really able to provide here. Have you considered posting a job on codeable.io ?

  6. Doesnt work for me… and looking at the headers of pages I’d like this to work on, it looks like the JS isnt being loaded after all, so some test is failing. Would be a great time for PHP to have a step debugger… anyway any thoughts on what would block your code from inserting the JS and CSS statements as planned?

    • hmm, well the approach I would take would be to add some debug statements within the frontend_scripts_include_lightbox() function, to make sure first that the function is being called, and secondly to print out the value of the scripts that we’re trying to enqueue, ie: error_log($woocommerce->plugin_url() . '/assets/js/prettyPhoto/jquery.prettyPhoto' . $suffix . '.js'); and make sure you can request that script from your browser. The only other thing is that these rely on jquery, so if that hasn’t been enqueued then they won’t be included on the page, so you could verify that the main jquery script is being included on the page, and enqueue it as well if not.

  7. You can add this code in order to make it so that all pictures on the site have lightbox:

    /* add rel prettyphoto to all images */
    function autoadd_rel_prettyPhoto($content) {
     global $post;
     $pattern = "/(<a>]*?data-rel=['\"]prettyPhoto.*)[^&gt;]*?href=['\"][^'\"]+?\.(?:bmp|gif|jpg|jpeg|png)['\"][^\&gt;]*)&gt;/i";
     $replacement = '$1 data-rel="prettyPhoto['.$post-&gt;ID.']"&gt;';
     $content = preg_replace($pattern, $replacement, $content);
     return $content;
    }
    add_filter("the_content","autoadd_rel_prettyPhoto");
    

    My next task is to make it so that all photo galleries have this same functionality using the functions.php, but I am struggling to get this to work.

    Any tips?

    Thanks

  8. Hi,

    On my site the lightbox opens in two steps. First it shows the first enlargement. By clicking on the icon in the upper left corner, the image enlarges a second time.

    I would prefer that the image has just one enhancement, and preferably the largest one. And than in just one step.

    Is this possible?

    • Hi Daphne,

      You could try using the following code snippet:

      [code language=”php”]
      function sv_prettyphoto_custom_settings() {
      wc_enqueue_js(‘
      (function($) {

      $("a[data-rel^=\’prettyPhoto\’]").prettyPhoto({
      hook: "data-rel",
      social_tools: false,
      theme: "pp_woocommerce",
      horizontal_padding: 20,
      opacity: 0.8,
      deeplinking: false,
      allow_resize: true, /* Resize the photos bigger than viewport. true/false */
      allow_expand: false /* Allow the user to expand a resized image. true/false */
      });

      })(jQuery);
      ‘);
      }
      add_action( ‘wp_footer’, ‘sv_prettyphoto_custom_settings’ );

  9. Hmmmm. Not a programmer really… Is there any custom CSS for this?

  10. Hi,

    Thanks for your great work and help.

    I am very new to WP and Woo Commerce. I kept single product image of large size and other 2, thumbnail and catalog images small in product settings. Struggling to have light-box on product page for product image sourced by featured image. As I have only one image, and I did set it as featured image, I can’t use only gallery as it’s displaying blank image on product catalogue and product page. As I configured featured image in bigger size then gallery image.
    If I add gallery images, then it get’s displayed in small size below featured image and Lightbox works well if I click on Gallery images, but lightbox doesn’t appear when I click on product image, which is sourced from featured image. How do I make it work?

    I would be very thankful for you help !

  11. Hello,

    This was a perfect and easy solution to open an image from my product page. Thanks!!

    Now, has anyone managed to open a site, in a lightbox, via iframe or other method?

    I have a map search hosted elsewhere that I would like to appear in a lightbox on the product page, much like the photo does.

    Thanks!!

  12. Hello,
    Thanks for the article, very useful!
    However, it didn’t work for me until I added the following image class:

    class=”woocommerce-main-image zoom”

    Hope this is useful to anyone else! 🙂

    Janis

    • I was able to view an iframe in the pretty photo lightbox using the following code:

      <a href="http://www.YOUR_PAGE_OR_SITE_HERE?iframe=true&width=860&height=600" title="THIS_TITLE_APPEARS_IN_THE_LIGHTBOX" rel="nofollow">TITLE_OF_LINK</a>

      I hope this helps! 🙂

      Brandon

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