本文详解如何在 WooCommerce 中通过 data-quantity 属性为批量或单个商品的“加入购物车”按钮精准设置数量，避免 quantity 参数被忽略的问题，并提供可直接复用的代码示例与关键注意事项。
本文详解如何在 woocommerce 中通过 `data-quantity` 属性为批量或单个商品的“加入购物车”按钮精准设置数量，避免 `quantity` 参数被忽略的问题，并提供可直接复用的代码示例与关键注意事项。
在 WooCommerce 默认机制中，仅在
✅ 正确做法：使用 data-quantity 属性声明数量，value 仅保留商品 ID（单个）或逗号分隔的 ID 列表（批量）。该属性会被 WooCommerce 前端脚本自动捕获，并在 AJAX 请求中正确构造 quantity[] 数组。
✅ 单商品添加（指定数量）
<button type="submit" name="add-to-cart" value="332" class="single_add_to_cart_button button alt" data-quantity="5"> Add 5 units of Product #332 </button>
✅ 批量添加（不同商品 + 不同数量）
WooCommerce 原生支持多商品一次性加入购物车，但需配合 data-quantity 传入数组格式（注意：必须是 JSON 数组字符串）：
<button type="submit" name="add-to-cart" value="335,338,339" class="single_add_to_cart_button button alt" data-quantity="[3,2,1]"> Add Bundle (3×#335, 2×#338, 1×#339) </button>
⚠️ 关键细节：data-quantity 的值必须是合法 JSON 数组（如 [3,2,1]），且元素顺序需严格对应 value 中商品 ID 的顺序（即第1个数量对应第1个ID）。若格式错误（如 [3,2,"1"] 或 3,2,1），将回退至默认数量 1。
? 高级提示：确保功能生效的前提条件
- 启用 AJAX 加入购物车：请确认主题或插件未禁用 woocommerce_enable_ajax_add_to_cart（可通过 add_filter('woocommerce_enable_ajax_add_to_cart', '__return_true'); 强制启用）；
- 不要移除或覆盖默认 JS：确保 wc-add-to-cart.js 已正确加载（检查浏览器控制台无 404 或报错）；
- 避免混淆 name="add-to-cart" 的语义：该按钮仅适用于前台商品页/循环列表；若用于自定义表单，请改用 woocommerce_add_to_cart_redirect 过滤器或 WC()->cart->add_to_cart() 手动处理。
✅ 替代方案（不依赖 JS）：使用链接（ 标签）
如需完全规避 JS 依赖，可采用带查询参数的链接方式（服务端直跳）：
<a href="?add-to-cart=332&quantity=7" class="button add_to_cart_button">Add 7 × Product #332</a>
此方式无需 JS 支持，但会触发页面刷新，体验略逊于 AJAX 方式。
总之，data-quantity 是 WooCommerce 官方推荐且健壮的前端数量传递机制。合理运用它，既能保持代码简洁性，又能确保与核心逻辑完全兼容。
