carasmo/replace-woocommerce-lightbox-with-lightgallery.php

## replace-woocommerce-lightbox-with-lightgallery.php
<?php
//don't add again
// assumes that you have registered your js for the new lightbox and that you understand what a handle is.


// Gallery Support
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-slider' );


add_action( 'after_setup_theme', 'ca_woocommerce_single_product_gallery_support' );
/**
 * Remove Theme Support for WooCommerce Gallery Lightbox in case it was added
 */
function ca_woocommerce_single_product_gallery_support() {
	if ( current_theme_supports( 'wc-product-gallery-lightbox' ) ) :
  		remove_theme_support( 'wc-product-gallery-lightbox' );
	endif;
}

add_filter( 'post_class', 'ca_add_product_classes_based_on_theme_support' );
/**
 * Add product class based on whether or not theme support for gallery zoom and gallery slider are set
 */
function ca_add_product_classes_based_on_theme_support( $classes ) {

    if( ! is_product() ) return $classes;

	if ( current_theme_supports( 'wc-product-gallery-zoom' ) ) :
		$classes[] .= 'product-has-zoom';
	endif;

	if ( current_theme_supports( 'wc-product-gallery-slider' ) ) :
		$classes[] .= 'product-has-gallery-slider';
	endif;

	return $classes;

}

add_action( 'wp_enqueue_scripts', 'ca_replace_photoswipe_with_lightgallery_lightbox_js', 99 );
/**
 * Add Light Gallery JS arguments for WooCommerce Images
 * Assumes that LightGallery is already registered in your plugin or theme
 * https://github.com/sachinchoolur/lightGallery
 * @since 1.0.0
 */
function ca_replace_photoswipe_with_lightgallery_lightbox_js() {

	if( ! is_product() ) return;

	wp_enqueue_script( 'themeprefix-light-gallery' );  //replace with your handle previously registered with its dep(s)

	wp_add_inline_script( 'themeprefix-light-gallery', // same handle so it is loaded correctly

	 	//pay attention to the double ticks on the outer and single on the inner
		"jQuery(document).ready( function() {

		    jQuery( '.woocommerce-product-gallery__wrapper a' ).addClass( 'has-lightbox' ); // this is a class already created for lightbox indicator

	            jQuery( '.woocommerce-product-gallery__wrapper' ).lightGallery({
            	        download: false,
            	        selector: 'a',
            	        getCaptionFromTitleOrAlt: false,
            	        share: false,
            	        fullScreen: false,
            	        autoplay: false,
            	        hash: false,
            	        actualSize: false,
            	        showThumbByDefault: false
        } );


        // get the data-caption from the image and stick it on the closest link
        jQuery('.woocommerce-product-gallery__wrapper img').each(function() {
            var caption = jQuery(this).attr('data-caption');
            jQuery(this).closest('a').attr('data-sub-html', caption);
        });


      } );"
	 );

}


## woolightgallery-replace.css
/* Assumes FontAwesome is registered/enqueued and that your WooCommerce customization CSS is after their CSS, my priority is 100 or thereabouts */


/* LightBox Indicator --------------------------------------------------- */

a.has-lightbox {
	position: relative;
	display: block;
}

a.has-lightbox:before {
	position: absolute;
	top: 5px;
	right: 4px;
	text-align: center;
	display: block;
	width: 30px;
	height: 30px;
	z-index: 100;
	content: '\f065';
	/* change to the icon you want, this is the resize icon */
	font-family: 'FontAwesome';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px;
	line-height: 26px;
	color: #fff;
	background: #8d8d9d;
	border: 2px solid #fff;
	overflow: hidden;
	border-radius: 50%;
	opacity: .7;
}

/* WooCommerce Gallery Image--------------------------------------------------- */

.woocommerce-product-gallery__image {
	position: relative;
}

.product.product-has-zoom .woocommerce-product-gallery__wrapper a {
	display: block;
	position: relative;
	z-index: 100;
	opacity: 1;
}

.product.product-has-zoom .woocommerce-product-gallery__wrapper a img {
	transition: opacity .5s linear;
}

.product.product-has-zoom .woocommerce-product-gallery__wrapper a:hover img {
	opacity: 0;
}