Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Change position of all coupon code related WooCommerce messages at checkout

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search