If you’re looking for a quick way to enhance your WooCommerce product pages by adding a lightbox while disabling the default image zoom option, you’re in the right place! No need to mess around with heavy plugins or complex customizations. With just two small functions added to your functions.php file, you can get this done in minutes.
To implement this solution, all you need to do is add the following two functions to your theme’s functions.php file. This approach is lightweight, effective, and worked perfectly in our WooCommerce setup.
By default, WooCommerce includes a zoom feature for product images, which might not always be the best fit for your store. Here’s how to disable it:
function remove_image_zoom_support() {
remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );
This function ensures the zoom feature is no longer active on your product images.
Next, to add a lightbox effect, simply use the following code:
function add_image_lightbox_support() {
add_theme_support( 'wc-product-gallery-lightbox' );
}
add_action( 'wp', 'add_image_lightbox_support', 100 );
This will activate the lightbox, allowing your customers to click on product images and view them in a larger, modal window.
functions.php file from your current theme.And that’s it! You now have a WooCommerce product gallery with a lightbox, and the image zoom feature is disabled.
If you have any questions or need further assistance, feel free to leave a comment below!
