WooCommerce可变产品隐藏价格区间后需点击页面才更新如何修复

问题根因 #

• 原脚本绑定的是blur（失焦）事件触发价格更新，该事件仅在用户离开下拉选择框时才会执行
• 移动端选择变体后系统会自动让下拉框失焦，所以功能正常；桌面端选择变体后下拉框仍处于激活状态，必须点击页面其他位置才会触发失焦事件，因此出现延迟更新的问题

修复方案 #

只需要替换原有代码里的JS逻辑即可，无需修改PHP功能部分，具体操作：
找到你现有代码中<script>标签包裹的这段代码：

jQuery(document).ready(function($) {
    $('select').blur( function(){
        if( '' != $('input.variation_id').val() ){
            $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
            console.log($('input.variation_id').val());
        } else {
            $('p.price').html($('div.hidden-variable-price').html());
            if($('p.availability'))
                $('p.availability').remove();
            console.log('NULL');
        }
    });
});

替换为下面的代码即可：

jQuery(document).ready(function($) {
    // 同时绑定变体选择变更事件、WooCommerce原生变体更新事件，覆盖所有场景
    $('.variations_form select').on('change woocommerce_variation_has_changed', function(){
        if( '' != $('input.variation_id').val() ){
            $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
        } else {
            $('p.price').html($('div.hidden-variable-price').html());
            if($('p.availability').length)
                $('p.availability').remove();
        }
    });
});

额外优化说明 #

• 把选择器从全局select改为.variations_form select，避免误触发页面其他无关下拉框的事件
• 新增绑定WooCommerce原生的woocommerce_variation_has_changed事件，适配部分主题用自定义变体选择器（比如颜色、尺码按钮）的场景，兼容性更好
• 去掉了不必要的console.log调试代码，避免控制台输出冗余信息

生效说明 #

修改完成后清理浏览器缓存、WooCommerce站点缓存即可看到效果，桌面端选择变体后价格会立刻更新，无需额外点击页面。

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