如上图，产品主图鼠标移至主图内，即鼠标已经悬停在图片上，则触发缩放效果。我不需要这个功能，因为我主图够清晰了不需要放大。那如何取消该功能呢？

涉及该功能的js文件

js文件：woocommerce\assets\js\frontend\single-product.js

代码：

ProductGallery.prototype.initZoomForTarget = function( zoomTarget ) {
	if (!this.zoom_enabled) {
		return false;
	}
    .....
}

其中zoom_enabled变量直接控制缩放功能。只要把这个变量设置为false就可以了。

那么如何修改呢？肯定不能直接修改js文件的，会带来更新冲突和维护困难等问题。

修改zoom_enabled变量为false

其中：zoom_enabled变量来自于wc_single_product_params.zoom_enabled，而wc_single_product_params：这是 WooCommerce 通过 PHP 传递到前端的全局配置对象（通常在页面加载时由 WordPress 的wp_localize_script函数生成）。

那么，既然wc_single_product_params来自php变量，那就直接通过php修改即可，php相关代码：

'zoom_enabled'  => apply_filters( 'woocommerce_single_product_zoom_enabled', get_theme_support( 'wc-product-gallery-zoom' ) )

如上代码，wordpress很贴心地预留了钩子。所以直接通过钩子修改：

// 禁用 产品图片缩放功能
add_filter( 'woocommerce_single_product_zoom_enabled', '__return_false' ); 

修改后，再次查看php输送至前端wc_single_product_params对象：

zoom_enabled为空，即false生效，即禁用产品图片缩放功能生效了。

PHP 变量如何存储至js以实现前后端交互？

刚才禁用产品图片缩放功能，本质就是修改zoom_enabled值。通过php修改，间接实现配置js功能，是wordpress的最佳实践。

其原理：WordPress 通过PHP 后端生成数据，再通过 wp_localize_script() 【具体请见：wordpress源码-使用self::$wp_localize_scripts配合wp_localize_script()以防重复插入】将数据传递到前端 JavaScript，形成前后端数据的桥梁。

以刚才为例：

PHP 端：通过钩子 add_filter( ‘woocommerce_single_product_zoom_enabled’, ‘__return_false’ );设置是否启用缩放功能

JavaScript 端：读取 wc_single_product_params.zoom_enabled 决定是否初始化缩放插件。

woocommerce具体实现如下：

在php文件：woocommerce\includes\class-wc-frontend-scripts.php

private static function localize_script( $handle ) {
    if ( ! in_array( $handle, self::$wp_localize_scripts, true ) && wp_script_is( $handle ) ) {
        $data = self::get_script_data( $handle );
        if ( ! $data ) {
            return;
        }
        $name = str_replace( '-', '_', $handle ) . '_params';
        self::$wp_localize_scripts[] = $handle;
        wp_localize_script( $handle, $name, apply_filters( $name, $data ) );
    }
}

其中$data = self::get_script_data( $handle ); 获取数据：

private static function get_script_data( $handle ) {
    global $wp;
    switch ( $handle ) {
....
        case 'wc-single-product':
            $params = array(
                'i18n_required_rating_text' => esc_attr__('Please select a rating', 'woocommerce'),
.....
                'zoom_enabled' => apply_filters('woocommerce_single_product_zoom_enabled', get_theme_support('wc-product-gallery-zoom')),
                'zoom_options' => apply_filters('woocommerce_single_product_zoom_options', array()),
.....
            );
            break;
.....
    }