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.

LoicTheAztec · Accepted Answer · 2021-01-25T08:39:24.597

7

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?

edited Jan 25 '21 at 08:39

answered Jul 14 '20 at 12:11

LoicTheAztec

229,944
23
356
399

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 ? – Louis Jul 14 '20 at 15:51
example here https://staging.hemen-biarritz.com/checkout/ – Louis Jul 14 '20 at 15:51
doesn't work here. Maybe a plugin. I am checking now. – Louis Jul 14 '20 at 19:25
ok got it. I only display the part that containes `checkout_coupon woocommerce-form-coupon` so I had to `display: block !important` it – Louis Jul 14 '20 at 19:31
come on @LoicTheAztec, you're still the best ! – Louis Jul 14 '20 at 19:33
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" – Far Dec 13 '20 at 10:23
1

Every body who looks for a better solution I would suggest this [This topic](https://stackoverflow.com/a/65696286/4170774). – Omid Toraby Jan 25 '21 at 08:28
@LoicTheAztec Above Code is working good, But ajax is not working. Can you please help with the ajax. – Praveen Feb 07 '22 at 12:08

Move coupon form before subtotal in WooCommerce checkout

1 Answers1

Linked