Woocommerce How To Add Coupon Field On Checkout Page

By default, WooCommerce shows a "Have a coupon? Click here to enter your code" notice at the top of the classic checkout page, and the coupon box opens when the customer clicks it. This guide shows how to move that coupon form to a different position using WooCommerce's template hooks. It was checked against WooCommerce's source code and developer documentation on 3 October 2026. We read the code but did not run this snippet on a live checkout, so test it as described below.

Before you start

• This applies to the classic checkout only. The snippet below works with the checkout page that uses the [woocommerce_checkout] shortcode. If your checkout page uses the newer Checkout block, WooCommerce's classic checkout hooks do not run there, and WooCommerce's hook documentation lists woocommerce_before_checkout_form as not supported in the Checkout block. In the block, the coupon form is an inner block inside the checkout totals area, and WooCommerce documents that it is the one block in that section you can remove; you manage it in the block editor rather than with PHP. Open your checkout page in the editor to see which version you use.
• Coupons must be enabled. In WooCommerce settings, make sure the option to enable coupon codes is turned on. If coupons are disabled, the form is not output at all.
• Put the code in a child theme or a small custom plugin, not in a parent theme's files, so a theme update does not erase it. A mistake in functions.php can take the whole site down, so make a backup and try it on a staging copy of the site first, then test a full checkout (including applying a valid and an invalid coupon) before using it on the live store.

Step 1: Open your child theme's functions.php

The file is named functions.php (with an "s"). Path: wp-content/themes/your-child-theme/functions.php. Alternatively, put the code in a small custom plugin.

Step 2: Move the coupon form

WooCommerce adds the coupon form to the woocommerce_before_checkout_form hook with priority 10, using the function woocommerce_checkout_coupon_form. To move it, remove it from that hook and add it to another hook. The snippet below places the form after the checkout form. Use plain straight quotes when you paste it; curly quotes copied from a web page or word processor cause a PHP syntax error.

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

Why woocommerce_after_checkout_form and not a hook inside the order review area? In WooCommerce's checkout template, the hook woocommerce_checkout_order_review runs inside the main checkout <form>, while the coupon template outputs its own <form>. A form nested inside another form is not valid HTML and browsers handle it unpredictably, so the "Apply coupon" button may not work. The hooks woocommerce_before_checkout_form and woocommerce_after_checkout_form run outside the checkout form, so they are safe places for it.

If you only want to change the order at the top of the page rather than move the form to the bottom, keep the same hook and change the priority: remove the original with remove_action and add it back to woocommerce_before_checkout_form with a different number. WooCommerce adds both the login notice and the coupon form at priority 10, so a lower number such as 5 shows the coupon form first, and a higher number such as 20 shows it after the login notice.

Step 3: Test on staging

• Add a product to the cart and open the checkout page. Confirm the coupon notice appears where you expect and that clicking it opens the box.
• Apply a valid coupon and check that the order total updates. Then try an invalid coupon and check that you see an error message.
• Complete a test order using a payment method set to test mode, and check on both desktop and a phone-sized screen.
• If your theme or a checkout plugin changes the checkout layout, check that its markup still works. If anything breaks, remove the two lines to restore the default.

Hook names and templates can change between WooCommerce versions, so recheck this snippet after major WooCommerce or theme updates.

Sources: WooCommerce's hook alternatives for the Checkout block and its Checkout block documentation, and the WooCommerce checkout and coupon template source code on GitHub.