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.


2014-12-30: This post has been updated as the original code caused an error with a nested form.

It’s definitely possible to move the WooCommerce coupon field, but will require a small code snippet to do so and a bit of javascript. If you’ve never added any custom code to your site before, check out this tutorial on how to do so. If you’re only looking to rename or remove this field, we have another tutorial for that.

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.

WooCommerce Coupon field

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

However, we can make it look like the form has been moved without actually moving it via javascript. I’m going to add a coupon message right above the order details table instead:

WooCommerce Coupon Field moved

“Fake” coupon field

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:

WooCommerce javascript coupon field

WooCommerce Coupon field revealed

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!


Articles you may also like:

Posted by Beka Rice

Beka Rice manages the direction of Sell with WP content and writes or edits most of our articles to share her interests in eCommerce. Or she just writes as an excuse to spend more time jamming out to anything from The Clash to Lady Gaga. Who knows.

19 Comments

  1. Hi, Beka. Great idea.

    I’m looking around a way to use coupons with WooSubscription plugin.

    I would to know if is possible to define the following coupon functioning method.

    I have a subscription product billed $150 monthly. I want to give $50 discount for two months. Then, customer will pay the whole price.

    This kind of negotiation is common here in Brazil.

    It’s possible to setup it using coupon or another solution?

    Thanks, and sorry if my English is not very polite.

  2. Hey great Ideal.
    Im using this code and works great.
    I have only one issue.

    The apply button is acting like the check out button.
    Its not applying the coupon prior to check out.
    It seems ti me because its in the order details section.
    So when I hit apply all other required fields need to be filled in.

    Is there a way to make the apply button work stand alone?
    (Meaning it will apply coupon and update order details before pressing the check out button like its original functionally)

    Thanks for your time.

    1. Interesting, thanks for the heads up – not sure how that one slipped by. I’ve updated the post with a different method that will work.

  3. Hi,

    Thanks for the great article!

    I got the same problem as Jose, when i apply de coupon i redirect to the payment page.
    Do you maybe have an idea what the problem an be?

    Thanks

    1. Hi there, try the code in the gist above for the “hidden” coupon trick instead, which is what solved the previous issue. The coupon field can’t be moved into the checkout form or this error occurs, so we use the hidden trick to make it look like it is.

  4. Hi, great article. I have a question, i understand hooks etc, but how did you no that the coupon was called woocommerce_checkout_coupon_form? Soemtimes i want to hook into actions, but i don’t no what to put for the second parameter.

    Also if you look on my page http://independentgifts.freesite.host/checkout/, i want the returning customers and coupon box to sit next to each other as they are doing, the issue i am having is when they are clicked the forms break the layout. I need to wrap a div around both the div woocommerce-info and the form but cant find where. Any ideas?

    Cheers

  5. Hi, Beka.

    It’s good article helped me a lot, but I want the “Have a coupon? Click here to enter your code” is after the product table of Your order,
    so please help me with this one.

    Thank you.

    1. I’m also looking for a way to put the coupon form below the “Your Order” field. Any help?
      … And how can I adjust the width of the coupon field?

      1. To adjust the width, just add this to your style.css:

        .woocommerce form.checkout_coupon {
        width: 50%;
        }

  6. Hello Beka, great piece of code there! Works nicely!

    Only thing is that the “Have a coupon? Click here to enter your code.” text appears twice below ‘Your Order’.
    Is that a common occurrence? Or just me?

    Best

    Peter

  7. Hi there!
    Nice work, thanks. But I have the same problem with the doubled message “Have a coupon? Click here to enter your code.”
    And when I click on the apply coupon button when no coupon code is inserted, there appears a third message.
    And only the first button is showing the coupon field. The others push upside, but the coupon field is still hidden then.

    Could you help with that?
    Thanks 🙂
    Hauke

    1. Hey Hauke & Peter, thanks for the heads up 🙂 the way the order reviews table is loaded via ajax changed slightly, so I’ve tweaked the snippet to use a different action — please update with the new snippet. Cheers!

      1. Nice! It’s working like a charm 😀
        Thank you!

  8. Great Work! Been racking my brain on this for a little bit…

    1.) Anyway to make the “apply coupon” box open under the Click Here Link we create (under the order review form)

    2.) Can we get the box to close by clicking the link again like the builtin function in woocommerce?

    Thanks again for a great solution!

  9. It’s work perfect

  10. Worked like a charm for me 100%.

    How can or is it possible for the coupon box to remain open? Instead of having to click on a link.

  11. Is it possible to have the coupon box in a modal form? Then you could place the triggering pop-up link anywhere within the checkout form without interference?

    1. Through custom code anything is possible 🙂 However, using forms in modals is never simple and a change like that would require a good developer very familiar with WooCommerce and at least a few hours time to get it working properly.

  12. Thank you for sharing this code, it works great.
    Never really liked the position of woocommerce coupon fields form the beginning, and this helped me change that.

It's been over 2 years since this post was published, so comments have been closed. Thanks for reading!