Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Sanabria/2b9e357ca17ce236833c7a1d7f3f63f9 to your computer and use it in GitHub Desktop.
Save Sanabria/2b9e357ca17ce236833c7a1d7f3f63f9 to your computer and use it in GitHub Desktop.
Replace PhotoSwipe Lightbox in WooCommerce with your own, as long as your own is LightGallery (https://github.com/sachinchoolur/lightGallery). Assumes that you've registered your js. Pardon the formatting, it got weird on me.
<?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);
});
} );"
);
}
/* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment