'How to add warning label to my WooCommerce phone function

I have a phone login function on my Woo site. However Id like to add a warning label if the phone is taken , Im sure I have to utilise the authenticate part however I'm not sure how do get a red label underneath the text of the phone to show if the phone is taken, how do I do that ?

function wooc_add_phone_number_field() {
    return apply_filters( 'woocommerce_forms_field', array(
        'wooc_user_phone' => array(
            'type'        => 'text',
            'pattern'     => '[0][0-9]{9}',
            'label'       => __( 'Phone Number', ' woocommerce' ),
            'placeholder' => __( 'MUST START WITH 0 e.g 081 123 4567', 'woocommerce' ),
            'maxlength' => 10,
            'minlength' => 10,
            'required'    => true,
        ),
    ) );
}
add_action( 'woocommerce_register_form', 'wooc_add_field_to_registeration_form', 15 );
function wooc_add_field_to_registeration_form() {
    $fields = wooc_add_phone_number_field();
    foreach ( $fields as $key => $field_args ) {
        woocommerce_form_field( $key, $field_args );
    }
}


//Store
add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );
function wooc_save_extra_register_fields( $customer_id ) {
    if (isset($_POST['wooc_user_phone'])){
        update_user_meta( $customer_id, 'wooc_user_phone', sanitize_text_field( $_POST['wooc_user_phone'] ) );
        
        update_user_meta( $customer_id, 'billing_phone', sanitize_text_field( $_POST['wooc_user_phone'] ) );
    }
}

//Check against phone
function wooc_get_users_by_phone($phone_number){
    $user_query = new \WP_User_Query( array(
        'meta_key' => 'wooc_user_phone',
        'meta_value' => $phone_number,
        'compare'=> '='
    ));
    return $user_query->get_results();
}

//Authenticate 
add_filter('authenticate','wooc_login_with_phone',30,3);
function wooc_login_with_phone($user, $username, $password ){
    if($username != ''){
        $users_with_phone = wooc_get_users_by_phone($username);
        if(empty($users_with_phone)){
            return $user;
  }
  $phone_user = $users_with_phone[0];
  
  if ( wp_check_password( $password, $phone_user->user_pass, $phone_user->ID ) ){
   return $phone_user;
  }
    }
    return $user;
}

//Login label
add_filter( 'gettext', 'wooc_change_login_label', 10, 3 );
function wooc_change_login_label( $translated, $original, $domain ) {
    if ( $translated == "Username or email address" && $domain === 'woocommerce' ) {
        $translated = "Username or email address or phone";
    }
    return $translated;
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source