在woocommerce商店中，优惠券表单的默认位置通常位于结账页面的顶部。然而，出于用户体验或设计布局的考虑，许多商家希望将其移至更合适的位置，例如订单概览区域下方。本文将详细介绍如何通过使用woocommerce的动作钩子（action hooks）来实现这一目标，确保优惠券功能在新的位置依然能够正常提交和处理。
理解WooCommerce动作钩子与优惠券表单
WooCommerce大量使用了WordPress的动作钩子机制，允许开发者在不修改核心文件的情况下，插入或移除特定功能。优惠券表单的显示也是通过一个预设的动作钩子实现的。当用户尝试通过自定义HTML表单来移动优惠券输入框时，通常会遇到表单无法提交的问题，这是因为自定义表单缺少了WooCommerce处理优惠券所需的后端逻辑和验证。正确的做法是操作WooCommerce内置的优惠券表单，改变其显示位置。
WooCommerce默认的优惠券表单通过 woocommerce_checkout_coupon_form() 函数在 woocommerce_before_checkout_form 钩子上被调用，优先级为10。因此，要移动它，我们需要先将其从默认位置移除，然后添加到新的位置。
核心操作：移除并重新添加优惠券表单
实现优惠券表单位置调整的核心在于使用 remove_action() 和 add_action() 函数。
1. 移除默认位置的优惠券表单
首先，我们需要将优惠券表单从其默认的 woocommerce_before_checkout_form 钩子上移除。这可以通过以下代码实现：
<?php
/**
* 移除WooCommerce结账页默认位置的优惠券表单
*/
function custom_remove_checkout_coupon_form_default_position() {
// 移除默认位置的优惠券表单函数
remove_action('woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10);
}
// 确保在WooCommerce功能完全加载后执行移除操作
add_action('wp_loaded', 'custom_remove_checkout_coupon_form_default_position');
?>代码解释：
- remove_action() 函数用于解除一个之前通过 add_action() 添加的函数。
- 第一个参数 'woocommerce_before_checkout_form' 是要解除的钩子名称。
- 第二个参数 'woocommerce_checkout_coupon_form' 是默认显示优惠券表单的函数。
- 第三个参数 10 是该函数的优先级，必须与 add_action 时设置的优先级一致才能成功移除。
- 我们将 remove_action 封装在一个自定义函数 custom_remove_checkout_coupon_form_default_position() 中，并将其挂载到 wp_loaded 钩子上，确保在WooCommerce功能完全加载后执行移除操作。
2. 将优惠券表单添加到新的位置
接下来，我们将相同的 woocommerce_checkout_coupon_form() 函数重新添加到一个新的钩子上，以改变其显示位置。为了将其放置在订单概览区域下方，我们可以使用 woocommerce_checkout_order_review 钩子。
<?php
/**
* 将WooCommerce优惠券表单添加到订单概览下方
*/
function custom_add_checkout_coupon_form_after_order_review() {
// 将优惠券表单函数添加到订单概览钩子
add_action('woocommerce_checkout_order_review', 'woocommerce_checkout_coupon_form', 5);
}
// 确保在WooCommerce功能完全加载后执行添加操作
add_action('wp_loaded', 'custom_add_checkout_coupon_form_after_order_review');
?>代码解释：
- add_action() 函数用于将一个函数挂载到指定的钩子上。
- 第一个参数 'woocommerce_checkout_order_review' 是我们选择的新钩子，它在订单概览部分之后触发。
- 第二个参数 'woocommerce_checkout_coupon_form' 仍然是WooCommerce内置的优惠券表单函数。
- 第三个参数 5 是优先级。较低的优先级数字意味着函数会更早执行。在这里，我们选择 5 是为了确保它在订单概览的其他元素之前（或之后，取决于具体实现）被渲染。您可以根据需要调整此值以微调位置。
将上述两段代码合并，并放置在您的子主题的 functions.php 文件中，即可实现优惠券表单的精确移动。
<?php
/**
* WooCommerce：移动优惠券表单到结账页订单概览下方
*/
// 移除默认位置的优惠券表单
function custom_remove_checkout_coupon_form_default_position() {
remove_action('woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10);
}
add_action('wp_loaded', 'custom_remove_checkout_coupon_form_default_position');
// 将优惠券表单添加到订单概览下方
function custom_add_checkout_coupon_form_after_order_review() {
add_action('woocommerce_checkout_order_review', 'woocommerce_checkout_coupon_form', 5);
}
add_action('wp_loaded', 'custom_add_checkout_coupon_form_after_order_review');
?>实施注意事项
- 使用子主题： 务必将上述代码添加到您的WordPress子主题的 functions.php 文件中。直接修改父主题文件会在主题更新时丢失您的更改。
-
选择合适的钩子： woocommerce_checkout_order_review 是一个常用的钩子，用于在订单概览区域附近插入内容。WooCommerce还提供了许多其他钩子，您可以根据具体需求查阅WooCommerce开发者文档，选择最适合您布局的钩子。例如：
- woocommerce_checkout_before_customer_details
- woocommerce_checkout_after_customer_details
- woocommerce_review_order_before_payment
- 测试： 完成代码修改后，务必在不同的浏览器和设备上测试结账流程，确保优惠券表单显示正常，并且能够成功输入和应用优惠券。
总结
通过利用WooCommerce强大的动作钩子系统，我们可以灵活地控制结账页面上优惠券表单的显示位置。相比于创建自定义表单，这种通过 remove_action 和 add_action 操作WooCommerce内置功能的方法更为健壮和推荐，因为它确保了与WooCommerce核心逻辑的兼容性，避免了潜在的提交问题。遵循本文的指导，您可以轻松优化您的WooCommerce结账页面布局，提升用户体验。
