Last active
December 16, 2023 23:15
-
-
Save carasmo/cce84c66dad0135633ef115d2e1b921e 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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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); | |
}); | |
} );" | |
); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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
This is unaffected if you do not add support for the gallery slider and zoom, it works just fine.