Change position of all coupon code related WooCommerce messages at checkout

Question

I would like to change the position of all the coupon code-related WooCommerce messages on the checkout page.

I have successfully moved the coupon code form from its original position (top of the checkout page) to after the order details table (woocommerce_review_order_before_payment hook).

But now the coupon code message placement does not make sense, especially for mobile users, therefore I would like to move all of the coupon code-related messages below the coupon form (at the woocommerce_review_order_before_payment hook).

However, it's important that only messages that are related to coupon codes get moved and not all of the messages.

Here's a list of all the WooCommerce messages that are related to coupon codes:

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 nonexistent 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.

Could someone please help out?

Bhautik · Answer 1 · 2021-11-19T10:50:08.087

4

First, As per said @Pavel Vnukov nested forms are not supported and are not part of the w3c standard. so you have added preventDefault so default action should not be taken.

I have fixed some code changes to the @Pavel Vnukov code to work as per your need.

Try the below code.

(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);

Tested and Works

edited Nov 19 '21 at 10:50

answered Nov 19 '21 at 06:18

Bhautik

11,125
3
16
38

Looks good! Exactly what I was looking for and I am sure many more. – Yatix Nov 23 '21 at 17:43
I didnt asked the question, but I did awarded bounty to you already. Thanks! – Yatix Nov 23 '21 at 18:09
1 thing though, when input box is empty and user clicks on apply coupon by mistake, input box is gone. Can you update code for that? – Yatix Nov 23 '21 at 18:15
I will check and update. – Bhautik Nov 23 '21 at 18:22
@Yatix You can check on the above GIF is working fine. – Bhautik Nov 24 '21 at 06:50
Try to apply coupon when inbox is empty or wrong coupon. – Yatix Nov 24 '21 at 19:12
Yes, I already did check the above GIF in starting you can see I clicked on apply coupon button and an error appear but the inbox is still there. – Bhautik Nov 24 '21 at 19:59
ah right, but sad its not working at my end. Not big deal. Thanks! – Yatix Nov 25 '21 at 13:12

score 1 · Answer 2 · answered Nov 17 '21 at 23:57

It looks like a duplication of Move coupon field after checkout payment in Woocommerce?

Standart coupon form can't be placed before confirmation button - because you will include form in form - nested forms are not supported and are not part of the w3c standard.

You can easily move coupon form after confirmation button. The best way to move coupon block to another place is to use code from above question:

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form');

add_action( 'woocommerce_review_order_before_payment', 'woocommerce_checkout_coupon_form' );

Another way is to remove coupon form from it standard position and create a custom input with a button. Than you need to add custom js code like from woocommerce source (wp-content/plugins/woocommerce/assets/js/frontend/checkout.js:536)

   $(".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'
        });
});

Where code will include success or error message.

Change position of all coupon code related WooCommerce messages at checkout

2 Answers2