Replace prettyPhoto with fancyBox in Woocommerce 2.x

I’ve been trying to get the prettyPhoto plugin to behave properly with the Cloudzoom plugin from StarPlugins for the past day or two and I have finally gotten sick of trying to get it to work. The following error kept showing up and the lightbox would get stuck with the loader ajax icon:

Uncaught TypeError: Cannot call method 'match' of undefined jquery.prettyPhoto.min.js:6

Finally I decided to disable it and replace it with fancyBox. For those who are looking to do the same, all you have to do is paste the following in your functions.php file:

//Remove prettyPhoto lightbox
add_action( 'wp_enqueue_scripts', 'fc_remove_woo_lightbox', 99 );
function fc_remove_woo_lightbox() {
    remove_action( 'wp_head', array( $GLOBALS['woocommerce'], 'generator' ) );
        wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
        wp_dequeue_script( 'prettyPhoto' );
        wp_dequeue_script( 'prettyPhoto-init' );
}

//Add fancyBox lightbox
add_action( 'wp_enqueue_scripts', 'fc_add_fancybox' );
function fc_add_fancybox() {
    wp_enqueue_script( 'fancybox', get_stylesheet_directory_uri() . '/js/fancybox/jquery.fancybox.pack.js', false );
    wp_enqueue_style( 'fancybox-style', get_stylesheet_directory_uri() . '/js/fancybox/jquery.fancybox.css' ); 
}

That’s it, your lightbox should now be compatible with the great Cloudzoom plugin.

Psst, make sure your URLs are relative to your theme path after you upload the fancybox to your theme folder.

Trajche Kralev