How to Remove the WooCommerce Product Image Lightbox

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

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.

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

How to Hide the WooCommerce Product Image Lightbox with Code

We’re going to walk you through what it takes to remove these lightboxes yourself. It involves some very light development so roll up your sleeves and get ready to learn how WordPress themes work.

Warning! Before getting started we highly recommend you make a complete backup of your site. In case you make a mistake, having a safe copy of your WordPress installation to restore is going to be important.

Create Your Own Child Theme

One should never make changes directly to your WordPress theme. When your theme receives its next update any modifications you made will be lost. Luckily, the developers of WordPress have a solution to this problem.

You need to make something called a child theme. A child theme, as the name suggests, uses the files of its parent (your currently active theme). Once your patent theme is loaded the child theme loads its files and code second. This means any child theme code you write will never be lost to an update the parent theme receives.

There are plenty of online tutorials and guides on how to create your own WordPress child theme for you to use as a starting point. Once you have that all taken care of it is time to actually add some code.

Add Code to Your Child Theme

The most common way to include code in a WordPress theme is through a file called functions.php. Create that file inside of your child theme’s folder and then open it up in any text editor. Copy and paste the following lines of code into the file and then save it.

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

With your code in place it is now time to package your child theme up and get it on your site’s server.

Upload Your Child Theme

The most common way to add a theme to a site is through the WordPress admin itself. Compress your child theme into a .zip file and then head over to the Themes section of the admin. You can find this under the Appearance portion of the menu. From there, add your new theme by uploading it through the interface provided.

Alternatively, if you are feeling ambitious, you can upload your theme directly to the server with FTP. This method is outside of the scope of this tutorial but your hosting provider should have documentation on their website to help.

Zip files? FTP? Is it going over your head a bit? That’s fine. Building child themes and editing files isn’t for everyone. If you’re looking for a faster way to remove the WooCommerce product image lightbox we can help. You should check out our Remove WooCommerce Features plugin for an easier solution.

Activate Your Child Theme

You are ready to go to the final step. Once your child theme has been uploaded head back to the Themes area of the WordPress admin. Your theme should show on the list of choices if everything has gone well. If you don’t see it try and upload the theme again.

When you activate your theme the WooCommerce product image lightbox feature should be disabled from your store. If they still show up, or the entire site is experiencing problems, deactivate your theme immediately. Check your child theme’s code and fix anything that looks incorrect. You’ll have to upload it again afterward to see if your changes solved the problem.

If all has gone well you are finally finished. Of course, this is a lot of back-and-forth for such a seemingly simple task. Thankfully, there’s an easier way.

How to Disable the WooCommerce Product Image Lightbox the Easy Way

Our plugin, Remove WooCommerce Features, comes with the ability to remove the WooCommerce 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 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.

Remove WooCommerce Features Logo