如何在WooCommerce的「Order comments」字段为不同产品变体添加自动消息

核心逻辑是监听变体选择动作，匹配提前预设的变体-备注映射关系，将对应内容自动写入订单备注字段，具体实现步骤如下： #

前置准备：配置变体与备注映射表 #

首先给每个变体匹配唯一可识别的标识（推荐用变体ID、SKU，不推荐用可变的变体名称），构建键值对映射表，示例结构：

// 键为变体唯一标识，值为对应要填充的预设备注
const variantCommentMap = {
  "variant_A_SKU": "XXXXX",
  "variant_B_SKU": "YYYYYYY",
  "variant_C_SKU": "ZZZZZZZ",
  "variant_D_SKU": "AAAAAAA",
  "variant_E_SKU": "BBBBBBB"
}

前端实现（通用原生JS方案） #

适合所有自建站、低代码建站平台的自定义代码场景：

// 1. 获取页面元素，括号内的选择器替换为你站点实际的元素选择器
const variantPicker = document.querySelector('select[name="product_variant"]'); // 变体选择器元素
const orderCommentField = document.querySelector('textarea[name="order_note"]'); // Order comments字段元素

// 2. 监听变体切换事件
variantPicker.addEventListener('change', function(e) {
  const selectedVariantId = e.target.value;
  // 匹配对应备注，无匹配时默认清空字段，可按需修改默认值
  const matchedComment = variantCommentMap[selectedVariantId] || "";
  // 写入备注字段，若需要保留用户原有输入可改成 orderCommentField.value += matchedComment
  orderCommentField.value = matchedComment;
})

特定平台适配（Shopify场景） #

Shopify产品页会在变体切换时触发全局product:selected事件，可直接监听该事件获取选中变体信息：

document.addEventListener('product:selected', function(e) {
  const currentVariant = e.detail.variant;
  const matchedComment = variantCommentMap[currentVariant.id] || "";
  // Shopify默认订单备注字段的name属性为note
  document.querySelector('textarea[name="note"]').value = matchedComment;
})

可选：后端校验补充 #

若需要避免前端篡改导致的备注不匹配，可在订单提交接口增加校验逻辑：

• 接收订单提交的变体ID、用户填写的备注内容
• 比对预设的映射表，若内容不匹配，自动覆盖为对应变体的预设备注后再写入订单数据

注意事项 #

• 若允许用户修改自动填充的备注，无需给字段加readonly属性
• 映射表的键尽量使用不可变的ID/SKU，避免后续修改变体名称导致映射失效
• 若多个变体对应同一条备注，给映射表中不同的键设置相同的value即可

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