Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Display a lightbox of the product catalog image, rather than linking to the product page. Drop this code snippet into the bottom of your theme's functions.php file. Implementation note: at line 25 we're stripping the image dimensions out of the original image source in order to try and display the full sized image. So if the catalog thumbnail is…
<?php
// Code to display catalog images in a lightbox follows:
add_action( 'wp_enqueue_scripts', 'frontend_scripts_include_lightbox' );
function frontend_scripts_include_lightbox() {
global $woocommerce;
if ( is_shop() || is_product_category() ) {
$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
$lightbox_en = get_option( 'woocommerce_enable_lightbox' ) == 'yes' ? true : false;
if ( $lightbox_en ) {
wp_enqueue_script( 'prettyPhoto', $woocommerce->plugin_url() . '/assets/js/prettyPhoto/jquery.prettyPhoto' . $suffix . '.js', array( 'jquery' ), '3.1.5', true );
wp_enqueue_script( 'prettyPhoto-init', $woocommerce->plugin_url() . '/assets/js/prettyPhoto/jquery.prettyPhoto.init' . $suffix . '.js', array( 'jquery' ), $woocommerce->version, true );
wp_enqueue_style( 'woocommerce_prettyPhoto_css', $woocommerce->plugin_url() . '/assets/css/prettyPhoto.css' );
}
ob_start();
?>
$( 'ul.products li a:not(.button)').each( function() {
var src = $( this ).find( 'img' ).attr( 'src' );
$( this ).attr( 'href', src.substr( 0, src.lastIndexOf( '-' ) ) + src.substr( src.lastIndexOf( '.' ) ) );
});
$('ul.products li a:not(.add_to_cart_button)').prettyPhoto();
<?php
$javascript = ob_get_clean();
$woocommerce->add_inline_js( $javascript );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.