php - Using the WooCommerce API to get the country/state lists

Question

I"m using the WooCommerce API to get the country list. I am doing:

$woo_countries = new WC_Countries();
$countries = $woo_countries->get_allowed_countries();

However, how does one get the state list for the default selected country? Also, when the user changes the country, does Woo have something built in that I can apply to the country field to update the states box or do I have to build that functionality myself?

Also, I know I can get the states for a country via doing:

$woo_countries->get_states(country_code);

...but I'm not sure how to get the default selected country to pass in to it?

I also know they have a combined country/state list you can load in but that's really messy and far too long for usability.

Answer 1

Try this , You still need to go for some javascript to make it work.I do not know if there is any way by default to make state drop-down list work as according to country drop-down list.I think it is helpful, give a try and let me know, if it worked.

global $woocommerce;
$countries_obj   = new WC_Countries();
$countries   = $countries_obj->__get('countries');
$default_country = $countries_obj->get_base_country();
$default_county_states = $countries_obj->get_states( $default_country );

so this makes your countries dropdown

global $woocommerce;
$countries_obj   = new WC_Countries();
$countries   = $countries_obj->__get('countries');
echo '<div id="my_custom_countries_field"><h2>' . __('Countries') . '</h2>';

woocommerce_form_field('my_country_field', array(
'type'       => 'select',
'class'      => array( 'chzn-drop' ),
'label'      => __('Select a country'),
'placeholder'    => __('Enter something'),
'options'    => $countries
)
);
echo '</div>';

and State dropdown

    global $woocommerce;
    $countries_obj   = new WC_Countries();
    $countries   = $countries_obj->__get('countries');
    $default_country = $countries_obj->get_base_country();
    $default_county_states = $countries_obj->get_states( $default_country );

    echo '<div id="my_custom_state_field"><h2>' . __('States') . '</h2>';

    woocommerce_form_field('my_state_field', array(
    'type'       => 'select',
    'class'      => array( 'chzn-drop' ),
    'label'      => __('Select a state'),
    'placeholder'    => __('Enter something'),
    'options'    => $default_county_states
    )
    );
    echo '</div>';

You need some javascript to make it work as you want. You may consider going through woocommerce_form_field .

I have added the below code on my functions.php and the screenshot shows what I am getting .Need to know about your checkout page to make it better.

"I believe it is all about creating the same HTML elements as in default checkout page."

//Reordering woocommerce billing form on checkout page
add_filter( 'woocommerce_checkout_fields','reorder_woo_billing_fields' );
function reorder_woo_billing_fields( $fields ) {
    //$fields2['billing']['billing_email'] = $fields['billing']['billing_email'];
    $fields2['billing']['billing_first_name'] = $fields['billing']['billing_first_name'];
    $fields2['billing']['billing_last_name'] = $fields['billing']['billing_last_name'];
    $fields2['billing']['billing_company'] = $fields['billing']['billing_company'];
    $fields2['billing']['billing_address_1'] = $fields['billing']['billing_address_1'];
    $fields2['billing']['billing_address_2'] = $fields['billing']['billing_address_2'];
    $fields2['billing']['billing_city'] = $fields['billing']['billing_city'];
    $fields2['billing']['billing_country'] = $fields['billing']['billing_country'];
    $fields2['billing']['billing_state'] = $fields['billing']['billing_state'];
    $fields2['billing']['billing_postcode'] = $fields['billing']['billing_postcode'];
    $fields2['billing']['billing_phone'] = $fields['billing']['billing_phone'];

    $fields2['billing']['billing_country']['class'] = array('box', 'form-row form-row-first address-field update_totals_on_change validate-required woocommerce-validated');
    $fields2['billing']['billing_state']['class'] = array('box', 'form-row form-row-last address-field validate-required validate-state woocommerce-invalid woocommerce-invalid-required-field');
    $fields2['billing']['billing_postcode']['class'] = array('box', 'form-row form-row-first address-field validate-required validate-postcode');
    $fields2['billing']['billing_phone']['class'] = array('box', 'form-row form-row-last validate-required validate-phone');
    //$fields2['billing']['billing_email']['class'] = array('box', 'form-row form-row-wide validate-required validate-email');
    $fields2['billing']['billing_postcode']['clear'] = '';
    $fields2['shipping'] = $fields['shipping'];
    $fields2['account'] = $fields['account'];
    $fields2['order'] = $fields['order'];

     return $fields2;
}


add_action( 'woocommerce_checkout_init', 'woocommerce_countries_states', 10, 1 );
function woocommerce_countries_states( $checkout ) {
    global $woocommerce;
    $countries_obj   = new WC_Countries();
    $countries   = $countries_obj->__get('countries');
    $default_country = $countries_obj->get_base_country();
    $default_county_states = $countries_obj->get_states( $default_country );


    $checkout->checkout_fields['account']['billing_country'] = array(
        'type'              => 'select',
        'label'             => __( 'Default Contries', 'woocommerce' ),
        'required'          => true,
        'options'    => $countries
    );

    $checkout->checkout_fields['account']['billing_country'] = array(
        'type'              => 'select',
        'label'             => __( 'Default Contries', 'woocommerce' ),
        'required'          => true,
         'options'    => $default_county_states
    );
}

HTML I am getting is somehow like( For country chosen United States(US) ):-

<p class="form-row form-row box form-row form-row-first address-field update_totals_on_change validate-required woocommerce-validated validate-required" id="billing_country_field"><label for="billing_country" class="">Country <abbr class="required" title="required">*</abbr></label><div class="select2-container country_to_state country_select" id="s2id_billing_country" style="width: 100%;"><a href="javascript:void(0)" class="select2-choice" tabindex="-1">   <span class="select2-chosen" id="select2-chosen-1">United States (US)</span><abbr class="select2-search-choice-close"></abbr>   <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen1" class="select2-offscreen">Country *</label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-1" id="s2id_autogen1"></div><select name="billing_country" id="billing_country" class="country_to_state country_select " tabindex="-1" title="Country *" style="display: none;"><option value="">Select a country…</option><option value="AX">?land Islands</option><option value="AF">Afghanistan</option><option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AD">Andorra</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AQ">Antarctica</option><option value="AG">Antigua and Barbuda</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AW">Aruba</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AZ">Azerbaijan</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option><option value="BD">Bangladesh</option><option value="BB">Barbados</option><option value="BY">Belarus</option><option value="PW">Belau</option><option value="BE">Belgium</option><option value="BZ">Belize</option><option value="BJ">Benin</option><option value="BM">Bermuda</option><option value="BT">Bhutan</option><option value="BO">Bolivia</option><option value="BQ">Bonaire, Saint Eustatius and Saba</option><option value="BA">Bosnia and Herzegovina</option><option value="BW">Botswana</option><option value="BV">Bouvet Island</option><option value="BR">Brazil</option><option value="IO">British Indian Ocean Territory</option><option value="VG">British Virgin Islands</option><option value="BN">Brunei</option><option value="BG">Bulgaria</option><option value="BF">Burkina Faso</option><option value="BI">Burundi</option><option value="KH">Cambodia</option><option value="CM">Cameroon</option><option value="CA">Canada</option><option value="CV">Cape Verde</option><option value="KY">Cayman Islands</option><option value="CF">Central African Republic</option><option value="TD">Chad</option><option value="CL">Chile</option><option value="CN">China</option><option value="CX">Christmas Island</option><option value="CC">Cocos (Keeling) Islands</option><option value="CO">Colombia</option><option value="KM">Comoros</option><option value="CG">Congo (Brazzaville)</option><option value="CD">Congo (Kinshasa)</option><option value="CK">Cook Islands</option><option value="CR">Costa Rica</option><option value="HR">Croatia</option><option value="CU">Cuba</option><option value="CW">Cura?ao</option><option value="CY">Cyprus</option><option value="CZ">Czech Republic</option><option value="DK">Denmark</option><option value="DJ">Djibouti</option><option value="DM">Dominica</option><option value="DO">Dominican Republic</option><option value="EC">Ecuador</option><option value="EG">Egypt</option><option value="SV">El Salvador</option><option value="GQ">Equatorial Guinea</option><option value="ER">Eritrea</option><option value="EE">Estonia</option><option value="ET">Ethiopia</option><option value="FK">Falkland Islands</option><option value="FO">Faroe Islands</option><option value="FJ">Fiji</option><option value="FI">Finland</option><option value="FR">France</option><option value="GF">French Guiana</option><option value="PF">French Polynesia</option><option value="TF">French Southern Territories</option><option value="GA">Gabon</option><option value="GM">Gambia</option><option value="GE">Georgia</option><option value="DE">Germany</option><option value="GH">Ghana</option><option value="GI">Gibraltar</option><option value="GR">Greece</option><option value="GL">Greenland</option><option value="GD">Grenada</option><option value="GP">Guadeloupe</option><option value="GT">Guatemala</option><option value="GG">Guernsey</option><option value="GN">Guinea</option><option value="GW">Guinea-Bissau</option><option value="GY">Guyana</option><option value="HT">Haiti</option><option value="HM">Heard Island and McDonald Islands</option><option value="HN">Honduras</option><option value="HK">Hong Kong</option><option value="HU">Hungary</option><option value="IS">Iceland</option><option value="IN">India</option><option value="ID">Indonesia</option><option value="IR">Iran</