You Are Here
PHPStackoverflow

WooCommerce Move or Remove Coupon @ Cart & Checkout Page

PHP

Coupon codes always help to generate more sales. These promo coupons convert potential audiences into product buyers. However, sometimes, these promo options stop users from placing orders. The reason being they keep searching coupon codes online before making payment. So, what if we learn about WooCommerce move or remove coupon form? Let’s learn how to enable this functionality.

You can either hide the coupon until the customer enters the email address. Alternatively, you can even move the coupon at the cart page bottom. This way, the users tend to concentrate on cart & checkout details. So, there are lesser events when they search for coupons online. In the end, it is beneficial for your e-commerce store. 

Let’s see how to do it with some PHP. 

Image of moved coupon at checkout page to enable Move or Remove Coupon Form functionality

PHP + CSS Snippet: Move WooCommerce Coupon form under ‘Proceed to Checkout’ at cart page

Firstly, you need to showcase a new coupon form under the ‘Proceed to Checkout’ button. This is done by using the right hook (‘woocommerce_proceed_to_checkout). It is the first step in learning move or remove coupon in WooCommerce.


add_action( 'woocommerce_proceed_to_checkout', 'phpsof_display_coupon_form_below_proceed_checkout', 25 );
 
function phpsof_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
}

Further, the existing coupon code is hardcoded into the cart table. Also, there is no PHP function that can be unhooked via remove_action. So, we need to apply CSS codes to hide the coupon code.

/* Hide the default coupon form @ WooCommerce Cart table */
/* I hate to use display:none but there is no other solution */
 
div.coupon:not(.under-proceed) { 
display: none !important; 
}

PHP Snippet 2: Remove ‘Have a Coupon?’ form at Checkout page

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

Where do you add this snippet?

So, you can smartly move or remove coupon at the checkout & cart page. Just add this PHP snippet at your child theme function.php file’s bottom. It should be placed before “?>”, if you have it there. Apart from this, CSS goes in your child theme style.css file. 

Is this snippet still valid?  

So, this is how you can move or remove coupon in WooCommerce. It will showcase or remove coupon at cart & checkout page. I have applied this code on the Storefront theme and WordPress friendly hosting PHP 7.3. Let me know if everything works as expected. Share it further if this snippet has saved your time.

Also Read, WooCommerce 10 PHP Snippets to Increase Sales

How to Implement WooCommerce Quantity based Pricing Without a Plugin

Important links: WooCommerce – https://woocommerce.com/

Related Posts