WooCommerce变体商品自定义数量功能异常排查修复求助

问题根源 #

1. 静态数值未实时更新：旧代码中oldValue是初始化时获取的固定值，点击加减按钮时不会读取输入框当前值，切换变体后计算逻辑仍沿用旧值，导致数值错误。
2. 重复绑定事件：每次切换变体触发show_variation时，都会给按钮重新绑定click事件，重复绑定会造成点击一次按钮触发多次逻辑，出现数值跳步。
3. 未同步变体属性：切换变体后，输入框的min/max/step属性会更新，但旧代码只在初始化时读取一次，后续计算用的是旧属性值。

修正后的JS代码 #

function quantityCustom() {
    // 先解绑已有点击事件，避免重复绑定导致多次触发
    jQuery(".quantity .quantity-up, .quantity .quantity-down").off("click");

    jQuery(".quantity").each(function () {
        var quantity = jQuery(this),
            input = quantity.find('input[type="number"]');

        // 加按钮逻辑
        quantity.find(".quantity-up").click(function (e) {
            e.preventDefault();
            // 实时读取当前值及最新属性
            const currentVal = parseFloat(input.val()),
                  min = input.attr("min") !== '' ? Number(input.attr("min")) : 0,
                  max = input.attr("max") !== '' ? Number(input.attr("max")) : 999,
                  step = input.attr("step") !== '' ? Number(input.attr("step")) : 1;

            const newVal = currentVal >= max ? currentVal : currentVal + step;
            input.val(newVal);
            input.trigger("change");
        });

        // 减按钮逻辑
        quantity.find(".quantity-down").click(function (e) {
            e.preventDefault();
            // 实时读取当前值及最新属性
            const currentVal = parseFloat(input.val()),
                  min = input.attr("min") !== '' ? Number(input.attr("min")) : 0,
                  max = input.attr("max") !== '' ? Number(input.attr("max")) : 999,
                  step = input.attr("step") !== '' ? Number(input.attr("step")) : 1;

            const newVal = currentVal <= min ? currentVal : currentVal - step;
            input.val(newVal);
            input.trigger("change");
        });
    });
}

// 页面加载完成后初始化
jQuery(document).ready(function() {
    quantityCustom();
});

// 切换变体时重新初始化
jQuery(document).on('show_variation', function (e, variation) {
    quantityCustom();
});

修正说明 #

• 实时读取参数：把数值和属性的读取逻辑移到点击事件内部，每次操作都获取输入框的当前值和最新min/max/step，适配变体切换后的属性变化。
• 解绑重复事件：每次初始化前先解绑按钮的点击事件，解决重复绑定导致的多次触发问题。
• 兼容步长设置：不再固定加减1，而是读取输入框的step值，符合WooCommerce的数量步长配置。
• 页面初始化调用：确保页面加载完成后就激活数量选择功能，无需等待变体切换。

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