WooCommerce Country Selection on Registration

Question

I'm currently trying to add the default country searcher from WooCommerce to the registration page, while a default list of countries is possible with the following code snippet:

<?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'     => __('Country'),
'placeholder' => __('Choose your country.'),
'options'   => $countries,
'required'  => true,
'clear'     => true
));
?>

It's of course not the same as the original country select from WooCommerce, so I was wondering if anyone knows the right way to add this Country Selection field to the registration page.

Edit: if I understand it correctly, you would require to load a JavaScript library for the dropdown to work properly, how would someone load this onto the registration page exactly AND how would someone set the default country for example to 'Belgium'?

Edit2: Seems it has something to do with this part of script for the Country Selector:

<script type='text/javascript' src='//uklederwaren.be/wp-content/plugins/woocommerce/assets/js/frontend/country-select.min.js?ver=2.6.14'></script>

Not exactly sure how to add this exactly to the registration page as I'm sure it has something to do with a loop of the allowed countries and what not, so any help would be appreciated!

Edit3: I found an answer of one of my side questions how I would be able to set the default country and this could be done by adding the 'default' => 'XX', in the woocommerce_form_field array. The XX stands for the country code, so for Belgium this would be BE.

Thanks in advance for further information.

TL;DR:

Conclusion: The problem was solved with both the help of HelgaTheVviking and Raunak Gupta, where my currently full code for the whole registration page including all the sections (and a custom vat page) is the following:

/* ---------------------- Registration page ----------------------- */
//Add extra fields in registration form
add_action('woocommerce_register_form_start','my_extra_register_fields');
function my_extra_register_fields(){
?>
    <p class="woocommerce-FormRow form-row form-row-first">
        <label for="reg_billing_first_name"><?php _e('First Name','woocommerce'); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_first_name" id="reg_billing_first_name" value="<?php if(! empty($_POST['billing_first_name'])) esc_attr_e($_POST['billing_first_name']); ?>"/>
    </p>
    <p class="woocommerce-FormRow form-row form-row-last">
        <label for="reg_billing_last_name"><?php _e('Last Name','woocommerce'); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_last_name" id="reg_billing_last_name" value="<?php if(! empty($_POST['billing_last_name'])) esc_attr_e($_POST['billing_last_name']); ?>"/>
    </p>
    <div class="clearfix"></div>
    <p class="woocommerce-FormRow woocommerce-FormRow--wide form-row form-row-wide">
        <label for="reg_billing_company"><?php _e('Company Name','woocommerce'); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_company" id="reg_billing_company" value="<?php if(! empty($_POST['billing_company'])) esc_attr_e($_POST['billing_company']); ?>"/>
    </p>
    <div class="clearfix"></div>
    <p class="woocommerce-FormRow woocommerce-FormRow--wide form-row form-row-wide">
        <label for="reg_billing_vat"><?php _e('VAT Number','woocommerce'); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_vat" id="reg_billing_vat" value="<?php if(! empty($_POST['billing_vat'])) esc_attr_e($_POST['billing_vat']); ?>" maxlength="15" placeholder="Enter VAT Number"/>
    </p>
    <div class="clearfix"></div>
<?php
    wp_enqueue_script('wc-country-select');
    woocommerce_form_field('billing_country',array(
        'type'        => 'country',
        'class'       => array('chzn-drop'),
        'label'       => __('Country'),
        'placeholder' => __('Choose your country.'),
        'required'    => true,
        'clear'       => true,
        'default'     => 'BE'
    ));
?>
    <p class="woocommerce-FormRow form-row form-row-first">
        <label for="reg_billing_postcode"><?php _e('Postcode / ZIP','woocommerce'); ?><span class="required">*</span></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>
    <p class="woocommerce-FormRow form-row form-row-last">
        <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="clearfix"></div>
    <p class="woocommerce-FormRow woocommerce-FormRow--wide 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" value="<?php if(! empty($_POST['billing_address_1'])) esc_attr_e($_POST['billing_address_1']); ?>" placeholder="Street address"/>
    </p>
    <p class="woocommerce-FormRow woocommerce-FormRow--wide form-row form-row-wide">
        <input type="text" class="input-text" name="billing_address_2" id="reg_billing_address_2" value="<?php if(! empty($_POST['billing_address_2'])) esc_attr_e($_POST['billing_address_2']); ?>" placeholder="Apartment,suite,unit etc. (optional)"/>
    </p>
    <div class="clearfix"></div>
    <p class="woocommerce-FormRow woocommerce-FormRow--wide form-row form-row-wide">
        <label for="reg_billing_phone"><?php _e('Phone','woocommerce'); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" value="<?php if(! empty($_POST['billing_phone'])) esc_attr_e($_POST['billing_phone']); ?>"/>
    </p>
    <div class="clearfix"></div>
<?php
}
//Registration form fields Validation
add_action('woocommerce_register_post','my_validate_extra_register_fields',10,3);
function my_validate_extra_register_fields($username,$email,$validation_errors){
    if(isset($_POST['billing_first_name']) && empty($_POST['billing_first_name'])){$validation_errors->add('billing_first_name_error',__('A first name is required!','woocommerce'));}
    if(isset($_POST['billing_last_name']) && empty($_POST['billing_last_name'])){$validation_errors->add('billing_last_name_error',__('A last name is required!','woocommerce'));}
    if(isset($_POST['billing_company']) && empty($_POST['billing_company'])){$validation_errors->add('billing_company_error',__('A Company name is required!','woocommerce'));}
    if(isset($_POST['billing_vat']) && empty($_POST['billing_vat'])){$validation_errors->add('billing_vat_error',__('VAT number is required!','woocommerce'));}
    if(isset($_POST['billing_country']) && empty($_POST['billing_country'])){$validation_errors->add('billing_country_error',__('A country is required!','woocommerce'));}
    if(isset($_POST['billing_city']) && empty($_POST['billing_city'])){$validation_errors->add('billing_city_error',__('A city is required!','woocommerce'));}
    if(isset($_POST['billing_postcode']) && empty($_POST['billing_postcode'])){$validation_errors->add('billing_postcode_error',__('A postcode is required!','woocommerce'));}
    if(isset($_POST['billing_state']) && empty($_POST['billing_state'])){$validation_errors->add('billing_state_error',__('A state is required!','woocommerce'));}
    if(isset($_POST['billing_address_1']) && empty($_POST['billing_address_1'])){$validation_errors->add('billing_address_1_error',__('An address is required!','woocommerce'));}
    if(isset($_POST['billing_phone']) && empty($_POST['billing_phone'])){$validation_errors->add('billing_phone_error',__('A phone number is required!','woocommerce'));}
    return $validation_errors;
}
//Below code save extra fields when new user register
add_action('woocommerce_created_customer','my_save_extra_register_fields'); 
function my_save_extra_register_fields($customer_id){
    if(isset($_POST['billing_first_name'])){
        update_user_meta($customer_id,'first_name',sanitize_text_field($_POST['billing_first_name']));
        update_user_meta($customer_id,'billing_first_name',sanitize_text_field($_POST['billing_first_name']));
    }
    if(isset($_POST['billing_last_name'])){
        update_user_meta($customer_id,'last_name',sanitize_text_field($_POST['billing_last_name']));
        update_user_meta($customer_id,'billing_last_name',sanitize_text_field($_POST['billing_last_name']));
    }
    if(isset($_POST['billing_company'])){
        update_user_meta($customer_id,'billing_company',sanitize_text_field($_POST['billing_company']));
    }
    if(isset($_POST['billing_vat'])){
        update_user_meta($customer_id,'billing_vat',sanitize_text_field($_POST['billing_vat']));
    }
    if(isset($_POST['billing_country'])){
        update_user_meta($customer_id,'billing_country',sanitize_text_field($_POST['billing_country']));
    }
    if(isset($_POST['billing_city'])){
        update_user_meta($customer_id,'billing_city',sanitize_text_field($_POST['billing_city']));
    }
    if(isset($_POST['billing_postcode'])){
        update_user_meta($customer_id,'billing_postcode',sanitize_text_field($_POST['billing_postcode']));
    }
    if(isset($_POST['billing_state'])){
        update_user_meta($customer_id,'billing_state',sanitize_text_field($_POST['billing_state']));
    }
    if(isset($_POST['billing_address_1'])){
        update_user_meta($customer_id,'billing_address_1',sanitize_text_field($_POST['billing_address_1']));
    }
    if(isset($_POST['billing_phone'])){
        update_user_meta($customer_id,'billing_phone',sanitize_text_field($_POST['billing_phone']));
    }
    if(isset($_POST['email'])){
        update_user_meta($customer_id,'billing_email',sanitize_text_field($_POST['email']));
    }
}

I thank everyone who helped me in this process and with my previous questions as well, the whole project of mine is almost coming to an end so I really have to thank the Stackoverflow Community for their great support!

Answer 1

The woocommerce_form_field() function supports a country type, so I think this could work:

/**
 * Add new register fields for WooCommerce registration.
 */
function wooc_extra_register_fields() {

    wp_enqueue_script( 'wc-country-select' );

    woocommerce_form_field( 'billing_country', array(
        'type'      => 'country',
        'class'     => array('chzn-drop'),
        'label'     => __('Country'),
        'placeholder' => __('Choose your country.'),
        'required'  => true,
        'clear'     => true
    ));

}
add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );

Edit You need to enqueue the country select script in order to get the JS-assisted drop-down.

Answer 2

If you see the source HTML of WooCommerce Checkout page then you will see it uses select2 JS plugin. So you need to pass a extra ID/class in woocommerce_form_field() then called select2 JS function, in footer.

So your full code would be

//to add billing_country
function wh_extra_register_fields()
{
    $countries_obj = new WC_Countries();
    $countries = $countries_obj->get_allowed_countries();
    woocommerce_form_field('billing_country', array(
        'type' => 'select',
        'input_class' => array('myClass'), //<--check this line
        'label' => __('Country'),
        'placeholder' => __('Choose your country.'),
        'options' => $countries,
        'required' => true,
        'clear' => true,
        'default' => 'BE' //<--check this line
    ));
}

add_action('woocommerce_register_form_start', 'wh_extra_register_fields');

//to add js code in My Account page footer
function wh_AccountPageJS()
{
    if (is_account_page())
    {
        echo '<script>jQuery(".myClass").select2();</script>';
    }
}

add_action('wp_footer', 'wh_AccountPageJS', 100);

Code goes in functions.php file of your active child theme (or theme). Or also in any plugin php files.
Code is tested and works. version 3.0.

Hope this helps!