[SOLVED] Move coupon form before subtotal in WooCommerce checkout

Move coupon form before subtotal in WooCommerce checkout

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.

Solution

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