如何在Woocommerce的结账页面中将应用优惠券输入框移动到订单下方？

Question

在 WooCommerce 结账页面上，我想将输入优惠券的字段移动到订单摘要下方、付款选项上方。但是我不确定如何更改 PHP，因为结账页面由多个 PHP 文件组成，所以我来找你们这些天才人物帮忙。有人知道我如何实现这一点吗？谢谢您的帮助！附注：我已添加图片；第一张是页面上半部分，第二张是页面下半部分。

- T.Doe

---

请问是否有可能提供一个链接给我们，这样我们就可以查看网站的结构了？如果您的网站启用了某种“建设”模式，那么您是否可以提供一张您所见到的截屏呢？ - Frits

不幸的是，我目前正在使用本地主机构建网站。您想要一些屏幕截图吗？@Frits - T.Doe

啊，那真不幸。是的，截图应该是下一个最好的选择 :) - Frits

@Frits 给你 :) - T.Doe

Answer 1

如果您习惯于在主题目录内编辑 functions.php 文件，那么可以添加以下代码行：

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form' );

这将基本上移除优惠券（它钩在结帐表单之前），并在结帐表单之后重新添加它。

或者，您可以使用Javascript来“剪切和粘贴”包含优惠券字段的HTML块，但这是一种混乱的编码方式，我不建议采用这种方法。

- Frits

---

太棒了！这个方法有效，谢谢。它会在付款选项下方添加优惠券输入框。你知道怎么将其添加到付款选项上方吗？ - T.Doe

刚刚修复了它！谢谢@Frits - T.Doe

Answer 2

@noufalcep，您的回答不够清晰。

最终，在经历了一切之后，我找到了一个可行的解决方案。我正在使用woocommerce 3.2.5和wordpress版本4.8.3。

正如@noufalcep所说，嵌套表单并不是问题所在。当我们执行以下操作时：

  

add_action（‘woocommerce_checkout_after_order_review’，‘woocommerce_checkout_coupon_form’）;

优惠券容器不会与表单元素一起包裹。但是按钮有提交作为输入类型。这就是为什么当我们应用优惠券时，主表单会被提交的原因。

因此，我使用jquery insertAfter插入了优惠券表单。下面是代码。它完美地工作。

 var coupon = $(".checkout_coupon");
 coupon.insertAfter('.shop_table.woocommerce-checkout-review-order-table');

然后这将在审核订单表之后添加表单。如果您希望使用“有优惠券吗？单击此处输入代码”文本，则必须将元素与表单包装起来。

工作示例可以在此处查看， https://themovementfix.com/checkout/

- achchu93

---

这段代码对你有效吗？我已经测试过了，但对我无效。你能否提供完整的代码给我？ - developerme

是的，它有效。只需转到上面的链接并进行测试。你是在ready事件中编写这个吗？ - achchu93

你的代码对我有效，感谢你的代码。非常好，谢谢。这应该是被选中的答案。我会点赞的。 - developerme

Answer 3

这对我很有帮助：

在此添加jQuery:

(function($) {
    $(document).ready(function() { 
        var coupon2 = $(".checkout_coupon.woocommerce-form-coupon");
        coupon2.insertAfter('.shop_table.woocommerce-checkout-review-order-table');
    })
})
(jQuery);

添加以下CSS：

/*unhide copuon code checkout*/
.checkout_coupon {
 display: block !important;
}
/*hide message have a coupon?*/
.woocommerce-info {
display:none;
}
/*coupon code checkout style*/
.checkout_coupon button.button{
background-color: #insert button color here;
}

- Gabriel Meisel

Answer 4

这是我把优惠券表单放在账单总额之后的方法。这样，在自定义时更有帮助。 只需在您的functions.php中加入此代码，就可以在前端看到定制效果。

    /*
     * Removing default "Coupon form" from the top of the checkout page
     */
    remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

    /*
     * Hooking "Coupon form" after order total in checkout page with custom function
     */
    add_action( 'woocommerce_review_order_after_order_total', 'woocommerce_checkout_coupon_form_custom' );

    /*
     * Rendering html for "Coupon form" with custom function
     */
    function woocommerce_checkout_coupon_form_custom() {
        echo '<tr class="coupon-form"><td colspan="2">';
        wc_get_template(
            'checkout/form-coupon.php',
            array(
                'checkout' => WC()->checkout(),
            )
        );
        echo '</td></tr>';
    }

- Dishant

Answer 5

在阅读了有关表单中的问题后，这些问题可能会停止常规的add_actions工作。这激发了我在主题的woocommerce文件夹中创建一个form-checkout.php文件，并将订单审查的开始

代码移动到do_action（'woocommerce_checkout_before_customer_details'）;行之后，然后使用这两行将优惠券表单下移到您的Order review显示之下。这在WooCommerce的v3.0.x版本中运行良好。

remove_action( ‘woocommerce_before_checkout_form’, ‘woocommerce_checkout_coupon_form’, 10 );

add_action( ‘woocommerce_checkout_after_order_review’, ‘woocommerce_checkout_coupon_form’ );

如果不移动起始表单代码，由于提到的表单内嵌问题，它将无法工作，但一旦移动，就可以轻松地工作。

- Rob - PressWizards.com

Answer 6

自Woocommerce 2.6（或更早版本）以来，“在订单审核后”放置它的方法不再适用。如果应用优惠券，则会自动下订单，这是由于表单内的表单问题导致的。

在Woocommerce 2.6中，仅使用挂钩，当前只有以下两个选项可行：

选项1：

add_action('woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form');

选项2：

add_action('woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form');

- anon123

Answer 7

问题在于整个结账页面都在一个表单内，而优惠券也是一个表单。但是你无法嵌套两个表单。因此，即使你可以在订单审查部分上方移动优惠券表单，它也无法正常工作。你需要重新排列表单并将它们拆分成两个才能使其正常工作。

- passatgt

Answer 8

在结账页面中移动WooCommerce优惠券字段
使用方法：您可以使用任何插件（如代码片段）或function.PHP来使用代码。

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
add_action( 'woocommerce_review_order_after_cart_contents', 'woocommerce_checkout_coupon_form_custom' );
function woocommerce_checkout_coupon_form_custom() {
    echo '<tr class="coupon-form"><td colspan="2">';
    
    wc_get_template(
        'checkout/form-coupon.php',
        array(
            'checkout' => WC()->checkout(),
        )
    );
    echo '</tr></td>';
}

- Raihan Ali

---

请在您的回答中提供更多细节。目前的写法让人难以理解您的解决方案。 - Community

您可以使用任何插件（例如代码段）或 function.PHP 来使用此代码。 - Raihan Ali

Answer 9

对建议答案进行了轻微修改：

remove_action('woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10);
add_action('woocommerce_review_order_before_payment', 'woocommerce_checkout_coupon_form');

这将把优惠券输入框放置在订单下方、支付选项上方。

- T.Doe

---

你试过这个吗？对我没用。无法在结帐表单中移动优惠券。它会提交结帐，而不是添加优惠券。 - Simon Kelly