如何在Woocommerce结账页实现AJAX应用优惠券码无需刷新页面

前置说明 #

你已经完成优惠券表单迁移到review-order.php的前提下，可直接复用 Woocommerce 原生内置的 AJAX 接口实现无刷新操作，无需额外开发后端处理逻辑。

实现步骤 #

1. 前端事件绑定 #

• 给迁移后的优惠券提交按钮绑定click事件，阻止默认表单提交跳转行为
• 对用户输入的优惠券码做基础非空、长度校验，过滤无效请求
• 构造 POST 请求发送到 Woocommerce 原生 AJAX 接口wc-ajax=apply_coupon，请求参数需包含：
  • coupon_code：用户输入的优惠券编码
  • woocommerce-checkout-nonce：结算页自带的非对称校验字段，避免跨站请求伪造攻击
• 请求发送期间给按钮添加加载中状态，禁止重复点击

2. 请求回调处理 #

• 接口返回后先判断操作状态：
  • 操作成功：触发 Woocommerce 原生update_checkout事件，结算页的订单金额、优惠明细模块会自动刷新渲染，清空优惠券输入框，给用户展示优惠券应用成功的提示即可
  • 操作失败：直接将接口返回的错误信息（优惠券过期、不满足使用门槛、已使用过等）渲染到表单上方的提示区域即可

不需要修改原生优惠券的校验、计算逻辑，复用系统自带能力即可，避免后续 Woocommerce 版本升级出现兼容问题

3. 配套操作兼容 #

• 绑定优惠券删除操作的事件，复用原生wc-ajax=remove_coupon接口完成删除，操作成功后同样触发update_checkout刷新订单模块
• 建议给优惠券表单外层添加woocommerce-form-coupon类名，和购物车页表单类保持一致，大部分主题自带的样式、交互逻辑可以直接复用
• 可根据需要自行添加输入防抖逻辑，减少用户连续输入触发的无效请求

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