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.
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!
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');Is there a ay to make it work witth WordPress WP Photo Album Plus on Nexgen galleries?
Iggy, thank you so much!!! I finally found your article after a long time of searching. Cheers!!
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.
How about showing lightbox on Instagram widget? I tried but it does not work.
Your help is appreciate
Thanks
I love you, thank you very much!!
chapeau!
all actions and filters in this article do work on WP 4.7.3 with Woocommerce 2.6.14
yes, i use it on my sites
Thank you SO much for your wonderful post! Love you! 🙂
Any update for WooCommerce 3.0?
It is still working with 3, np.