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 code in a checkout page / footer, but it doesn't refresh the page.
Console shows no error.

jQuery(document).ajaxComplete(function(event, xhr, settings) {
    if (settings.url === '/?wc-ajax=apply_coupon' || settings.url === '/?wc-ajax=remove_coupon') {
location.reload();
    }
});

jQuery(document).ajaxComplete(function(event, xhr, settings) {
    if (settings.url === '/?apply_coupon' || settings.url === '/?remove_coupon') {
    jQuery('body').trigger('update_checkout');
    }
});

Order review table (Essential Addons for Elementor - EA Woo Checkout):

<div class="ea-woo-checkout-order-review">
        <div class="ea-checkout-review-order-table">
            <ul class="ea-order-review-table">
                                    <li class="table-header">
                        <div class="table-col-1"></div>
                        <div class="table-col-2"></div>
                        <div class="table-col-3"></div>
                                   </li>
                
        <li class="table-row cart_item">
        <div class="table-col-1 product-thum-name">
        <div class="product-thumbnail">
        <img width="300" height="200" src="https://www.myweb.com/wp-content/uploads/2021/06/LineOne_22-300x200.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy">                              </div>
        <div class="product-name">Template Type&nbsp;&nbsp;</div>
        </div>
                                <div class="table-col-2 product-quantity">1</div>
                                <div class="table-col-3 product-total"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>820,000</bdi></span></div>
        </li>
        </ul>

        <div class="ea-order-review-table-footer">
        <div class="footer-content">
        <div class="cart-subtotal">
            <div></div>
            <div><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>820,000</bdi></span></div>
        </div>
        <div class="order-total">
        <div></div>
        <div><strong><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>820,000</bdi></span></strong> </div>
        </div>
                        </div>
        </div>
</div>
</div>

Apply coupon:

<div class="woo-checkout-coupon">
            <div class="ea-coupon-icon"><i aria-hidden="true" class="fas fa-percent"></i></div>
                            <div class="woocommerce-form-coupon-toggle">
    <div class="woocommerce-info">
        Have a coupon? <a href="#" class="showcoupon">Click here to enter your code</a> </div>
                </div>

                <form class="checkout_coupon woocommerce-form-coupon" method="post" style="">

                    <p>If you have a coupon code, please apply it below.</p>

                    <p class="form-row form-row-first">
                        <input type="text" name="coupon_code" class="input-text" placeholder="Coupon code" id="coupon_code" value="">
                    </p>

                    <p class="form-row form-row-last">
                        <button type="submit" class="button" name="apply_coupon" value="Apply Coupon">Apply Coupon</button>
                    </p>

                    <div class="clear"></div>
                </form>
</div>

Thank you.

Solutions

You are doing the things a bit wrong. I've first searched for a list of WooCommerce jQuery events and found this:

https://wordpress.stackexchange.com/questions/342148/list-of-js-events-in-the-woocommerce-frontend

Corresponding to the post, your jQuery code needs a redesign:

(function ( $ ) {
    $( document ).ready( function () {
        $( document.body ).on( 'applied_coupon_in_checkout removed_coupon_in_checkout', function () {
            location.reload();
        } );
    } );
})( jQuery );

This answers your question. But if it's a good design, reloading the page every time is a thing you should think about.

Similar questions

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 ...
Display the total amount of sales generated by coupon in a new column on WooCommerce admin coupon list
I am using the following code https://www.businessbloomer.com/woocommerce-calculate-sales-coupon-code/ that allows me to display the total amount of sales generated by a given coupon code in a new tab on WooCommerce "Reports". However, my intention is to display the total amount of sales generated by coupon in a new column on WooCommerce ...
Check if coupon is applied in woo commerce
I need to find a way to check if a coupon is applied to Woocommerce checkout, if so I would like to do something. I have tried searching around for this and cannot find a solution. here is a slimmed down version of what I am trying: So is this not the right way to check if the coupon exists in cart? if( $woocommerce->cart->applied_coupons ===...
How to extract Woo Commerce Gift Card redeemed value from data using Smart Coupon
How can I extract gift card redeemed value from Woo Commerce order using PHP and WC classes? I have an e-commerce site using wordpress and woo-commerce, now using the smart-coupon woocommerce plugin extension. I am trying to parse out the order discount separately from any gift cards redeemed for an order to capture and process correctly for our ER...
woo commerce change the word shipping to delivery (Gutenberg woo commerce block)
Hi every one let me try to explain this. PLEASE NOTE: i use the woo commerce block plugin (for the cart and checkout pages to replace the original shortcode) i want to change my instances where the word shipping is to change to the word Delivery i use this hook in my functions.php and it did change the one word to delivery so that worked as you can...
Why adding Categories does not auto refresh in Backend while using my custom theme?
If I am using my own created custom theme, the Post Categories Page in admin panel is not getting updated automatically when I add a new Category. To see the new category I have to reload the page Manually. When I change to default themes it works as perfectly. So the problem is in my theme. I think I must have missed something in my functions file...

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.