I would like to move the coupon field at checkout to the woocommerce_review_order_before_payment
hook.
Having the coupon field at the top of the page negatively affects conversions as users immediately try looking for a coupon code and abandon checkout if they fail to find one.
I read online that it’s not that simple because the coupon field is also a form. And placing the coupon field anywhere inside the checkout form causes the "Apply Coupon" to submit the order form instead of applying the coupon.
I also read online that there are working solutions to fix this issue. But there are no tutorials on how to do it even though people have been asking this same question for years.
Could someone please give a step by step tutorial on how to properly move the coupon field and end this issue once and for all?
3
Answers
You could adapt something like Move coupon form before subtotal in WooCommerce checkout answer code, but it will not work for many reasons…
Revisited updated answer (simplified without Ajax, just like WooCommerce default one):
Code goes in functions.php file of the active child theme (or active theme). Tested and works.
Original first answer:
You will need something completely custom, to be able to make work a coupon input field just before checkout payment section. It additionally requires Ajax and jQuery code as follows:
Code goes in functions.php file of the active child theme (or active theme). Tested and works.
In case anyone else runs into this issue…
When i tried implementing the code I found an issue that when I hit "dummy" form, that it tried and submitted the order.
To get around it, modified the button as a span and styled the span to look and act like a button.
I updated the code to display the coupon form in a more clean look.
New coupon form look
Now if you want to change the position of the entire coupon form you have to update this woocommerce hook ‘woocommerce_review_order_before_payment’
Changing hooks works but somehow causes the coupon form to duplicate and stay on top.
I’m still working on a solution and update this once I learn.
Changing hook live example