使用Porto主题时，如何在移动端禁用Variation Images Gallery for WooCommerce缩放

方法1：通过functions.php添加代码实现 #

可以将以下代码添加到子主题的functions.php文件中（用子主题避免主题更新丢失代码）：

add_action( 'wp_footer', 'disable_variation_gallery_zoom_mobile' );
function disable_variation_gallery_zoom_mobile() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        // 检测移动端屏幕断点（可根据Porto主题的移动端断点调整数值）
        if (window.innerWidth <= 767) {
            // 移除插件绑定的缩放事件
            $('.woocommerce-product-gallery').off('click');
            // 移除缩放相关类名
            $('.woocommerce-product-gallery__image').removeClass('zoom');
            // 阻止图片点击的默认缩放行为
            $('.woocommerce-product-gallery__image').on('click', function(e) {
                e.preventDefault();
            });
        }
    });
    </script>
    <?php
}

这段代码会在页面底部加载JS逻辑，当屏幕宽度≤767px（Porto主题默认移动端断点）时，直接取消插件的缩放绑定与触发逻辑。

方法2：配合CSS强化禁用效果 #

如果JS仍有遗漏，可添加以下CSS到主题自定义CSS面板：

@media (max-width: 767px) {
    .woocommerce-product-gallery__image.zoom {
        pointer-events: none;
        cursor: default;
    }
}

通过CSS在移动端直接屏蔽缩放图片的点击交互，进一步确保缩放功能无法触发。

补充说明 #

• 优先使用子主题修改代码，避免主题更新导致代码丢失；
• 你之前关闭插件缩放后其他缩放插件失效，是因为Variation Images Gallery插件修改了WooCommerce商品图库的DOM结构，导致第三方插件无法识别目标元素。上述方案无需关闭插件缩放，直接在移动端禁用其功能，可保留插件其他特性同时解决问题。

内容的提问来源于stack exchange，提问作者ZeldaG