WooCommerce自定义价格字段加千位分隔符后加购数值异常

问题描述 #

• 需求：为WooCommerce商品页面自定义输入字段添加千位分隔符格式化展示
• 异常现象：现有代码输入时格式化展示正常，但商品加入购物车时仅能读取到数字的首个片段，例如输入5,000,000时，仅数字5会被提交到购物车

原有实现代码 #

JavaScript逻辑 #

jQuery(document).ready(function () {
  jQuery(document).on('input', '.number-separator', function (e) {
    if (/^[0-9.,]+$/.test(jQuery(this).val())) {
      jQuery(this).val(
        parseFloat(jQuery(this).val().replace(/,/g, '')).toLocaleString('en')
      );
    } else {
      jQuery(this).val(
        jQuery(this)
          .val()
          .substring(0, jQuery(this).val().length - 1)
      );
    }
  });
});

字段HTML #

<input type="text" name="tmcp_textfield_6" class="number-separator" value="" >

注：WooCommerce默认已加载jQuery依赖，无需额外引入jQuery脚本，避免重复加载引发冲突

问题根因 #

WooCommerce及配套的Extra Product Options类插件，会默认将输入值中的逗号识别为多选项分隔符，提交时直接按逗号切割字符串，仅取第一个片段传入购物车逻辑，因此带千位逗号的格式化值会被截断。

修复方案 #

核心逻辑：将用户可见的千位分隔符展示值，与实际提交给后端的纯数字值做隔离，提交表单时临时替换为无分隔符的原始数字，提交完成后恢复格式化展示即可，无需修改字段原有结构。
修复后可直接使用的JS代码：

jQuery(document).ready(function () {
  // 输入时实时生成千位分隔符展示，同时缓存原始纯数字值
  jQuery(document).on('input', '.number-separator', function (e) {
    const pureValue = jQuery(this).val().replace(/,/g, '');
    if (/^\d*\.?\d*$/.test(pureValue)) {
      jQuery(this).attr('data-raw-value', pureValue);
      const showVal = pureValue ? parseFloat(pureValue).toLocaleString('en') : '';
      jQuery(this).val(showVal);
      return;
    }
    // 输入非数字/小数点时，回退到上一位有效值
    jQuery(this).val(jQuery(this).val().slice(0, -1));
  });

  // 表单提交前，将字段值替换为无分隔符的原始数字
  jQuery(document).on('submit', 'form.cart', function () {
    jQuery(this).find('.number-separator').each(function () {
      const rawVal = jQuery(this).attr('data-raw-value') || jQuery(this).val().replace(/,/g, '');
      jQuery(this).val(rawVal);
    });
  });

  // 适配异步加购场景，加购完成后恢复千位分隔符展示
  jQuery(document).on('added_to_cart', function () {
    jQuery('.number-separator').each(function () {
      const rawVal = jQuery(this).attr('data-raw-value') || '';
      const showVal = rawVal ? parseFloat(rawVal).toLocaleString('en') : '';
      jQuery(this).val(showVal);
    });
  });
});

兼容说明 #

• 同步提交加购、异步无刷新加购场景均已适配
• 自动过滤非数字、非小数点的非法输入
• 保留原有字段的name、class属性，无需修改WooCommerce原有表单结构

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