Move coupon form before subtotal in WooCommerce checkout

Question

In my Storefront child theme, in the checkout page, I am trying to move the coupon code block just above the cart totals and below the item review

I see in review-order.php that there's the following hook just at the right place:

do_action( 'woocommerce_review_order_after_cart_contents' );

So in the functions.php file, I added:

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
add_action( 'woocommerce_review_order_after_cart_contents', 'woocommerce_checkout_coupon_form' );

But, the coupon block appears twice...and above the order review instead of below.

Auric

Answer 1

Update 2021 Use: Move coupon form before payment section in WooCommerce checkout

As the hook woocommerce_review_order_after_cart_contents is located inside an html table in between </tr> and </tbody> tags, so it requires to be displayed inside a specific html structure, to avoid your issue.

The following will do that:

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
add_action( 'woocommerce_review_order_after_cart_contents', 'woocommerce_checkout_coupon_form_custom' );
function woocommerce_checkout_coupon_form_custom() {
    echo '<tr class="coupon-form"><td colspan="2">';
    
    wc_get_template(
        'checkout/form-coupon.php',
        array(
            'checkout' => WC()->checkout(),
        )
    );
    echo '</tr></td>';
}

Code goes in functions.php file of the active child theme (or active theme). tested and works.

---

If you want to display the coupon form directly, you can add the following in style.css file oof your active child theme (or active theme):

.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon {
    display: block !important;
}

Related: Move coupon field after checkout payment in Woocommerce?

Samford

Hey @LoicTheAstec ! Thanks for your answer. It seems that it displays the coupon form at the right place, but then there a symbol that the form is updating and the coupon form disappears... any idea why ? – Auric

example here staging.hemen-biarritz.com/checkout – Auric

doesn't work here. Maybe a plugin. I am checking now. – Auric

ok got it. I only display the part that containes checkout_coupon woocommerce-form-coupon so I had to display: block !important it – Auric

come on @LoicTheAztec, you're still the best ! – Auric

This just moves the coupon form down in the checkout area.. How to make the message also appear down like "the coupon applied successfully" or "the coupon code doesn't exist" – Emeric

Every body who looks for a better solution I would suggest this This topic. – Righthander

@Samford Above Code is working good, But ajax is not working. Can you please help with the ajax. – Radiothorium

@LoicTheAstec the code works but the coupon is not getting removed from the top instead it's adding another coupon field at the order review section. – Hasheem

Use Move coupon form before payment section in WooCommerce checkout answer code instead. – Samford

@Samford that's not working aswell, It was all good before it started showing the coupon on both side for no reason I have deleted alll the snippets from functions.php to make sure it's not a code error but still – Hasheem

@Samford I have figured it out actually I created a custom checkout page when I reverted it to the default it got fixed but when applying coupon it's not validating the coupon price instead asking payment details to checkout – Hasheem

Okay I figured, first I changed the custom checkout to default woocommerce checkout page then added original first answer linked above and it worked, @Samford you're a champ – Hasheem