Refresh Mini cart on shipping or payment method change in WooCommerce checkout

Question

I'm trying to trigger the WooCommerce Mini Cart to update when someone changes the Shipping Method or Payment Method on the Checkout page.

I tried using the following code:

add_action( 'wp_footer', 'custom_minicart_checkout_jqscript' );
function custom_minicart_checkout_jqscript() {
    if ( ! ( is_checkout() && ! is_wc_endpoint_url() ) )
        return; // Only Checkout Page
    ?>
    <script type="text/javascript">
    jQuery( function($){
        $('form.checkout').on('change', 'input', function(){
            $(document.body).trigger('wc_fragment_refresh');
        });
    });
    </script>
    <?php
}

But it displays the previous total instead of the current total when customer make changes on selected Shipping Method or/and Payment Method.

UPDATE I tested the following solution but I'm getting the same result. You can see it on this video (download video to view in high quality). I removed non-essential plugins and clear the functions.php file. It seems possible but for some reason the mini cart update is delayed by the previous total.

Answer 1

Try to use the following instead, delegating the change event to document.body and targeting specifically shipping methods and payment methods changes:

add_action('wp_footer', 'minicart_checkout_refresh_script');
function minicart_checkout_refresh_script(){
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script type="text/javascript">
    (function($){
        $(document.body).on('change', 'input[name="payment_method"],input[name^="shipping_method"]', function(){
            $(document.body).trigger('update_checkout').trigger('wc_fragment_refresh');
        });
    })(jQuery);
    </script>
    <?php
    endif;
}

Code goes in functions.php file of the active child theme (or active theme). It should better work.

Note: There is not any calculated total in mini cart, but only cart items subtotal… You can see that on WooCommerce default template cart/mini-cart.php file. So there is nothing to be refreshed or updated in default WooCommerce mini cart on checkout page.