Enable prettyPhoto Lightboxes from Woocommerce to the whole WordPress site

Woocommerce is a popular e-commerce plugin for WordPress. It has a prettyPhoto excellent lightbox option for products display. Remember to enable lightbox option for products display in woocommerce plugin settings, otherwise it will not work. When you want to enable that lightbox all over your wordpress site, just add the following code to your child theme functions.php

// LOAD PRETTY PHOTO for the whole site

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' ), $woocommerce->version, 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' );
  }
}

The code will enable updated woocommerce prettyPhoto scripts and CSS throughout your site. So you’ll not need any additional plugins, and lightboxes will have the same consistent style on all of your pages.

To use prettyPhoto lightbox on CMS pages, posts or widgets, just add rel="prettyPhoto" to a link code pointing to full image version. There are more options: to display a title in your lightbox add ligthtbox’s title into the ALT attribute of your thumbnail image. To display a  description in your lightbox add  that description into the TITLE attribute of your link.

Important Update for WooCommerce 2.1.2!

Newest woocommerce and prettyPhoto now use data-rel="prettyPhoto" instead of just rel.
To add rel=prettyPhoto to all images we can use this part of code in functions.php

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

This is tested and works on my sites. You can leave the old rel if it was hardcoded in posts.

Share:
This entry was posted in Templates, WordPress and tagged . Bookmark the permalink.

13 Responses to Enable prettyPhoto Lightboxes from Woocommerce to the whole WordPress site

  1. Marc says:

    I just wanted to load pretty photo on WP galleries, using the wooCommerce instance.

    I used jquery to add the data-rel attribute inside the document ready function along side your original ‘frontend_scripts_include_lightbox’

    $(‘.gallery a’).each(function() {
    $(this).attr(‘data-rel’, ‘prettyPhoto[photo-gallery]’);
    });

    Works like a charm, thx!

  2. Aaron says:

    Hi there,

    Is there a way to add something to the WP galleries in order to allow lightbox to work straight from those?

    The person commenting before seems to have done this, but I am not exactly sure where he put the code.

    Thanks

    • This bit will help with galleries:

      /* add to galleries */
      function prettyphoto_to_gallery ($content) {
      	global $post;
      	$content = preg_replace("/<a/","<a data-rel=\"prettyPhoto[$post->ID]\"",$content,1);
      	return $content;
      } 
      add_filter( 'wp_get_attachment_link', 'prettyphoto_to_gallery');
  3. loic says:

    Is there a ay to make it work witth WordPress WP Photo Album Plus on Nexgen galleries?

  4. Maarten says:

    Iggy, thank you so much!!! I finally found your article after a long time of searching. Cheers!!

  5. Alex says:

    A bit off topic, but how does one make CSS changes to prettyPhoto?

    Right now, I’ve made my changes in woocommerce/assets/css/prettyPhoto.css, but as soon as the next update come around all my changes will be lost.

    Any advice would be immensely appreciated.

  6. Huong says:

    How about showing lightbox on Instagram widget? I tried but it does not work.
    Your help is appreciate
    Thanks

  7. chris says:

    I love you, thank you very much!!

  8. max says:

    chapeau!
    all actions and filters in this article do work on WP 4.7.3 with Woocommerce 2.6.14

  9. Tim says:

    Thank you SO much for your wonderful post! Love you! 🙂

  10. Craig says:

    Any update for WooCommerce 3.0?

Leave a Reply

Your email address will not be published. Required fields are marked *