WooCommerce Shipping State Select

Question

I need to override all states in WooCommerce checkout but I need to do this only for shipping section.

So "billing_state" is working fine with all current Italian states and I need to override only "shipping_state" with new states.

With code below will override both billing_states and also shipping states. How can I modify code in order to override "shipping_states"

Thanks in advance

add_filter( 'woocommerce_states', 'custom_woocommerce_states' );

  function custom_woocommerce_states( $states ) {
  $states['IT'] = array(
    //I have to display only these 3 states in shipping Checkout
    'TV' => 'Treviso',
    'CA' => 'Carità',
    'CS' => 'Castrette',
  );

  return $states;
}

Answer 1

This is what you are looking for. Add this to your active child themes functions.php

Refer to this WebToffee article

add_action( 'wp_footer', 'webtoffee_checkout_shipping_filter_it_states' );

function webtoffee_checkout_shipping_filter_it_states() {
   if ( ! is_checkout() ) {
      return;
   }
   ?>

   <script>
   jQuery(document).ready(function($) {

      $(document.body).on('country_to_state_changed', function() {

         var $shipping_country = $('#shipping_country');

         var new_shipping_state = '';

         switch($shipping_country.val()) {
            case 'IT':
               new_shipping_state =  {'TV': "Treviso", "CA": "Carità", "Cs": "Castrette"};
               break;
         }

             if( ! $.isEmptyObject(new_shipping_state)) {

                var optionsAsString = "";
                for (var key in new_shipping_state) {
                    optionsAsString += "<option value='" + key + "'>" + new_shipping_state[key] + "</option>";
                }
                $( 'select[name="shipping_state"]' ).html( optionsAsString );

             } 

      });

   });  
   </script>

   <?php
}