Error messages related to coupon below coupon field

Question

Based on Move coupon form before payment section in WooCommerce checkout answer code. I'm customizing the Woocommerce checkout page, moving the coupon code field on different location.

Now the biggest problem is that I can't find a way to move coupon related errors below coupon field. If there is an error (for example, when a coupon is not valid) I want to show new div below coupon-form div displaying the error.

Here is My code:

// 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;
}

In one of my favorite themes I found this piece of code and I tried to replace my code with it, but can not make it work

        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("");
            },
        });
    },

Answer 1

To display coupon-related errors below the coupon field on the WooCommerce checkout page, you can modify the existing cod

// 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="coupon-error"></div>
        <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 inputted 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());
            });
            // On button click, submit WooCommerce hidden default coupon form
            $('.coupon-form button[name="apply_coupon"]').on( 'click', function(){
                $('form.checkout_coupon').submit();
            });
            // Handle coupon application response
            $(document.body).on('applied_coupon_in_checkout', function(event, coupon_code){
                if (coupon_code) {
                    $('.coupon-error').html('');
                }
            });
            $(document.body).on('woocommerce-applied_coupon-in_checkout', function(event, response){
                if (response && response.result === 'failure' && response.messages) {
                    $('.coupon-error').html(response.messages);
                }
            });
        });
    </script>
    <?php
    endif;
}