WooCommerce 结账页优惠券表单位置调整指南

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

代码解释：

表单大师AI

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

74

查看详情

• 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 内置的功能，确保了兼容性和稳定性。遵循本教程的步骤和注意事项，您将能够有效地优化网站的结账流程和用户体验。

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