How to move the “coupon” field in WooCommerce

@morganelite

you need a php snippet and some CSS, because the fom is hardcoded to the Catr table

first add this to your childthemes funnction.php

add_action( 'woocommerce_proceed_to_checkout', 'display_coupon_form_below_proceed_checkout', 25 );
 
function display_coupon_form_below_proceed_checkout() {
   ?> 
      <form class="woocommerce-coupon-form" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">
         <?php if ( wc_coupons_enabled() ) { ?>
            <div class="coupon under-proceed">
               <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" style="width: 100%" /> 
               <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>" style="width: 100%"><?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?></button>
            </div>
         <?php } ?>
      </form>
   <?php
}

the use this in your CSS

div.coupon:not(.under-proceed) { 
display: none !important; 
}

WOW! Thank You! This worked – I appreciate your help.

Do you know a way to change the size of the “Proceed to checkout” & the “Apply Coupon” buttons on the WooCommerce Cart page?

Also where is the default colors code (and background color settings) for the headers (Billing, Shipping, etc.) located. Currently it is set to brown.

Amazing code. It works properly in cart page.
This code is not working in checkout page. Can anyone help to move coupon code below payment methods in checkout page?
Thank you.

if you want to move the coupon field to the bottom, you can add this to your functions.php file:

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

add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form' );

Thanks @nbeers22

Do you know if its possible to move it up slightly so it appears above the [Your Order] section?