在结帐时更改所有与 WooCommerce 消息相关的优惠券代码的位置答案

【问题标题】：Change position of all coupon code related WooCommerce messages at checkout在结帐时更改所有与 WooCommerce 消息相关的优惠券代码的位置
【发布时间】：2021-02-24 14:58:09
【问题描述】：

我想更改结帐页面中所有与优惠券代码相关的 WooCommerce 消息的位置。

我已成功将优惠券代码表单从其原始位置（结帐页面顶部）移动到订单详细信息表之后（woocommerce_review_order_before_payment钩子）。

但是现在优惠券代码消息放置没有意义，尤其是对于移动用户，因此我想将所有与优惠券代码相关的消息移动到优惠券表单下方（woocommerce_review_order_before_payment 挂钩处）。

但是，重要的是只移动与优惠券代码相关的消息，而不是所有消息。

这是与优惠券代码相关的所有 WooCommerce 消息的列表：

Message	Message type	When
Coupon code already applied!	`woocommerce-error`	When you try applying a coupon code that has already been applied to your order.
Coupon "coupon-code" does not exist!	`woocommerce-error`	When you try applying a non existent coupon code.
Please enter a coupon code.	`woocommerce-error`	When you try applying an empty coupon field.
Coupon has been removed.	`woocommerce-message`	When you successfully remove a coupon code from your order.
Coupon code applied successfully.	`woocommerce-message`	When you successfully apply a coupon code to your order.

有人可以帮忙吗？

【问题讨论】：

标签： php wordpress woocommerce

【解决方案1】：

首先，正如@Pavel Vnukov nested forms are not supported and are not part of the w3c standard. 所说，你已经添加了preventDefault 所以default action should not be taken。

我已经修复了对 @Pavel Vnukov 代码的一些代码更改，以便根据您的需要工作。

试试下面的代码。

(function($){

    $('.woocommerce-form-coupon-toggle').remove();
    $(document).on("click", 'button[name="apply_coupon"]', function(event) {
        
        event.preventDefault();

        $form = $('form[name="checkout"]');
        $form.block({message:''});

        var data = {
            security:       wc_checkout_params.apply_coupon_nonce,
            coupon_code:    $( 'input[name="coupon_code"]' ).val()
        };

        $.ajax({
            type:       'POST',
            url:        wc_checkout_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'apply_coupon' ),
            data:       data,
            success:    function( code ) {
                
                $( '.woocommerce-error, .woocommerce-message' ).remove();
                $form.removeClass( 'processing' ).unblock();

                if ( code ) {
                    $( 'button[name="apply_coupon"]' ).parent().after( code );
                    $( document.body ).trigger( 'update_checkout', { update_shipping_method: false } );
                }

            },
            dataType: 'html'
        });

    });

})(jQuery);

经过测试和工作

【讨论】：

看起来不错！正是我想要的，而且我相信还有更多。
我没有问这个问题，但我已经给你奖励了。谢谢！
一件事，当输入框为空，用户误点击申请优惠券时，输入框消失。你能更新代码吗？
我会检查并更新。
@Yatix 你可以检查上面的 GIF 是否工作正常。

【解决方案2】：

它看起来像Move coupon field after checkout payment in Woocommerce?的重复

标准优惠券表格不能放在确认按钮之前 - 因为您将在表格中包含表格 - 不支持嵌套表格，也不属于 w3c 标准。

您可以在确认按钮后轻松移动优惠券表格。将优惠券块移动到另一个地方的最佳方法是使用上述问题中的代码：

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form');

add_action( 'woocommerce_review_order_before_payment', 'woocommerce_checkout_coupon_form' );

另一种方法是从标准位置删除优惠券表格并使用按钮创建自定义输入。比您需要添加来自 woocommerce 源 (wp-content/plugins/woocommerce/assets/js/frontend/checkout.js:536) 的自定义 js 代码

   $(".custom_apply_coupon_code").on("click", function(event) {
        var data = {
            security:       wc_checkout_params.apply_coupon_nonce,
            coupon_code:    $( 'input[name="coupon_code"]' ).val()
        };

        $.ajax({
            type:       'POST',
            url:        wc_checkout_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'apply_coupon' ),
            data:       data,
            success:    function( code ) {
                $( '.woocommerce-error, .woocommerce-message' ).remove();
                $form.removeClass( 'processing' ).unblock();

                if ( code ) {
                    $form.before( code );
                    $form.slideUp();

                    $( document.body ).trigger( 'update_checkout', { update_shipping_method: false } );
                }
            },
            dataType: 'html'
        });
});

代码将包含成功或错误消息的位置。

【讨论】：