Today’s question comes from Scott:
Is there a way to move the WooCommerce coupon field on the checkout page? I feel like potential customers will convert more if they deal with all money stuff later on the page after entering address and email.
By default, the WooCommerce coupon field is at the top of the page during checkout. If the customer is not logged in, it’s displayed below the login notice.
We can move this to a different place in our checkout template without overriding any templates. To do so, we’ll need to unhook the coupon form from the top of the checkout page. We can do so with one line of code in our snippet:
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
This will remove the coupon field from the checkout template. We’ll then need to re-add it where desired. However, there’s only one other place to re-add it: below the entire checkout form. This is because it can’t be nested inside of the checkout form without affecting the “Place Order” button. You could add it at the end of the form if desired by then adding this snippet:
add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form' );
This won’t look exactly the same, but will function the same as having the coupon field at the top of the checkout form. When this link is clicked, it will reveal the coupon field at the top of the page for the customer to enter an applicable code:
Here’s our full snippet to move the WooCommerce coupon field:
That’s all you need! This will move your new “fake” coupon field above the order details table in the WooCommerce checkout, and the coupon field will remain hidden until this link is clicked.
There’s one thing we’ll pay attention to when adding in our new coupon link: where it appears in the checkout page. I’ve added it above the order details table, but we could change that. We don’t have to change the first function in the snippet above, but we need the second function to add the coupon link into our template. That’s what the
add_action part is doing.
You could find a different action to use by exploring one of the many other actions used in the checkout template. If you want to play around with this, I’d recommend using a staging or testing site to do so.
Anytime you see something like this in the checkout template:
do_action( 'woocommerce_checkout_order_review' );
This is an action you can hook into with an
add_action. If we use the action above, I could then add my “show coupon” link function there by using something like:
add_action( 'woocommerce_checkout_order_review', 'skyverge_show_coupon' );
You can modify the
add_action part of my snippet to use a different action and see where your WooCommerce coupon fields lands on the page if you’d like to use a different location. Would love to hear what you come up with!