Change some checkout fields type using jQuery for a specific state in Woocommerce

Question

I am trying to implement some conditional fields on checkout in Woocommerce.

Objective: If user selects a specific state (CO) change the BILLING/SHIPPING CITY and POSTCODE text fields to select fields. Shipping needs to update according to value of POSTCODE.

I am using Jquery to update the CITY and POSTCODE fields when a specific state is selected. This works fine, however shipping is not updated when the fields are changed to select type fields -- selecting a different zip from the select field causes the spinning update graphic on the order review/shipping table but nothing is updated to reflect the selected value.

Shipping updates fine when the POSTCODE field is a standard text field and is changed with keyboard input.

What I am working with currently:

function city_to_dropdown( $fields ) {

    ?>
    <script type="text/javascript">

jQuery('#billing_state').on('change', function() {

            if (jQuery("select#billing_state option:checked").val()=='CO') {

              jQuery( document ).ready(function() {

              jQuery("#billing_city").replaceWith('<select id="billing_city" name="billing_city" class="hi_select address-field" autocomplete="address-level1" data-placeholder="" tabindex="-1">' +
             '<option value="" selected>- Select City -</option>' +
          '<option value="TEST1">TEST1</option>' +
          '<option value="TEST2">TEST2</option>' +
          '<option value="TEST3">TEST3</option>' +
          '<option value="TEST4">TEST4</option>' +
          '<option value="TEST5">TEST5</option>' +
        '</select>');
                            jQuery("#shipping_city").replaceWith('<select id="shipping_city" name="shipping_city" class="hi_select address-field" autocomplete="address-level1" data-placeholder="" tabindex="-1" >' +
          '<option value="" selected>- Select City -</option>' +
                                                                 '<option value="" selected>- Select City -</option>' +
          '<option value="TEST1">TEST1</option>' +
          '<option value="TEST2">TEST2</option>' +
          '<option value="TEST3">TEST3</option>' +
          '<option value="TEST4">TEST4</option>' +
          '<option value="TEST5">TEST5</option>' +
        '</select>');

              jQuery("#billing_postcode").replaceWith('<select id="billing_postcode" name="billing_postcode" class="hi_select address-field" autocomplete="address-level1" data-placeholder="" tabindex="-1" >' +
          '<option value="" selected>- Select Zip -</option>' +
                                                      '<option value="96734">96734</option>' +
          '<option value="96744">96744</option>' +
          '<option value="96795">96795</option>' +
          '<option value="96863-MCB">96863-MCB</option>' +

        '</select>');

              jQuery("#shipping_postcode").replaceWith('<select id="shipping_postcode" name="shipping_postcode" class="hi_select address-field" autocomplete="address-level1" data-placeholder="" tabindex="-1">' +
          '<option value="" selected>- Select Zip -</option>' +
                                                       '<option value="96734">96734</option>' +
          '<option value="96744">96744</option>' +
          '<option value="96795">96795</option>' +
          '<option value="96863-MCB">96863-MCB</option>' +

        '</select>');
              } ); 
            } else {

              jQuery("#billing_city").replaceWith('<input type="text" class="input-text address-field " name="billing_city" id="billing_city" placeholder="" value="" autocomplete="address-level2">');
              jQuery("#billing_postcode").replaceWith('<input type="text" class="input-text address-field " name="billing_postcode" id="billing_postcode" placeholder="" value="" autocomplete="postal-code">');            
              jQuery("#shipping_city").replaceWith('<input type="text" class="input-text address-field " name="shipping_city" id="shipping_city" placeholder="" value="" autocomplete="address-level2">');
              jQuery("#shipping_postcode").replaceWith('<input type="text" class="input-text address-field " name="shipping_postcode" id="shipping_postcode" placeholder="" value="" autocomplete="postal-code">');
            }

        });





    </script>       

    <?php




}
add_filter( 'woocommerce_after_checkout_billing_form', 'city_to_dropdown' );

Thanks!

Answer 1

As the state "CO" doesn't exist by default in Woocommerce for any country, I have used "CA" (California) as state (And USA as country) for testing purpose.

So I have revisited, optimized and compacted your code (separating billing than shipping).

Try the following instead:

add_action( 'wp_footer', 'change_checkout_fields_script' );
function change_checkout_fields_script() {
    // Only checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ):
    ?>
    <script type="text/javascript">
        jQuery(function($){
            var state = 'CO';

            // Utility function to convert billing or shipping city and postcode checkout fields based on state
            function cityPostcodeChange( state, type, update = false ) {
                if ($('#'+type+'_state').val() == state) {
                    $('#'+type+'_city').replaceWith('<select id="'+type+'_city" name="'+type+'_city" class="hi_select address-field" autocomplete="address-level1" data-placeholder="" tabindex="-1">' +
                    '<option value="" selected>- Select City -</option>' +
                    '<option value="TEST1">TEST1</option>' +
                    '<option value="TEST2">TEST2</option>' +
                    '<option value="TEST3">TEST3</option>' +
                    '<option value="TEST4">TEST4</option>' +
                    '<option value="TEST5">TEST5</option>' +
                    '</select>');
                    $('#'+type+'_postcode').replaceWith('<select id="'+type+'_postcode" name="'+type+'_postcode" class="hi_select address-field" autocomplete="address-level1" data-placeholder="" tabindex="-1" >' +
                    '<option value="" selected>- Select Zip -</option>' +
                    '<option value="96734">96734</option>' +
                    '<option value="96744">96744</option>' +
                    '<option value="96795">96795</option>' +
                    '<option value="96863-MCB">96863-MCB</option>' +
                    '</select>');
                } else {
                    $(''+type+'_city').replaceWith('<input type="text" class="input-text address-field " name="'+type+'_city" id="'+type+'_city" placeholder="" value="" autocomplete="address-level2">');
                    $('#'+type+'_postcode').replaceWith('<input type="text" class="input-text address-field " name="'+type+'_postcode" id="'+type+'_postcode" placeholder="" value="" autocomplete="postal-code">');
                }
                // Update checkout
                if( update )
                    $('body').trigger('update_checkout');
            }

            // 1. Once DOM is loaded
            cityPostcodeChange( state, 'billing' );
            cityPostcodeChange( state, 'shipping' );

            // 2. On "state" field change event
            $('#billing_state').on('change', function() {
                cityPostcodeChange( state, 'billing', true );
            });
            $('#shipping_state').on('change', function() {
                cityPostcodeChange( state, 'shipping', true );
            });
        });
    </script>
    <?php
    endif;
};

Code goes in function.php file of your active child theme (or active theme). Tested and works.

---

With "CA" (California) as state (And USA as country):