Add WooCommerce dynamic country and state dropdowns to login or register forms

Question

I'm using WooCommerce website, with digits plugin for OTP login and sign up. I need country and state field dropdowns on digits sign up form. On the checkout page, for billing details, the dropdown is working well. But not on my sign-up page. How can I fix that?

This is my code:

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>';

This is the code I tried on the WPCode plugin. But I didn't work for me. I want to showcase the drop-down for country and state on this third party plugin signup form.

Any help is highly appreciated.

Answer 1

First "country" and "state" field types are available for woocommerce_form_field() function, so use them instead of the "select" type. This way, you don't need to get the countries options or states options. Additionally, here, the state field will be visible only for countries handling states, and populated with the correct states for the selected country.

I have asked in Digits : WordPress Mobile Phone Number OTP Signup and Login Form as a comment, as this commercial plugin seems to support WooCommerce. You may ask them, as a purchaser, opening a support ticket.

The following code, based on this previous answer, will work flawlessly with any login and sign up form (you will just need to replace the function hook, or to pick the code inside the function, and add it to the required login / register template file):

add_action( 'woocommerce_login_form', 'add_country_and_state_to_login_form' );
function add_country_and_state_to_login_form() {
    global $current_user;
  
    wp_enqueue_script('wc-country-select');
    wp_enqueue_script('wc-state-select');

    woocommerce_form_field('billing_country', array(
        'type'        => 'country',
        'class'       => array('chzn-drop'),
        'label'       => __('Select a country'),
        'placeholder' => __('Enter something'),
        'required'    => true,
        'clear'       => true,
        'default'     => '',
    ), isset($current_user->billing_country) ? $current_user->billing_country : '' );

    woocommerce_form_field('billing_state', array(
        'type'        => 'state',
        'class'       => array('chzn-drop'),
        'label'       => __('Select a state'),
        'placeholder' => __('Enter something'),
        'required'    => true,
        'clear'       => true,
    ), isset($current_user->billing_state) ? $current_user->billing_state : '' );
}

Reminder:
The state field will be only displayed for countries handling states in WooCommerce.

---

Addition:

For those other fellows, who want to use that code in WooCommerce login form, here is the necessary code to validate and save the submitted country and state:

// Validation
add_action( 'woocommerce_register_post', 'country_and_state_login_validation', 20, 3 );
function country_and_state_to_login_validation( $username, $email, $validation_errors ) {
    $domain = 'woocommerce';
    $error  = '<strong>' . __( 'Error', $domain ) . '</strong>: ';
    
    if ( isset($_POST['billing_country']) && empty( $_POST['billing_country'] ) ) {
        $validation_errors->add( 'billing_country_error', $error . __( 'Country is required!.', $domain ) );
    }
    
    if ( isset($_POST['billing_state']) && empty( $_POST['billing_state'] ) ) {
        $validation_errors->add( 'billing_state_error', $error . __( 'State is required!.', $domain ) );
    }

    return $validation_errors;
}

// Save 
add_action('woocommerce_created_customer', 'save_login_country_and_state', 20, 3 );
function save_login_country_and_state( $customer_id, $new_customer_data, $password_generated ) {
    $customer = new WC_Customer($customer_id);
    $do_save  = false;

    if (isset($_POST['billing_country']) && !empty($_POST['billing_country'])) {
        $customer->update_meta_data('billing_country', esc_attr($_POST['billing_country']));
        $do_save = true;
    }

    if (isset($_POST['billing_state']) && !empty($_POST['billing_state'])) {
        $customer->update_meta_data('billing_state', esc_attr($_POST['billing_state']));
        $do_save = true;
    }

    if ($do_save) {
        $customer->save();
    }
}

Code goes on functions.php file of your active child theme (or theme), or in any plugin file.
Tested and works.

Answer 2

To fix the issue with the country dropdown not appearing on your Digits sign-up form, you can try the following steps:

Make sure that you have the Digits plugin installed and activated on your WooCommerce website.

1. Locate the file or template where your Digits sign-up form is defined. This can vary depending on your theme or customization.
2. In that file, find the section where the form fields are being rendered, specifically the country field.

Replace the existing code for the country field with the following code:

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>';

By using the $countries_obj->get_countries() function instead of $countries_obj->__get('countries'), you can retrieve the country options in a way that is compatible with Digits and the latest version of WooCommerce.

Please note that the exact location and file names may vary based on your specific setup and theme customization. You may need to consult your theme documentation or contact the theme developer for further assistance if you're unsure about the specific file to modify.