The Issue
I’m working on customizing the WooCommerce checkout page by reordering the countries in the billing_country and shipping_country dropdown fields. I’ve achieved this by using the woocommerce_checkout_fields filter to modify the fields’ options.

However, after making these customizations, I’m facing an issue where the billing_state field doesn’t update correctly when the billing_country field is changed. The state/province options remain the same, regardless of the selected country.

Current Code (Previous Stackoverflow Post)
Here’s the code I’m using to reorder the countries and apply the Select2 (selectWoo) functionality:

// Reorder and customize the country dropdowns
add_filter('woocommerce_checkout_fields', 'reorder_checkout_country_dropdowns');
function reorder_checkout_country_dropdowns($fields)
{
    $countries_array = array_merge(
        array(
            'DE' => 'Germany',
            'AT' => 'Austria',
            'CH' => 'Switzerland',
            '-' => '------------',
        ),
        WC()->countries->get_allowed_countries()
    );

    $fields['billing']['billing_country']['type'] = $fields['shipping']['shipping_country']['type'] = 'select';
    $fields['billing']['billing_country']['options'] = $fields['shipping']['shipping_country']['options'] = $countries_array;

    return $fields;
}

// Enqueue JavaScript to apply Select2 functionality
add_action('woocommerce_checkout_init', 'enable_back_selectWoo_on_countries_dropdowns');
function enable_back_selectWoo_on_countries_dropdowns()
{
    wc_enqueue_js("$('#billing_country,#shipping_country').selectWoo();");
}

Attempted Solutions
This code reorders the countries in the dropdowns and applies the Select2 (selectWoo) functionality. However, it doesn’t address the issue with the billing_state field not updating correctly when the billing_country is changed.

I’ve tried various approaches, such as adding an event listener to the billing_country field and updating the billing_state field accordingly, but I haven’t been able to find a solution that works consistently.

The Question
How can I ensure that the billing_state field updates with the correct state/province options when the billing_country field is changed, even after customizing the country dropdown?

Image example to show the issue

Shows Wrong State Selection for Billing Country Austria

As you can see in the image above, when “Austria – Österreich” is selected as the billing country in the WooCommerce checkout, the state selection field is incorrectly showing the states/provinces for “Germany” instead of the expected states/provinces for Austria.

The issue is not happening, when I comment out the second line add_filter('woocommerce_checkout_fields', 'reorder_checkout_country_dropdowns');

1