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

本教程详细介绍了如何在 WooCommerce 结账页面调整优惠券表单的显示位置。通过利用 WooCommerce 提供的动作钩子（Action Hooks），您可以灵活地将优惠券表单从默认位置移除，并重新添加到结账流程中的任何指定位置，确保表单功能正常且用户体验优化，避免自定义表单可能导致的提交问题。

在 WooCommerce 中，优惠券表单默认显示在结账页面的顶部。有时，为了优化用户体验或适应特定的设计需求，我们可能需要将其移动到页面的其他位置，例如订单概览下方或提交订单按钮附近。直接通过自定义 HTML 和 PHP 代码尝试重新构建优惠券表单可能会导致其提交逻辑失效，因为 WooCommerce 对其内置的表单有特定的处理机制。解决此问题的最佳实践是利用 WooCommerce 强大的动作钩子（Action Hooks）系统。

理解 WooCommerce 动作钩子

WooCommerce 在其核心代码中预设了大量的“钩子”，允许开发者在特定事件发生时或特定位置插入或移除自定义功能。对于调整优惠券表单位置，我们将主要使用以下两个函数：

• remove_action()：用于从某个钩子上移除已附加的函数。
• add_action()：用于将一个函数附加到指定的钩子上。

WooCommerce 默认的优惠券表单是通过 woocommerce_checkout_coupon_form 函数在 woocommerce_before_checkout_form 钩子上显示的。因此，要移动它，我们需要先将其从默认位置移除，然后将其重新添加到我们希望显示的新位置。

调整优惠券表单位置的步骤

以下是实现优惠券表单位置调整的具体步骤和代码示例。所有代码都应放置在您WordPress主题的子主题（Child Theme）的 functions.php 文件中。

步骤一：移除默认位置的优惠券表单

WooCommerce 默认将优惠券表单放置在结账表单的顶部。我们需要使用 remove_action() 函数来解除这个默认的关联。

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

这段代码的含义是：从 woocommerce_before_checkout_form 这个钩子上，移除优先级为 10 的 woocommerce_checkout_coupon_form 函数。

步骤二：在指定位置重新添加优惠券表单

移除默认位置后，我们就可以使用 add_action() 函数将 woocommerce_checkout_coupon_form 函数重新附加到我们希望显示表单的新钩子上。WooCommerce 提供了许多钩子，您可以根据实际需求选择最合适的。

以下是一些常用的钩子示例及其对应的位置：

• woocommerce_checkout_order_review：在订单概览区域内（通常在订单详情上方或下方）。
• woocommerce_before_checkout_billing_form：在账单信息表单之前。
• woocommerce_after_order_notes：在订单备注区域之后。
• woocommerce_review_order_after_submit：在提交订单按钮之后。
• woocommerce_after_checkout_form：在整个结账表单的末尾。

示例：将优惠券表单移动到订单概览区域

如果您想将优惠券表单放置在订单概览区域（通常是结账页右侧的订单详情块），可以使用 woocommerce_checkout_order_review 钩子。

// 在订单概览区域重新添加优惠券表单
// 优先级设置为 5，确保其在订单概览内容之前或之后合适的位置
add_action('woocommerce_checkout_order_review', 'woocommerce_checkout_coupon_form', 5);

完整代码示例

将上述移除和添加的代码整合到您的子主题 functions.php 文件中。为了确保这些操作在 WooCommerce 完全加载后执行，建议将它们包装在一个 wp_loaded 动作中。

<?php
/**
 * WooCommerce 结账页优惠券表单位置调整
 * 将优惠券表单从默认位置移动到结账页面的指定位置
 */
function custom_move_checkout_coupon_form() {
    // 步骤一：移除默认位置的优惠券表单
    // 默认优惠券表单通过 'woocommerce_checkout_coupon_form' 函数在 'woocommerce_before_checkout_form' 钩子上显示。
    remove_action('woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10);

    // 步骤二：在指定位置重新添加优惠券表单
    // 以下示例将其添加到订单概览区域（通常是右侧的订单详情块）。
    // 您可以根据需求替换 'woocommerce_checkout_order_review' 为其他钩子。
    add_action('woocommerce_checkout_order_review', 'woocommerce_checkout_coupon_form', 5);

    // 其他常用钩子示例（可根据需要选择其中一个）：
    // add_action('woocommerce_before_checkout_billing_form', 'woocommerce_checkout_coupon_form', 10); // 账单信息之前
    // add_action('woocommerce_after_order_notes', 'woocommerce_checkout_coupon_form', 10); // 订单备注之后
    // add_action('woocommerce_review_order_after_submit', 'woocommerce_checkout_coupon_form', 10); // 提交订单按钮之后
    // add_action('woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form', 10); // 整个结账表单的末尾
}
add_action('wp_loaded', 'custom_move_checkout_coupon_form'); // 确保在 WordPress 和 WooCommerce 完全加载后执行

注意事项

1. 使用子主题（Child Theme）：所有的代码修改都应该在您当前主题的子主题中进行。这可以确保在主题更新时您的定制代码不会被覆盖，从而保证网站的稳定性和可持续性。
2. 理解钩子和优先级：选择正确的钩子是关键。您可以通过查阅 WooCommerce 官方文档或使用如 Query Monitor 等调试插件来探索可用的钩子。add_action() 和 remove_action() 中的第三个参数是优先级，它决定了在同一个钩子上，多个函数执行的顺序。数字越小，优先级越高，执行越靠前。
3. 彻底测试：在应用任何代码更改后，务必在不同的浏览器和设备上（包括移动设备）进行彻底的测试。验证优惠券功能是否正常，表单是否正确显示，以及是否有任何布局或功能上的冲突。
4. 避免自定义表单：除非有非常特殊的需求，并对 WooCommerce 的内部机制有深入理解，否则应避免手动创建和嵌入新的优惠券表单。直接使用 woocommerce_checkout_coupon_form 函数可以确保表单与 WooCommerce 的后端处理逻辑完全兼容，避免出现优惠券无法应用或提交失败的问题。

总结

通过巧妙地运用 WooCommerce 的动作钩子，我们可以轻松且安全地调整结账页面优惠券表单的显示位置。这种方法不仅保证了功能的完整性，也避免了手动实现可能带来的复杂性和潜在问题，是进行 WooCommerce 定制开发的推荐实践。掌握这种定制方式，能够帮助您更好地优化您的在线商店的用户体验和结账流程。