WooCommerce product pages typically allow shoppers to click the main product image to open a larger version in a full-screen lightbox. While this feature can be useful for many online stores, some WooCommerce website owners may prefer to keep product images static and prevent customers from opening an enlarged image.
The good news is that you can disable clicking on WooCommerce product images with a simple CSS snippet, without modifying WooCommerce core files.
Why Disable Click-to-Enlarge Product Images in WooCommerce?
By default, many WooCommerce themes make product gallery images clickable. Clicking an image can launch a lightbox or enlarged gallery view.
You may want to disable this functionality if:
- Your product images are already displayed at a sufficient size.
- You don’t want customers opening a full-screen product gallery.
- Your theme’s lightbox interferes with other product customization features.
- You want a cleaner and simpler product page experience.
- Your enlarged images don’t provide any additional detail.
- You want the product image to remain visible but completely non-clickable.
Fortunately, CSS provides an easy solution.
CSS to Disable Clicking on WooCommerce Product Images
Add the following CSS to your WordPress website:
.single-product .woocommerce-product-gallery__image a {
pointer-events: none !important;
cursor: default !important;
}This code prevents the product gallery image link from responding when a visitor clicks it.
The image itself will continue to display normally.
How the CSS Works
The first property is:
pointer-events: none !important;This tells the browser to ignore mouse and pointer interactions with the image’s link. As a result, clicking the product image will no longer open the WooCommerce lightbox or enlarged image.
The second property is:
cursor: default !important;This changes the mouse cursor back to the standard cursor instead of displaying the hand or pointer normally associated with a clickable link.
Together, these properties make the WooCommerce product image behave like a standard, non-clickable image.
Where to Add the CSS in WordPress
Depending on your WordPress theme and setup, you can add the code through your theme’s custom CSS area.
Go to:
WordPress Dashboard → Appearance → Customize → Additional CSS
Then paste:
.single-product .woocommerce-product-gallery__image a {
pointer-events: none !important;
cursor: default !important;
}Publish or save your changes.
If your theme doesn’t provide the WordPress Customizer, check the theme’s settings for an Additional CSS, Custom CSS, or similar option.
Does This Remove the WooCommerce Product Image?
No. The product image remains displayed on the product page.
The CSS only prevents the link surrounding the image from receiving clicks. Customers can still see the product image and, depending on your gallery configuration, may still be able to browse additional product images.
Does This Require Editing functions.php?
Not necessarily.
WooCommerce’s lightbox functionality can also be disabled programmatically by removing theme support for the product gallery lightbox. However, if the goal is simply to make the product image completely non-clickable, CSS can be the simpler solution.
It also avoids making PHP modifications to your WordPress theme.
What If the Product Image Is Still Clickable?
After adding the CSS, clear any caching being used by your website.
This could include:
- WordPress caching plugins
- Server-side caching
- CDN caching
- Browser cache
- CSS optimization or minification caches
Then reload the WooCommerce product page and test the main image again.
If your theme uses a custom WooCommerce gallery instead of the standard WooCommerce markup, the CSS selector may need to be adjusted.
Final Thoughts
Disabling the click-to-enlarge functionality on WooCommerce product images can be accomplished with just a few lines of CSS:
.single-product .woocommerce-product-gallery__image a {
pointer-events: none !important;
cursor: default !important;
}This approach is especially useful when you want to disable the WooCommerce product image lightbox, prevent product images from opening larger, or make WooCommerce gallery images non-clickable without modifying PHP or WooCommerce core files.