Change Coupon Position On Checkout Page, Show it Before Order Table

On the classic WooCommerce checkout, the coupon form sits at the top of the page, hidden behind a “Have a coupon? Click here to enter your code” notice. These two snippets move the form down to just above the order summary and keep it open, so customers see it right before they review their order.

Move the coupon form with jQuery

Add this inside your jQuery ready function, in your theme’s JavaScript file.

//coupon on checkout page position start
var coupon2 = $(".checkout_coupon.woocommerce-form-coupon");
coupon2.insertBefore('h3#order_review_heading');
//coupon on checkout page position end

.checkout_coupon.woocommerce-form-coupon selects the coupon form, and insertBefore() moves it in front of h3#order_review_heading, the “Your order” heading above the order summary table. The code uses $, so in WordPress your ready function must map $ to jQuery, as explained in fixing the $ is not a function error.

Show the form and hide the notice

Add this CSS to your child theme’s style.css or the Customizer’s Additional CSS panel.

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

• display: block !important keeps the coupon form visible, because WooCommerce hides it until the notice is clicked.
• The .woocommerce-info rule hides the “Have a coupon?” notice. All WooCommerce info notices use that class, including the returning customer login prompt, so this hides them everywhere on the site. To limit it to the coupon notice, target .woocommerce-form-coupon-toggle .woocommerce-info instead.
• Replace #insert button color here with a real color value such as #333333. Until you do, the browser ignores that rule.

The snippets are written for the shortcode-based checkout. The Checkout block has its own coupon field.

If the whole checkout needs rearranging rather than one moved block, see my WooCommerce development services.

Related articles

• the checkout hook that runs above the order review: add your own content to the same spot with PHP
• rounding percentage coupon discounts to whole numbers: changes the discount the coupon gives