如何在WooCommerce结账页调整优惠券表单位置

本教程详细指导如何在WooCommerce结账页面上灵活调整优惠券输入框的位置。我们将利用WordPress和WooCommerce的动作钩子，学习如何移除优惠券表单的默认显示位置，并将其重新定位到结账流程中的特定区域，例如订单概览下方，从而优化用户体验并确保优惠券功能正常运作。

在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');  ?>

实施注意事项

1. 使用子主题： 务必将上述代码添加到您的WordPress子主题的 functions.php 文件中。直接修改父主题文件会在主题更新时丢失您的更改。
2. 选择合适的钩子： woocommerce_checkout_order_review 是一个常用的钩子，用于在订单概览区域附近插入内容。WooCommerce还提供了许多其他钩子，您可以根据具体需求查阅WooCommerce开发者文档，选择最适合您布局的钩子。例如：
   • woocommerce_checkout_before_customer_details
   • woocommerce_checkout_after_customer_details
   • woocommerce_review_order_before_payment
3. 测试： 完成代码修改后，务必在不同的浏览器和设备上测试结账流程，确保优惠券表单显示正常，并且能够成功输入和应用优惠券。

总结

通过利用WooCommerce强大的动作钩子系统，我们可以灵活地控制结账页面上优惠券表单的显示位置。相比于创建自定义表单，这种通过 remove_action 和 add_action 操作WooCommerce内置功能的方法更为健壮和推荐，因为它确保了与WooCommerce核心逻辑的兼容性，避免了潜在的提交问题。遵循本文的指导，您可以轻松优化您的WooCommerce结账页面布局，提升用户体验。