Use a different Lightbox with Woocommerce

Posted by on Apr 20, 2014 in Blog, E-Commerce, Woocommerce | 10 Comments

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.

Added information May 21 2014:

My client did not like the look of the Swipebox option in Responsive lightbox, she wanted something more traditional. In Responsive lightbox that means fancybox or prettyphoto, which is the one we are replacing anyway. I find both of those have performance issues on mobile. So I went with foobox, it is not free but it is rock solid and inexpensive. At the time of writing US$27. http://getfoobox.com/

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.

Tools:

You may edit your PHP outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/

10 Comments

  1. Sanjeev
    December 13, 2015

    Ant,The rel= prettyphoto shulod appear on the links surrounding the images, not the images themselves. Are they appearing there? If so, just check and make sure the PrettyPhoto script is loading after jQuery.You might also want to turn on to see if that gives you any valuable info.

    Reply
  2. Mark
    December 7, 2015

    Hi,
    I did everything you said, but unfortunately it doesn’t seem to work.
    Both the WC lightbox and the PrettyPhoto that comes with the WC Canvas theme are disabled. I have installed responsive Lightbox, but none of the different lightboxes available in there work.
    Below a copy of the code from the functions.php.
    As said I am using Canvas with WooCommerce on WP 4.3.1

    Any help would be greatly appreciated!

    Mark

    // 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 );

    // Add Responsive Lightbox functions.
    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

    Reply
  3. Paulo
    November 26, 2015

    Hello!

    Thank you for this solution.

    In my case, using only the first code (removing woo styles) coupled with the Easy Swipebox (https://wordpress.org/plugins/easy-swipebox/) plugin did the trick without the need for any additional work.

    Reply
  4. NeelieX
    November 23, 2015

    Works great for the storefront theme. Thanks so much for this.

    Reply
  5. Etienne Dupuis
    June 8, 2015

    If you would like to remove the lightbox, and instead load the smaller thumbnails on the larger image, here is my code:

    //Custom Zoom on images
    $(‘.thumbnails a.zoom’).click(function(){
    $thumbnail = $(this).find(‘img.attachment-shop_thumbnail’).attr(‘src’);
    $large = $thumbnail.replace(‘150×100′,’800×533’);
    $(‘img.attachment-shop_single’).attr(‘src’, $large);
    return false;
    });

    //Remove cancel hyperlink on large image
    $(‘.woocommerce-main-image’).click(function(){ return false; });

    It’s a hack, but I though it could be usefull to someone else.

    Reply
  6. Chris
    June 2, 2015

    Thanks 🙂 you saved me an hour of file digging to dequeue the prettyphoto files 🙂

    Reply
  7. tgd
    May 8, 2015

    I can’t thank you enough for this post. I’ve been searching for days for this solution. I absolutely love Responsive Lightbox. I use it everywhere – except for the site that I’ve got Woocommerce installed on. For whatever reason, RL will not work anywhere on the site, even with the WC lightbox disabled. I decided to use WP Lightbox 2 plugin instead, and it works on all pages without issue.
    Thanks for the code and insight.
    tgd.

    Reply
  8. Anshul
    December 16, 2014

    great code….help me alot

    Reply
  9. dB.
    May 14, 2014

    Hello,
    That works perfectly…
    Many Thanks for this!
    dB.

    Reply
    • mgason
      May 21, 2014

      Glad it helped. A little note I changed the lightbox I am using as my client did not like the look of swipebox and I did not like the performance of fancybox. Both fancybox and prettyphoto, which is the one in woocommerce, have performance issues on mobile I think. I implemented foobox in the end. A paid plugin but cheap and solid. Sometimes you get what you pay for. http://getfoobox.com/

      Reply

Leave a Reply