本教程详细阐述了如何在 WooCommerce 结账页面上调整优惠券输入框的默认位置。通过利用 WooCommerce 提供的动作钩子（action hooks），您可以轻松地将优惠券表单从页面顶部移除，并将其重新定位到订单总览区域下方或结账流程中的任何指定位置，从而优化用户体验并提升页面布局的灵活性。
1. 理解 WooCommerce 优惠券表单的默认行为
在 woocommerce 中，优惠券输入表单默认显示在结账页面的顶部，即在结账表单之前。这种默认布局可能不总是符合所有网站的设计或用户体验需求。例如，有些商家可能希望用户在确认订单详情后再输入优惠券，以减少前期干扰。
用户尝试通过自定义代码重构优惠券表单，但发现其提交功能失效。这通常是因为 WooCommerce 的优惠券表单（woocommerce_checkout_coupon_form）是一个内置的、与核心逻辑紧密关联的函数。简单地移除其模板文件或自行编写新的 html 表单，可能无法正确触发 WooCommerce 内部的表单处理机制（如 ajax 提交和优惠券验证）。正确的做法是利用 WooCommerce 提供的动作钩子来控制其内置表单的显示位置。
2. 调整优惠券表单位置的核心方法
要改变 WooCommerce 优惠券表单的位置，我们需要执行两个关键步骤：首先，从其默认位置移除它；其次，将其重新添加到一个新的、更合适的位置。这可以通过在主题的 functions.php 文件（强烈建议使用子主题）中添加自定义代码来实现。
2.1 移除默认位置的优惠券表单
WooCommerce 默认将优惠券表单通过 woocommerce_checkout_coupon_form 函数挂载到 woocommerce_before_checkout_form 动作钩子上，优先级为 10。要移除它，可以使用 remove_action 函数：
<?php /** * 移除 WooCommerce 结账页默认位置的优惠券表单 */ function custom_remove_default_coupon_form() { remove_action('woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10); } add_action('init', 'custom_remove_default_coupon_form'); ?>
代码解释：
- remove_action(): 用于从指定钩子中移除已添加的函数。
- woocommerce_before_checkout_form: 优惠券表单默认挂载的动作钩子，位于结账表单之前。
- woocommerce_checkout_coupon_form: WooCommerce 核心用于显示优惠券表单的函数。
- 10: 挂载时的优先级，必须与添加时保持一致才能成功移除。
- add_action(‘init’, …): 确保在 WooCommerce 核心功能加载完成后执行移除操作，避免时序问题。
2.2 将优惠券表单重新添加至新位置
移除默认位置后，您可以将 woocommerce_checkout_coupon_form 函数重新添加到结账页面的任何其他可用动作钩子上。例如，如果希望将其放置在订单总览区域下方，可以使用 woocommerce_checkout_order_review 钩子：
<?php /** * 将 WooCommerce 优惠券表单添加至订单总览区域下方 */ function custom_add_coupon_form_after_order_review() { // 检查优惠券功能是否启用，若未启用则不显示表单 if ( ! wc_coupons_enabled() ) { return; } woocommerce_checkout_coupon_form(); } add_action('woocommerce_checkout_order_review', 'custom_add_coupon_form_after_order_review', 5); ?>
代码解释：
- add_action(): 用于将函数挂载到指定钩子上。
- woocommerce_checkout_order_review: 这是一个在订单总览部分内部触发的钩子。通过调整优先级，可以控制其在订单总览中的具体位置。
- woocommerce_checkout_coupon_form(): 直接调用 WooCommerce 提供的函数，确保显示的是原生的、功能完整的优惠券表单。
- 5: 优先级。较低的数字表示较高的优先级，意味着它会更早执行。您可以根据需要调整此值，以微调表单在目标区域内的位置。
- if ( ! wc_coupons_enabled() ) { return; }: 这是一个最佳实践，确保只有在 WooCommerce 优惠券功能被启用时才尝试显示表单。
3. 完整代码示例
将上述两段代码合并，并放置在您的子主题的 functions.php 文件中：
<?php /** * WooCommerce 结账页优惠券表单位置调整 * 将优惠券表单从顶部移动到订单总览区域下方 */ // 1. 移除 WooCommerce 结账页默认位置的优惠券表单 add_action('init', 'custom_remove_default_coupon_form'); function custom_remove_default_coupon_form() { remove_action('woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10); } // 2. 将优惠券表单添加至订单总览区域下方 add_action('woocommerce_checkout_order_review', 'custom_add_coupon_form_after_order_review', 5); function custom_add_coupon_form_after_order_review() { // 检查优惠券功能是否启用，若未启用则不显示表单 if ( ! wc_coupons_enabled() ) { return; } // 调用 WooCommerce 核心函数显示优惠券表单 woocommerce_checkout_coupon_form(); } ?>
4. 其他可选钩子
除了 woocommerce_checkout_order_review，您还可以探索其他 WooCommerce 结账页面的动作钩子，以将优惠券表单放置在更精确的位置：
- woocommerce_checkout_before_customer_details: 客户详情之前。
- woocommerce_checkout_after_customer_details: 客户详情之后。
- woocommerce_checkout_before_order_review: 订单总览之前。
- woocommerce_checkout_after_order_review: 订单总览之后（整个订单总览区域的外部）。
- woocommerce_review_order_before_payment: 支付方式之前。
- woocommerce_review_order_after_payment: 支付方式之后。
选择合适的钩子并调整优先级，可以实现灵活的布局控制。
5. 注意事项
- 使用子主题： 务必将上述代码添加到您当前主题的子主题的 functions.php 文件中。直接修改父主题的文件会在主题更新时丢失您的更改。
- 清除缓存： 修改代码后，请清除您的网站缓存（包括插件缓存、CDN 缓存和浏览器缓存），以确保更改生效。
- 测试： 在生产环境部署前，务必在开发或测试环境中充分测试功能，确保优惠券表单能够正常显示、提交和应用优惠。
- 避免自定义表单： 除非您对 WooCommerce 核心代码和表单处理机制非常熟悉，否则不建议自行编写 HTML 优惠券表单。直接调用 woocommerce_checkout_coupon_form() 函数是推荐且稳定的做法，它确保了与 WooCommerce 内部逻辑的兼容性。
总结
通过巧妙地运用 remove_action 和 add_action，并结合 WooCommerce 提供的丰富动作钩子，您可以精确控制结账页面上优惠券表单的显示位置。这种方法比尝试重新构建表单更为健壮和推荐，因为它直接利用了 WooCommerce 内置的功能，确保了兼容性和稳定性。遵循本教程的步骤和注意事项，您将能够有效地优化网站的结账流程和用户体验。
