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.

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

2 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

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">