WooCommerce is a powerful platform for creating online stores, but the default zoom effect in the product gallery can be inconvenient for users. Instead of zooming in on hover and opening a lightbox by clicking the magnifying glass icon, many prefer to open images in full-screen mode by clicking directly on the image. In this article, we’ll show how to disable the zoom effect and set up full-screen viewing on image click in the WooCommerce gallery using code for your theme.

Why Disable Zoom and Enable Click-to-View?

The zoom effect in the WooCommerce gallery can distract users, especially on mobile devices, and the magnifying glass icon for opening the lightbox isn’t always intuitive. Setting up full-screen image viewing on image click makes the interface more modern and user-friendly, improving the user experience and boosting conversion rates.

Benefits of the Changes:

• Simple full-screen image opening without extra actions.
• Improved UX across all devices.
• Clean and modern gallery design.

How to Disable the Zoom Effect in the WooCommerce Gallery

To remove the zoom effect, add the following code to the functions.php file of your theme:

add_action('after_setup_theme', 'remove_zoom_theme_support', 100);
function remove_zoom_theme_support() {
    remove_theme_support('wc-product-gallery-zoom');
}

Code Explanation:

• add_action('after_setup_theme', ...) — a hook that runs after theme initialization.
• remove_theme_support('wc-product-gallery-zoom') — disables the zoom effect on image hover.
• Priority 100 ensures the code executes after the theme’s functions are loaded.

This code completely removes the image zoom effect on hover.

How to Enable Full-Screen View on Image Click

To activate the lightbox that opens images in full-screen mode when clicking the image (instead of the magnifying glass icon), add the following code to the functions.php file of your theme, for example, “Hello”:

add_action('after_setup_theme', 'hello_setup');
function hello_setup() {
    add_theme_support('wc-product-gallery-lightbox');
}

How It Works:

• add_theme_support('wc-product-gallery-lightbox') — enables the built-in WooCommerce lightbox.
• After adding this code, clicking an image in the product gallery opens it in full-screen mode, replacing the default magnifying glass icon behavior.

Ensure your theme does not override lightbox settings. If the lightbox doesn’t activate, check the theme’s styles and scripts.

Disabling Other Gallery Features (Optional)

If you want to further customize the gallery, you can disable additional features like the slider or lightbox using the following code:

add_action('after_setup_theme', 'disable_gallery_features', 100);
function disable_gallery_features() {
    remove_theme_support('wc-product-gallery-zoom');
    remove_theme_support('wc-product-gallery-lightbox');
    remove_theme_support('wc-product-gallery-slider');
}

When to Use:

• Disabling the slider (wc-product-gallery-slider) removes the image carousel.
• Suitable for creating a fully custom gallery.

Additional Tips for Gallery Customization

1. Theme Check: Ensure your theme is compatible with WooCommerce settings. For testing, you can temporarily switch to a standard theme like Twenty Twenty-Five.
2. Clear Cache: After making changes to functions.php, clear your site’s cache to apply the updates.
3. Mobile Optimization: Verify the gallery’s appearance on mobile devices to ensure usability for all users.
4. Plugins for Simplicity: If you prefer to avoid coding, consider plugins like WooCommerce Additional Variation Images or WooCommerce Customizer.

Troubleshooting Common Issues

• Lightbox Not Opening on Click: Check if lightbox support is enabled in the theme. If the issue persists, consult the theme’s documentation or developer.
• Zoom Effect Not Disabling: Ensure the code is added to the correct functions.php file and the hook priority is high enough.
• Plugin Conflicts: Disable third-party gallery plugins to rule out conflicts.

A Modern Gallery for Your Store

Disabling the zoom effect and enabling full-screen viewing on image click in WooCommerce make the product gallery user-friendly and visually appealing. Use the provided code to easily customize the gallery to meet your needs.