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

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');