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

@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 2

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.

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