WooCommerce product images on the Single Product page get the default Zoom + Lightbox + Photoswipe behavior. This is super helpful when the images are super important for sales conversion, and less helpful in other cases (in fact, here’s a snippet to disable Zoom etc. from the Woo product pages).
Now, the challenge that I had on this same website was that I wanted blog readers to also enjoy the same WooCommerce zoom / lightbox features on blog post images and screenshots. So, without reinventing the wheel, I’m now loading the WooCommerce scripts on pages like this one (single post), and on image click I trigger the lightbox!
You can test the feature by clicking on the image below. Enjoy!
PHP Snippet: Use the WooCommerce Zoom/Lightbox Scripts On Blog Post Images
If a single post is being viewed and the current theme supports the WooCommerce product gallery lightbox, the snippet below adds the necessary scripts and styles to enable the WooCommerce lightbox effect.
Additionally, it enhances the image interaction by adding a click listener for images in the post content. When an image is clicked, it creates a photoswipe gallery, allowing users to view the image in a larger size with options for navigation.
The only thing that you need to change in the script is the image selector. I use .entry-content > .wp-block-image .aligncenter because I want to apply this lightbox script only to images that are in the post body, that are embedded via the block image, and that are center aligned.
So, unless you define the proper selector, this won’t work on your site. Be as specific as possible, otherwise this will trigger on all images including the footer, header, sidebar, etc.
/**
* @snippet Enable Woo Lightbox for post images
* @tutorial Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 8
* @community Join https://businessbloomer.com/club/
*/
// ------------------
// 1. Load scripts on single post
add_action( 'wp_enqueue_scripts', 'bbloomer_load_woo_photoswipe_also_on_posts' );
function bbloomer_load_woo_photoswipe_also_on_posts() {
if ( is_single() ) {
if ( current_theme_supports( 'wc-product-gallery-lightbox' ) ) {
wp_enqueue_script( 'photoswipe-ui-default' );
wp_enqueue_style( 'photoswipe-default-skin' );
add_action( 'wp_footer', 'woocommerce_photoswipe' );
}
}
}
// ------------------
// 2. Trigger lightbox on images
add_action( 'wp_footer', 'bbloomer_photoswipe_click_listener' );
function bbloomer_photoswipe_click_listener() {
if ( ! is_single() ) return;
wc_enqueue_js( "
$('.entry-content > .wp-block-image .aligncenter').hover(function() {
$(this).css('cursor','pointer');
});
$('body').on('click','.entry-content > .wp-block-image .aligncenter',function(e){
var pswpElement = $( '.pswp' )[0],
items = [],
clicked = $(this),
img = clicked.find('img');
if ( ! img.length ) return false;
items.push( {
alt: img.attr( 'alt' ),
src: img.attr( 'src' ),
w: img.prop('naturalWidth'),
h: img.prop('naturalHeight'),
title: clicked.find('figcaption') ? clicked.find('figcaption').text() : false
} );
var options = {
index: $( clicked ).index(),
addCaptionHTMLFn: function( item, captionEl ) {
if ( ! item.title ) {
captionEl.children[0].textContent = '';
return false;
}
captionEl.children[0].textContent = item.title;
return true;
}
};
var photoswipe = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options );
photoswipe.init();
});
");
}
