How to disable WooCommerce zoom or lightbox
Learn how to disable WooCommerce zoom or lightbox.
2020-12-14
1. Get an image URL
In this example our product will have an external featured image. So we need an image URL. Here I used Vampixel for the generation of my image, that is stored on a cloud server now with this URL.
2. Install the plugins
We need two plugins here. The first one is Featured Image from URL (FIFU), for external featured images, and the second one is WooCommerce, for e-commerce. To install them, you must access the option "Plugins" in the left side menu of WordPress and then the option "Add New". In the search field, you must enter the name of the plugin, "FIFU" or "WooCommerce", and then just install and activate it.
3. Create a new product
The options "WooCommerce", "Products" and "Featured Image from URL" will now be available in the WordPress side menu. Click on "Products" and then on the "Create Product" button to start creating the product.
4. Add title, featured image and Publish
I am not creating a real product. Then I defined the product title as "How to disable WooCommerce zoom or lightbox" and in the "Image URL or Keywords" field of the "Product image" box, added by FIFU, I pasted the image URL. Finally I clicked on "Publish".
5. Check the product
Here is our published product. It does not have a category, SKU or even price, but it will serve our purpose, which is to show some interesting effects that WooCommerce applies to product images.
6. Zoom working...
If you hover your mouse over the image, you will see the zoom effect. This effect is achieved by using two identical images, one smaller and one larger (original), which replaces the smaller one when the mouse is over it. And because of that, the zoom effect will fail if you have an image whose original size is smaller than the area that the WordPress theme makes available for displaying the product image. So some users prefer to disable the zoom.
7. Lightbox working...
If you click on the icon that appears on the product image, the lightbox will be displayed. In the lightbox the image is displayed in a larger size, making it easier to view the product. However, the lightbox only makes sense if you have a large image to display, right? That's why some users choose to disable the lightbox.
8. Configure FIFU settings
To disable the zoom and/or lightbox of WooCommerce products, you should access the Featured Image from URL (FIFU) settings. Go to the "WooCommerce" tab and you will see the "Lightbox and Zoom" functionality, where there will be two toggles enabled by default. You can disable the first toggle, the second one or both.
9. Check the product (again)
Accessing the product page again, you can see that the icon that opened the lightbox no longer exists. And by hovering or clicking on the image, nothing happens. So everything is working according to the FIFU configuration.
