Move WooCommerce Coupon Code on the Checkout Page

For WooCommerce stores that offer coupons to their customers, there could be a problem with the location of the coupon code box on the checkout page. It’s hiding down the bottom of the page, and helpfully – it’s not visible by default. This can lead to lost orders, or customers emailing in for help – not an ideal situation!

When researching this problem, I couldn’t find any good (free) WordPress or WooCommerce plugins that provided a fix. There are a few code fixes that are out there, but they’re mostly quite complicated and prone to doing weird stuff in the UI. 🙁

The solution is very simple – it requires a bit of additional code in the current themes’ functions.php file. What the code below does is use a bit of simple JavaScript that moves the original coupon code section to a better location, then expands the box so it’s always displayed:

/**
 * Move coupon block to before payment block on checkout page
 * Set coupon code box to display by default (needs a short delay)
 */
add_action( 'woocommerce_before_checkout_form', 'move_checkout_coupon_form', 5 );
function move_checkout_coupon_form() {
  if ( is_checkout() && ! is_wc_endpoint_url() ) :
  ?>
  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(event) {
      let coupon = document.querySelector('section.coupon-wrapper');
      let payment = document.querySelector('div#payment');
      let parent = document.querySelector('div#order_review');
      parent.insertBefore(coupon, payment);
      setTimeout(function () {
        document.querySelector('form.checkout_coupon.woocommerce-form-coupon').style.display = 'block';
        document.querySelector('form.checkout_coupon.woocommerce-form-coupon').style.width = '100%';
      }, 10);
    });		
  </script>
  <?php
  endif;
}

For custom checkout pages, some of the JavaScript selectors may need a couple adjustments. Then again, if it’s custom – the coupon box is probably already in a better spot!