Apply coupon code on Woocommerce checkout page with AJAX

I moved the Woocommerce coupon form by editing the review-order.php based on this method

I would like to know if it's possible to make the coupon code apply with AJAX (without reloading the page) like in the cart page. I don't know where to start, please help.

Solutions

as per your shared link, if you follow the same means you are using the coupon form inside the checkout form, so you should remove the coupon form tag and then use it.

  1. Copy woocommerce review-order.php and past inside your active then woocommerce folder.

  2. Open review-order.php and past coupon HTML inside table structure like this:

    <tr class="coupon_checkout">
    
     <td colspan="2">
    
         <?php
         if ( ! defined( 'ABSPATH' ) ) {
         exit; // Exit if accessed directly
         }
    
         if ( ! wc_coupons_enabled() ) {
         return;
         }
    
         ?>
         <a href="#" class="showcoupon"><i class="fa fa-plus"></i> REDEEM A PROMO CODE/GIFT VOUCHER</a>
         <div class="checkout_coupon" method="post" style="display:none">
    
             <p class="form-row form-row-first">
             <input type="text" name="coupon_code" class="input-text" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" id="checkout_coupon_code" value="" />
             </p>
    
             <p class="form-row form-row-last">
             <input id="checkout_apply_coupon" type="button" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply Coupon', 'woocommerce' ); ?>" />
             </p>
         </div>
     </td>
    </tr>
    
  3. Add jQuery code either your custom.js file or directly on the footer page like this:

     <script>
     jQuery(document).on('click','#checkout_apply_coupon', function() {
         // Get the coupon code
         var code = jQuery( '#checkout_coupon_code').val();
         var button = jQuery( this );
         data = {
             action: 'ajaxapplucoupon',
             coupon_code: code
         };
         button.html( 'wait.');
         // Send it over to WordPress.
         jQuery.post( wc_checkout_params.ajax_url, data, function( returned_data ) {
             if( returned_data.result == 'error' ) {
                 jQuery( 'p.result' ).html( returned_data.message );
             } else {
                 setTimeout(function(){
                 //reload with ajax
                 jQuery(document.body).trigger('update_checkout');
                     button.html( 'Apply');
                 }, 2000);
                 console.log( returned_data+code );
             }
         })
     }); 
    </script>
    

As i have tested on my checkout page it's working perfectly like this: https://www.loom.com/share/7dfc833895d248f191ba327cf5290403

Tags: PHP / Ajax / Wordpress

Similar questions

Hide coupon discount raw if no coupon has been applied on WooCommerce cart page
I add coupons and discounts total savings to my cart page. My code works fine but I have an additional question. This is the code I am currently using: Currently: if no coupons are applied, it shows 0. My question: How can I hide the table output when 0 is displayed?
Can't auto refresh a checkout page after adding/removing a coupon (EA Woo Checkout)
Problem: Checkout page shows a correct translated price, but it turns to a default language price after adding / removing a coupon code. When I refresh the page manually, it shows a translated language price. Need Help: Would you please let me know how to auto refresh the checkout page after adding/removing a coupon? Action I took: I tired these co...
How to refresh/reload WooCommerce checkout page after adding a coupon code (wordpress)?
I need to reload the entire WooCommerce checkout page after adding a coupon code. I tried the following code but it doesn't reload it. The reason why I need this function: Prices of the review table turns to defalut language prices after adding the coupon code. When I refresh the page, it shows translated language prices, so I need to reload it. Wo...
Apply Coupon code discount to the final order total
We sell trails and the trails are "products" in WooCommerce. >> Check this link Try clicking on the "Let's Play" link and it will take you to the checkout. >> (Screenshot) The price of each trail is set to zero (in WooCommerce admin) because the pricing is "per person". We had to use the following code snippet to make the products "work", with the ...
Without coupon = Shipping free, with coupon = with shipping - WooCommerce
I need help for my WooCommerce Shop. Our customers get free shipping after a amount of 39€. If our customers get a price under 39€ after using a coupon, shipping is no more free. So for example: Customers is on Cart, full cart amount is 42€ = Shipping Free. Use -15% off Coupon = cart amount is 38,55 = Shipping costs <- but this still have to be ...
Check if coupon is applied in WooCommerce using coupon shortcode form
I have a shortcode (which works fine) that applies coupons and it does so using custom messages. Everything works fine except for one thing: if a coupon is applied and the user makes the "mistake" of trying to apply it again - it gives the error that the coupon does not exist. I'm trying to modify this behavior, but with my latest update ...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.