bounty将在23小时内到期。回答此问题可获得+100声望奖励。Karnak希望引起更多关注这个问题。

基于移动优惠券的形式之前付款部分在WooCommerce结帐答案代码.我自定义Woocommerce结帐页面，移动优惠券代码字段在不同的位置.
现在最大的问题是，我找不到一种方法来移动优惠券相关的错误低于优惠券领域。如果出现错误（例如，当优惠券无效时），我希望在显示错误的优惠券表单div下面显示新的div。
下面是我的代码：

// Just hide default woocommerce coupon field
add_action( 'woocommerce_before_checkout_form', 'hide_checkout_coupon_form', 5 );
function hide_checkout_coupon_form() {
echo '<style>.woocommerce-form-coupon-toggle {display:none;}</style>';
}

// Add a custom coupon field before checkout payment section
add_action( 'woocommerce_review_order_before_payment', 
'woocommerce_checkout_coupon_form_custom' );
function woocommerce_checkout_coupon_form_custom() {

 echo '<div class="coupon-form" style="margin-bottom:20px;" style="display:none !important;">

        <input type="text" name="coupon_code" class="input-text" placeholder="' . __("Coupon code") . '" id="coupon_code" value="">
        <button type="button" class="button coupon-btn" name="apply_coupon" value="' . __("Apply coupon") . '">' . __("Apply coupon") . '</button>

    <div class="clear"></div>
    
</div>';
}

// jQuery code
add_action( 'wp_footer', 'custom_checkout_jquery_script' );
function custom_checkout_jquery_script() {
if ( is_checkout() && ! is_wc_endpoint_url() ) :
?>
<script type="text/javascript">
jQuery( function($){

    
    // Copy the inputed coupon code to WooCommerce hidden default coupon field
    $('.coupon-form input[name="coupon_code"]').on( 'input change', function(){
        $('form.checkout_coupon input[name="coupon_code"]').val($(this).val());
        // console.log($(this).val()); // Uncomment for testing
    });
    
    // On button click, submit WooCommerce hidden default coupon form
    $('.coupon-form button[name="apply_coupon"]').on( 'click', function(){
        $('form.checkout_coupon').submit();
        // console.log('click: submit form'); // Uncomment for testing
    });
});

(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);
</script>
<?php
endif;
}

在我最喜欢的主题之一，我发现这段代码，我试图取代我的代码与它，但不能使它工作

apply_coupon: function (t) {
        this.$review.is(".--loading") || this.$review.parents(".--loading").length || this.$review.addClass("--loading");
        var i = this,
            o = t.siblings("input[name='coupon_code']"),
            n = o.val(),
            s = { security: wc_checkout_params.apply_coupon_nonce, coupon_code: n };
        e.ajax({
            type: "POST",
            url: wc_checkout_params.wc_ajax_url.toString().replace("%%endpoint%%", "apply_coupon"),
            data: s,
            dataType: "html",
            success: function (o) {
                e(".woocommerce-error, .woocommerce-message, .woocommerce-info", this.$page).remove(), e(".__notice", this.$page).remove();
                var n = e('<div class="__notice --clean-wc-notice">' + o + "</div>").insertAfter(t.parent());
                e(document.body).trigger("applied_coupon_in_checkout", [s.coupon_code]),
                    e(document.body).trigger("update_checkout", { update_shipping_method: !1 }),
                    e(".woocommerce-message", n).length && i.$review.addClass("--mob-active");
            },
            complete: function () {
                i.$review.removeClass("--loading"), o.val("");
            },
        });
    },