How to move WooCommerce Coupon form in the Checkout Page

By default, WooCommerce hides the coupon field on checkout behind a toggle link most customers never notice. Here’s how to move it directly into the order summary block using a hook and two CSS rules.

My client asked me to move the “Coupon form” block in the “Checkout Page” to the “Checkout review order” block before the “Delivery” block. Visitors may need to remember to add the coupon on the cart page or go to the checkout page without visiting the cart, so it is a good idea.

The coupon form on the ‘Checkout’ page is, by default, hidden. To view the field, a visitor must click a link. Unfortunately, not all buyers will see this link, which is why the shop customer support receives questions from visitors.

Below is a simple code that will help you display the coupon form before the Delivery block. The coupon form will be visible, so your buyers won’t have to click a link to see it.

Our steps:

  1. Remove the default coupon form from the default location.
  2. Create a custom function for the coupon form.
  3. Connect the function to a new location.
  4. Add CSS to make the form visible

Add this code in the functions.php of your theme.

</pre>
<p>// Remove the default coupon form from the default location<br />remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );</p>
<p>// Create a custom function for the coupon form<br />function woocommerce_checkout_coupon_form_custom() {<br />echo '<tr class="coupon-form"><td colspan="2">';<br /><br />wc_get_template(<br />'checkout/form-coupon.php',<br />array(<br />'checkout' => WC()->checkout(),<br />)<br />);<br /><br />echo '</td></tr>';<br />}</p>
<p>// Connect the function to a new location<br />add_action( 'woocommerce_review_order_after_shipping', 'woocommerce_checkout_coupon_form_custom' );</p>
<pre>

In the next step, we will add CSS. You can add this CSS by going to Appearance → Customize → Additional CSS.

.checkout_coupon.woocommerce-form-coupon {
display: block !important;
}

.woocommerce-form-coupon-toggle {
display: none;
}

WooCommerce, WooCommerce coupon form, checkout page WooCommerce, woocommerce_review_order_after_shipping, WordPress hooks, WooCommerce customization, functions.php, PHP WooCommerce, order review block,

Related Posts