Use a different Lightbox with Woocommerce

At first it seemed it should be pretty easy to change the lightbox used by Woocommerce to display the product images. Well it was not as simple as I thought so I decided to record the solution in a post for others.

Why would you want to change the lightbox?

Well there are a few main reasons. Firstly you simple may not like the look of it. I also found prettybox, the included one, rather unreliable on touch mobile devices. Lastly the included lightbox works only on your product images, so you need to implement prettybox site wide or you add a plugin for all other images leaving you with two different lightboxes which sucks as far as design consistency.

The solution

You will need to edit some PHP. New to PHP editing? see the Tools note at the end of this post
I was working with the free MyStile theme from Woothemes (v1.3.0) and Woocommerce (v2.1.7) on WordPress 3.9. This solution should work for most themes I believe, although I can not guarantee it.

Child Themes

Now you want to do this in a way that will not be over-written when you update your theme. So if you do not already have one you should setup a child theme. I always do this if I am making any changes to the main theme, even if it is only CSS. That is not the topic of this post so here is a link to a tutorial on creating a child theme, you will find the WordPress codex article here.

A setting

Step 1 is very easy, no code. Go to your WP-Admin area and go to Woocommerce/Settings and on the General tab uncheck ‘Enable Lightbox’. That will turn off the inbuilt Woocommerce lightbox. Like a code nerd I actually worked out how to do that with code, never thinking to look for the handy checkbox supplied by the nice Woocommerce folk! You may find you still have a lightbox running after this as your theme may have added one as well. The MyStile theme also added PrettyBox and that had to be removed. We will get to that.

So you have a child theme setup, now on to the good stuff, you will need to create a functions.php file in your child theme, if you do not already have one. The code below takes care of removing the scripts and css files for prettyBox. There is no point loading them if they are not used. First I create a function to remove them, then the last line runs that function. Take note of the 99 at end of the last line. This is the ‘priority’ of the code. The higher the number the later it runs during the loading of your site, using 99 makes sure that we do not try to remove the scripts and CSS before they have loaded. Normal priority is 10, 99 should do the job. More on priority can be found here.

<?php
/* Remove WooCommerce styles and scripts. */
function woo_remove_lightboxes() {
		
		// Styles
		wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
		
		// Scripts
		wp_dequeue_script( 'prettyPhoto' );
		wp_dequeue_script( 'prettyPhoto-init' );
		wp_dequeue_script( 'fancybox' );
		wp_dequeue_script( 'enable-lightbox' );
}
 
add_action( 'wp_enqueue_scripts', 'woo_remove_lightboxes', 99 );
?>

Close and save the file and add it to your child theme folder. Run your site, you should have no lightbox when you click on the product images on a single product page.

Add a plugin

Now you need a plugin to add a lightbox to your site. What you use is up to you. Each one may need a different implementation. I used ‘Responsive Lightbox’ by dBox which is free and very handily allows you to choose from 5 different lightbox Javascript implementations. Install the plugin and choose a script from the settings page. You can swap these anytime so once you are done with this code just try the various ones out. Make sure in the settings page the default value ‘lightbox’ is displayed in the ‘Selector’ field. The code will attach the lightbox to this in your HTML.

Finish the code

Now right after the previously added code add this. First a function that changes the Selector an the link tag in your sites HTML from the prettyPhoto one added by Woocommerce to the lightbox one as set in the new Responsive Lightbox plugin. Then it adds a filter for both the single product page HTML and the thumbnails that runs our function. Again we use a priority, again 99. You can use the same priority and things will run in the order created. In this case the filters run after we remove the scripts and CSS.

<?php
function df_woocommerce_single_product_image_html($html) {
	$html = str_replace('data-rel="prettyPhoto', 'rel="lightbox', $html);
	return $html;
}
add_filter('woocommerce_single_product_image_html', 'df_woocommerce_single_product_image_html', 99, 1); // single image
add_filter('woocommerce_single_product_image_thumbnail_html', 'df_woocommerce_single_product_image_html', 99, 1); // thumbnails
?>

Save it and put it in your child theme folder. Now you should have the lightbox you chose in the plugin running on your product images and all images on your site. Try each different lightbox available in the plugin and find one you like. There are some other settings for the plugin regarding whether it runs for WordPress galleries, videos and more, so checkout the plugin documentation.