How to Remove the Lightbox from WooCommerce Product Images

A lightbox, in website terms, is a method of displaying images (and occasionally videos) to a user in a way that draws attention to the image. This is typically done by showing the image in the center of the screen and dimming or darkening the background around it. There is usually navigation added as well to allow the viewer to go back and forth between images in a set without having to exit the lightbox.

WooCommerce comes with this kind of lightbox by default and applies it to all of the images on your product pages. This is great if you have multiple photos or explanatory images you want shown with your products. It’s not so great if your products only have one image and the use of a lightbox just adds confusion and unnecessary extra overheard to your storefront.

Product Image Lightbox in WooCommerce
An example of a Product Image Lightbox in WooCommerce

Anyone interested in disabling the lightbox from their store has two options. You can either do some light modification to your WooCommerce theme or install our plugin and get this done without having to write any code, modify any files or worry about finding a good WordPress developer to do all of that for you.

How to Disable the Product Image Lightbox with Code

Removing the product image lightbox from a WooCommerce theme is actually pretty easy if you are comfortable with editing some files on your site’s server. You just need to add the one line of code to the functions.php file found in your theme’s directory.

add_action( 'init', 'my_remove_lightbox' );
function my_remove_lightbox() {
    remove_theme_support( 'wc-product-gallery-lightbox' );
}

On the scale of programming tasks required to maintain a WordPress site this is pretty low on the difficulty end. Of course, editing and uploading files isn’t for everyone and you might want to consider hiring a WooCommerce developer or WordPress freelancer to assist you in making this change to ensure you don’t break your site accidentally.

It’s also worth pointing out that changes you make to your functions.php file are not guaranteed to be permanent. As soon as the theme you are using receives an updated, or you replace the theme entirely with something new, you’ll need to make this addition to the functions.php file again to restore your setting of removing the image lightbox.

How to Remove the Product Image Lightbox from WooCommerce the Easiest Way

Our plugin, Remove WooCommerce Features, comes with the ability to remove the product image lightbox from your site with just the click of a few buttons. After you purchase, install and activate your plugin you are three fast steps away from achieving your goal:

Step #1

Go to the WooCommerce section of your WordPress installation’s admin menu and click the link that says “Remove Features.”

WooCommerce Admin Menu

Step #2

Find the setting for “Product Image Lightbox” and click the checkbox so that it’s marked like so:

Remove WooCommerce Features - Product Image Lightbox

Step #3

Press the “Save Settings” button.

Save Settings Button

Your store will immediately stop using the lightbox feature as soon as you’ve saved your settings inside of the Remove WooCommerce Features plugin. To make this even better, no matter what theme you use today or tomorrow and no matter how often that theme is updated your choice to remove the lightbox will always be recognized. Remove WooCommerce Features works outside of your theme and doesn’t care about any changes you make to it.

Our plugin does a lot more than just disable the product image lightbox though. You can use it to take care of all sorts of irritating parts of WooCommerce. It lets you:

You can find the whole list of things Remove WooCommerce Features covers here on our site.