WooCommerce 结账页优惠券表单位置调整教程

理解 WooCommerce 优惠券表单的工作原理

在 WooCommerce 中，优惠券表单的显示和功能实现依赖于其内部的 woocommerce_checkout_coupon_form() 函数。这个函数不仅负责输出 HTML 结构，还与 WooCommerce 的 JavaScript 和 PHP 后端逻辑紧密结合，处理优惠券码的提交、验证和应用。

许多开发者在尝试自定义优惠券表单位置时，可能会选择手动编写 HTML <form> 结构。然而，仅仅创建表单的 HTML 结构并不能保证其功能正常运作，因为缺少了 WooCommerce 核心的提交处理逻辑。原始问题中自定义的表单虽然显示，但无法发送 POST 请求，正是由于它脱离了 WooCommerce 预设的表单处理机制。因此，最佳实践是利用 WooCommerce 提供的现有功能，通过调整其显示位置来达到目的。

默认优惠券表单位置及调整需求

WooCommerce 默认情况下会将优惠券表单显示在结账页面的顶部，通常是通过 woocommerce_before_checkout_form 钩子来挂载。然而，在某些设计或用户体验场景下，将优惠券输入框放置在订单详情或支付选项附近可能更为合理，以引导用户在确认订单前或支付前使用优惠券。

解决方案：重定位优惠券表单

要将优惠券表单从默认位置移动到结账页面的其他部分，核心思路是：首先移除其在默认钩子上的动作，然后将其重新添加到目标位置的钩子上。

1. 移除默认位置的优惠券表单

WooCommerce 通过 woocommerce_checkout_coupon_form 函数在 woocommerce_before_checkout_form 钩子上以优先级 10 注册了优惠券表单。要移除它，可以使用 remove_action() 函数：

remove_action('woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10);

这段代码告诉 WooCommerce，不再在结账表单加载之前显示优惠券表单。

2. 添加至新位置

移除默认位置后，我们需要将 woocommerce_checkout_coupon_form 函数重新挂载到我们希望显示优惠券表单的新位置。WooCommerce 提供了多个钩子点，可以根据具体需求选择。一个常见的需求是将其放置在订单详情（Order Review）部分之后，支付选项之前。woocommerce_checkout_order_review 钩子是一个理想的选择，其优先级可以控制在订单详情的哪一部分显示。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

add_action('woocommerce_checkout_order_review', 'woocommerce_checkout_coupon_form', 5);

这里，我们将 woocommerce_checkout_coupon_form 函数添加到 woocommerce_checkout_order_review 钩子上，并设置优先级为 5。这个优先级通常意味着它会在订单详情的其他元素（例如订单表格）之前或之后显示，具体取决于其他元素的优先级。通过调整优先级，可以微调其在目标区域内的具体位置。

3. 选择合适的钩子

除了 woocommerce_checkout_order_review，WooCommerce 还有许多其他钩子可以在结账页面使用，例如：

• woocommerce_checkout_after_order_review: 在订单详情部分完全加载之后。
• woocommerce_before_checkout_billing_form: 在账单地址表单之前。
• woocommerce_after_checkout_billing_form: 在账单地址表单之后。
• woocommerce_before_checkout_shipping_form: 在配送地址表单之前。
• woocommerce_after_checkout_shipping_form: 在配送地址表单之后。
• woocommerce_review_order_after_submit: 在订单提交按钮之后。

您可以根据页面布局和用户体验需求，测试不同的钩子以找到最适合的位置。

完整代码示例

将以下代码添加到您主题的 functions.php 文件中，强烈建议使用子主题的 functions.php 文件，以避免主题更新时代码被覆盖：

<?php
/**
 * WooCommerce 结账页优惠券表单位置调整
 * 将优惠券表单从结账页顶部移动到订单详情下方
 */

// 移除默认位置的优惠券表单
remove_action('woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10);

// 将优惠券表单添加到订单详情部分之后
// 优先级 5 确保它在订单总览区域的合适位置显示
add_action('woocommerce_checkout_order_review', 'woocommerce_checkout_coupon_form', 5);

?>

注意事项

1. 使用子主题： 务必将代码添加到您网站的子主题（Child Theme）的 functions.php 文件中。直接修改父主题的文件会在主题更新时丢失您的更改。
2. 测试： 在部署到生产环境之前，务必在开发或测试环境中彻底测试更改。检查优惠券表单是否显示在正确的位置，并且功能（输入、应用、移除优惠券）是否正常。
3. 优先级： add_action 函数中的第三个参数是优先级。通过调整这个值，您可以微调优惠券表单在目标钩子点内部的精确位置。较低的数字表示较高的优先级（更早执行）。
4. 避免自定义表单： 除非您对 WooCommerce 的内部机制非常了解，并能自行处理表单的提交和验证逻辑，否则请避免创建自定义的优惠券 HTML 表单。使用 woocommerce_checkout_coupon_form 函数可以确保表单功能与 WooCommerce 核心保持一致。

总结

通过简单地利用 WooCommerce 的 remove_action() 和 add_action() 函数，我们可以高效且安全地调整结账页面上优惠券表单的位置。这种方法利用了 WooCommerce 自身的强大功能，避免了手动编写复杂逻辑的需要，确保了表单的稳定性和兼容性。正确实施此方法将有助于优化结账流程，提升用户满意度。

以上就是WooCommerce 结账页优惠券表单位置调整教程的详细内容，更多请关注php中文网其它相关文章！