WooCommerce - Add Country/State Select Fields to Registration Form?

Question

I've read through, and followed the following tutorial How to add custom fields in user registration on the "My Account" page and successfully added several custom fields to the registration form on the My Account page (seen when users are logged out).

I'd like to add billing country/state as select fields if the shop owner has defined them. (i.e. If the shop only services Canada, load only Provinces).

Unfortunately the tutorial doesn't cover select fields, just basic text fields. I did find another thread that lists how to add countries but it's all countries, not the ones specified by the shop owner.

Anyone have any further insight in loading Countries/Provinces/States that are set by the shop owner? So far I've got the following:

/**
 * Add new register fields for WooCommerce registration.
 *
 * @return string Register fields HTML.
 */
function wooc_extra_register_fields() {

    $countries_obj = new WC_Countries();
    $countries = $countries_obj->__get('countries');
?>

    <fieldset>
        <legend><h3>Address</h3></legend>
        <p>Please provide the main contact address for this account.</p>
        <p class="form-row form-row-wide">
            <label for="reg_billing_address_1"><?php _e( 'Address', 'woocommerce' ); ?> <span class="required">*</span></label>
            <input type="text" class="input-text" name="billing_address_1" id="reg_billing_address_1" placeholder="Street/P.O Box address" value="<?php if ( ! empty( $_POST['billing_address_1'] ) ) esc_attr_e( $_POST['billing_address_1'] ); ?>" />
        </p>

        <div class="clear"></div>

        <p class="form-row form-row-wide">
            <label for="reg_billing_address_2"><?php _e( 'Address Line 2', 'woocommerce' ); ?></label>
            <input type="text" class="input-text" name="billing_address_2" id="reg_billing_address_2" placeholder="Apartment, suite, unit etc. (optional)" value="<?php if ( ! empty( $_POST['billing_address_2'] ) ) esc_attr_e( $_POST['billing_address_2'] ); ?>" />
        </p>

        <div class="clear"></div>

        <p class="form-row form-row-wide">
            <label for="reg_billing_city"><?php _e( 'Town/City', 'woocommerce' ); ?> <span class="required">*</span></label>
            <input type="text" class="input-text" name="billing_city" id="reg_billing_city" value="<?php if ( ! empty( $_POST['billing_city'] ) ) esc_attr_e( $_POST['billing_city'] ); ?>" />
        </p>

        <div class="clear"></div>  

        <p class="form-row form-row-wide">
            <label for="reg_billing_postcode"><?php _e( 'Postal Code', 'woocommerce' ); ?></label>
            <input type="text" class="input-text" name="billing_postcode" id="reg_billing_postcode" value="<?php if ( ! empty( $_POST['billing_postcode'] ) ) esc_attr_e( $_POST['billing_postcode'] ); ?>" />
        </p>

        <div class="clear"></div>

        <p class="form-row form-row-wide">
            <label for="reg_billing_country"><?php _e( 'Country', 'woocommerce' ); ?> <span class="required">*</span></label>
            <select class="country_select" name="billing_country" id="reg_billing_country">
                <?php foreach ($countries as $key => $value): ?>
                <option value="<?php echo $key?>"><?php echo $value?></option>
                <?php endforeach; ?>
            </select>
        </p>
    </fieldset>   

    <?php
}

add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );

Solution 1

To add Woocommerce Country/State fields in some other form use the following code in template:

<?php
$field = [
        'type' => 'country',
        'label' => 'Country',
        'required' => 1,
        'class' => ['address-field']
];
woocommerce_form_field( 'billing_country', $field, '' );
$field = [
    'type' => 'state',
    'label' => 'State',
    'required' => 1,
    'class' => ['address-field'],
    'validate' => ['state']
];
woocommerce_form_field( 'billing_state', $field, '' );
?>

To tie the Country field selection with State field options put these fields into some container with class woocommerce-billing-fields AND include woocommerce country-select.js at page with the form:

<?php
$handle = 'wc-country-select';
wp_enqueue_script($handle, get_site_url().'/wp-content/plugins/woocommerce/assets/js/frontend/country-select.min.js', array('jquery'), true);
?>

Solution 2

Maybe it's too late but :

Instead of :

<p class="form-row form-row-wide">
        <label for="reg_billing_country"><?php _e( 'Country', 'woocommerce' ); ?> <span class="required">*</span></label>
        <select class="country_select" name="billing_country" id="reg_billing_country">
            <?php foreach ($countries as $key => $value): ?>
            <option value="<?php echo $key?>"><?php echo $value?></option>
            <?php endforeach; ?>
        </select>
    </p>

place :

<?php  
$countries_obj   = new WC_Countries();
$countries   = $countries_obj->get_allowed_countries();

woocommerce_form_field('billing_country', array(
'type'       => 'select',
'class'      => array( 'chzn-drop' ),
'label'      => __('Pays'),
'placeholder'    => __('Sélectionnez un pays'),
'options'    => $countries
)
); ?>

You'll get a select dropdown of allowed countries

If you want a list of all countries, replace "get_allowed_countries();" by "__get('countries');"

Source

States are treated in this source

Comments

[Lorenzo Magon]

Thank you, I was looking for the part js that runs cascade the state and province fields, I used it to implement a custom registration form.

[Lorenzo Magon]

Thank you, I found the filter useful to get only those enabled in woocommerce.