1

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!

Improve this question

1 Answer 1

Reset to default
0

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):

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Hi LoicTheAztec, Thank you for your advice and expertise, unfortunately the shipping cost/options are still not updating when the jquery select field for postcode is changed. Shipping is updated correctly if the postcode field is a standard text box. If CA isn't selected and I enter in the postcode 90210 the shipping area is updated to reflect shipping costs/options: !no-jquery select If I select CA for the state and postcode is changed using select: !Jquery select
@FrontRange Strange because on my test website everything works perfectly (and my jQuery code trigger "checkout_update" which refresh everything just as with a postcode). You should try to add all related code in your question as we don't know how you get that "CO" state (If you update your question, please notify me here).
On WP 4.9.8. Using the Storefront theme (although seeing the same thing with others -- eg TwentySeventeen). Minimal plugins active. Only code in functions.php is what you sent above (I have changed my test to use CA over CO (Colorado). And CA zip codes. Shipping zones for four zip codes set to have free local pickup and different delivery fees. 90210 $10 or free pickup. 92029 $15 or free pickup. etc. Delivery fee does not change as zip is changed in drop down.
Fees do update correctly (if I choose a state other than CA so zip remains text field) and I type in zip (90210, 92029, etc.) Shipping zones and associated fees need to be setup in WooCommerce to show this behavior.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.