How do I move the apply coupon input below the order on the checkout page in Woocommerce?

Question

On the woocommerce checkout page I want to move the field where the apply coupon input is and place it just below the order summary and above the payment options. I'm not sure how to change the php because the checkout page is comprised of multiple php files therefore I come to you genius people to help. Anybody know how I can achieve this? Thank you in advance! P.S. I've added pictures; the first is of the top half of the page and the second is of the second half of the page.

Answer 1

Move WooCommerce Coupon Field in Checkout Page
Using process: You can use the code using any plugin like (Code snippets) or function.PHP

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

Answer 2

This how I put the coupon form after the billing total. So it would be more helpful to use while customization. Just place this code inside your functions.php and see the customization on the frontend.

    /*
     * Removing default "Coupon form" from the top of the checkout page
     */
    remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

    /*
     * Hooking "Coupon form" after order total in checkout page with custom function
     */
    add_action( 'woocommerce_review_order_after_order_total', 'woocommerce_checkout_coupon_form_custom' );

    /*
     * Rendering html for "Coupon form" with custom function
     */
    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 '</td></tr>';
    }

Answer 3

This worked great for me:

Add this jQuery:

(function($) {
    $(document).ready(function() { 
        var coupon2 = $(".checkout_coupon.woocommerce-form-coupon");
        coupon2.insertAfter('.shop_table.woocommerce-checkout-review-order-table');
    })
})
(jQuery);

Add this css:

/*unhide copuon code checkout*/
.checkout_coupon {
 display: block !important;
}
/*hide message have a coupon?*/
.woocommerce-info {
display:none;
}
/*coupon code checkout style*/
.checkout_coupon button.button{
background-color: #insert button color here;
}

Answer 4

@noufalcep you answer is not clear.

Finally after everything i came up with a working solution. i am using woocommerce 3.2.5 and wordpress version of 4.8.3.

As @noufalcep said the form inside form is not the issue. When we do

add_action( ‘woocommerce_checkout_after_order_review’, ‘woocommerce_checkout_coupon_form’ );

coupon container doesn't wrap up with form element. But the button has submit as input type. That's why when we apply coupon main form get suibmitted.

Therefore what i did is inserted the coupon form with jquery insertAfter. Below is the code. It is perfectly working.

 var coupon = $(".checkout_coupon");
 coupon.insertAfter('.shop_table.woocommerce-checkout-review-order-table');

Then this will add the form after review order table. if you want it with "Have a coupon? Click here to enter your code" text, you have to wrap the element with the form.

A working example can be seen here, https://themovementfix.com/checkout/

Answer 5

The problem is that the whole checkout page is inside a form, and the coupon is a form also. And you are unable to nest two forms. So even though you could technically move the coupon form above the review order section, it won't work properly. You need to rearrange your form and split them into two to make it work.

Answer 6

After reading about the form within a form issue that stops the usual add_actions from working, it inspired me to create a form-checkout.php file in my theme’s woocommerce folder, and simply move the order review's starting < form ... > code to right after the do_action( ‘woocommerce_checkout_before_customer_details’ ); line, then used these two lines to move the coupon form down to under the Your Order review display, and it worked great in v3.0.x of WooCommerce:

remove_action( ‘woocommerce_before_checkout_form’, ‘woocommerce_checkout_coupon_form’, 10 );

add_action( ‘woocommerce_checkout_after_order_review’, ‘woocommerce_checkout_coupon_form’ );

Without moving the starting form code, it wouldn’t work due to the form within a form issue mentioned, but once moved, works easily.

Answer 7

A slight revision on a suggested answer:

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

This places the coupon input below the order and above the payment options.

Answer 8

As of woocommerce 2.6 (or maybe even earlier) placing it "after order review" no longer works. If you apply a coupon it will place the order automatically. It's caused by the form within a form issue.

In Woocommerce 2.6, using hooks alone, only these 2 options currently work:

option 1:

add_action('woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form');

option 2:

add_action('woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form');

Answer 9

If you are comfortable editing your functions.php file inside your theme directory, then you can add the following lines of code:

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

This will essentially remove the coupon (which is hooked before the checkout form) and re-add it AFTER the checkout form.

Alternatively, you can use Javascript to "cut&paste" the html block containing the coupon fields, but this is a messy way of coding and I would not suggest taking that route.