[PHP Woocommerce] How to move Woocommerce Coupon form in the Checkout Page

My client asked me to move the “Coupon form” block in the “Checkout Page” to the “Checkout review order” block before the “Delivery” block. Visitors may need to remember to add the coupon on the cart page or go to the checkout page without visiting the cart, so it is a good idea.

The coupon form on the ‘Checkout’ page is, by default, hidden. To view the field, a visitor must click a link. Unfortunately, not all buyers will see this link, which is why the shop customer support receives questions from visitors.

Below is a simple code that will help you display the coupon form before the Delivery block. The coupon form will be visible, so your buyers won’t have to click a link to see it.

Our steps:

1. Remove the default coupon form from the default location.
2. Create a custom function for the coupon form.
3. Connect the function to a new location.
4. Add CSS to make the form visible

Add this code in the functions.php of your theme.

// Remove the default coupon form from the default location
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

// Create a custom function for the coupon form
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>';
}

// Connect the function to a new location
add_action( 'woocommerce_review_order_after_shipping', 'woocommerce_checkout_coupon_form_custom' );

In the next step, we will add CSS. You can add this CSS by going to Appearance → Customize → Additional CSS.

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

.woocommerce-form-coupon-toggle {
display: none;
}