Refresh checkout fields on add to cart with order bump

TLDR: My whole checkout page needs to refresh/update after an order bump (additional product) is added to the cart and I’m not sure how to do it. I’ve tried refreshing the page when the order bump is clicked (aka added or taken away), but it refreshes before the item is added to the cart, so the problem persists.

Here’s a Loom video showing the problem in real-time:
https://www.loom.com/share/8e49e8663f1c4599a306c9c9948636b2

—- Full Details —-

I use a modified checkout page to deliver free downloads via a simplified checkout page.

However, I also offer an order bump during this free checkout, which requires the page to be refreshed so the full billing fields can be shown (all are required for a paid checkout).

I’m running into an error where my checkout page is not updating to add the proper billing fields after an order bump is applied to the cart (via the checkbox to add an additional product to the order). This is because the cart refreshes via ajax, while the rest of the checkout page does not.

1) Here’s what the checkout page looks like before adding the upsell to the order:

2) This is what the checkout fields look like currently – you can see that the cart has been updated but the billing fields are still missing:

3) And here’s what the page should look like. If you refresh the page after adding the order bump it works as it should.

To replicate the error for yourself, add a free product to your cart from this page: https://blacklotusaudio.com/free-downloads/

Then, skip the popup offer and head to checkout. Once there, click to add the additional product to your order via the order bump checkbox. You’ll notice the billing fields stay the same unless you refresh the page, which is what I’m trying to resolve here.

So, my solution is to refresh the page after the product from order bump is added to cart, I’m just not 100% certain how best to do it.

I’ve tried adding a refresh on click to the order bump, but the page refreshes before the product is added to the cart, which leaves me in the exact same spot.

I’ve also considered disabling ajax on the checkout page, but I’m not sure how to do so properly.

Any help in resolving this issue would be much appreciated. I’m sure there has to be a simple solution that I’m just overlooking.

Thanks in advance!

P.S. Here’s the code that’s used to show/hide the checkout fields:

//Free Downloads code
function sv_free_checkout_fields() {

    // first, bail if WC isn't active since we're hooked into a general WP hook
    if ( ! function_exists( 'WC' ) ) {
        return; 
    }

    // bail if the cart needs payment, we don't want to do anything
    if ( WC()->cart && WC()->cart->needs_payment() ) {
        return;
    }

    // now continue only if we're at checkout
    // is_checkout() was broken as of WC 3.2 in ajax context, double-check for is_ajax
    // I would check WOOCOMMERCE_CHECKOUT but testing shows it's not set reliably
    if ( function_exists( 'is_checkout' ) && ( is_checkout() || is_ajax() ) ) {
                
add_filter( 'woocommerce_order_button_text', 'woo_custom_order_button_text' ); 

function woo_custom_order_button_text() {
    return __( 'SEND MY DOWNLOADS', 'woocommerce' ); 
}

add_filter( 'woocommerce_checkout_fields', 'misha_email_first' );
 
function misha_email_first( $checkout_fields ) {
    $checkout_fields['billing']['billing_email']['priority'] = 4;
    return $checkout_fields;
}
        
add_filter('woocommerce_mailchimp_woocommerce_newsletter_default_checked', function ($checked) {
    return true;
});

        // remove coupon forms since why would you want a coupon for a free cart??
        remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

        // Remove the "Additional Info" order notes
        add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );

        // Unset the fields we don't want in a free checkout
        add_filter( 'woocommerce_checkout_fields', function( $fields ) {

            // add or remove billing fields you do not want
            // fields: http://docs.woothemes.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/#section-2
            $billing_keys = array(
                'billing_last_name',
                'billing_company',
                'billing_phone',
                'billing_address_1',
                'billing_address_2',
                'billing_city',
                'billing_postcode',
                'billing_country',
                'billing_state',
            );

            // unset each of those unwanted fields
            foreach( $billing_keys as $key ) {
                unset( $fields['billing'][ $key ] );
            }

            return $fields;
        } );
    }

}
add_action( 'wp', 'sv_free_checkout_fields' );