2 Easy Ways to Enable Phone Number Sign-in in WooCommerce

Phone number sign-in is a handy feature designed to enhance the user experience and ease the login and registration process. Therefore, many WooCommerce users want to implement this feature into their online stores. 

If you are one of those people, then you have landed on the right web page. This article will teach you how to let users log in and register with their WooCommerce phone number in two ways.

Why Should You Enable WooCommerce Phone Number Sign-in in Your Store?

Phone registration and login have become extremely useful for WooCommerce stores that rely heavily on customer mobile numbers. For example, food delivery, taxis, etc. 

In addition to these specific niches, below are some advantages that benefit any business.

• Buyers can log in and register directly with their phone number on your WooCommerce store.
• It avoids customer registration spam on your online store.
• Buyers can also log in without remembering their username and password.
• You can verify customers’ phone numbers by OTP SMSs.
• All verified customers are genuine and therefore prevent fake orders.
• Your customers can be notified quickly through mobile devices, even if they do not have access to the internet. 
• You can quickly reach your customers with promotions and offers through their phone numbers.

With these advantages, you can easily enhance your business strategy and, eventually, your consumption growth. You have everything you need to communicate with your customers in the simplest and most concrete way.

#1: Enable Phone Number Sign-in on Your WooCommerce Store with a Plugin

There are several plugins that can help you with this. For example:

• Registration & Login with Mobile Phone Number
• Digits: WordPress Mobile Phone Number OTP Signup and Login Form
• Login With Mobile Number for WooCommerce

But in this tutorial, we will go with the “Login with phone number” plugin as it is the most popular free one.

Install the Activate the “Login with Phone Number” Plugin on Your WooCommerce Store

The first thing you need to do is install and activate the “Login with phone number” plugin on your WooCommerce store. Below are the instructions.

1. Firstly, from the WordPress dashboard, navigate to the Plugins > Add New page.

2. Enter “Login with phone number” into the search box in the top right corner.
3. The plugin should appear first in the list. Click the Install Now button that displays next to its title.
4. After that, the plugin will be downloaded. Once done, you will see the Install Now button change to the Activate button. Click it.

Create a New Login/Register Page

The next step is to insert the plugin’s shortcode into a new login/register page.

1. Navigate to Page > Add New from the WordPress dashboard. 

2. Pick a title for the new page, for example, “Login/Register Page”.

3. Put the [idehweb_lwp] shortcode inside it.
4. Publish the page.

Get 10,000 Free OTP SMS Per Month with Firebase

When a new user registers an account on your WooCommerce store, a verification code will be sent to their mobile number. Therefore, you will need to provide an SMS gateway for the plugin to function properly. 

You can use Firebase from Google. It provides 10,000 OTP SMSs per month for free. Here is how:

1. Sign in to the Firebase console using your Google account.
2. Click the Create a project button.

3. Now, you will need to enter a name for the new project, accept Firebase’s terms and conditions, and click the Create project button.
4. Once the project is successfully created, on the left sidebar, go to the Build > Authentication page.

5. Click the Get started button.
6. Pick Phone as a provider.

7. Switch the toggle in the top right corner to enable this option. Then click the Save button.

8. Scroll down to the Authorized domains section. Click the Add domain button and enter the domain name of your WooCommerce store. Then click the Add button.

9. Now, go to the Templates tab. 

10. Click on the pencil icon next to the Template language text. Next, pick the language you prefer to be used for SMS verification.

11. Click on the gear icon next to the Project Overview text and choose Project settings.

12. Scroll down to the Your apps sections. Then click on the web icon.

13. Enter a nickname for your new app. Then click the Register app button.

14. Pick the Use a <script> tag option and copy the scripts provided.

15. Now, go to the WordPress dashboard of your WooCommerce store. Then visit the “login setting” page.

16. Paste the scripts into the Firebase config textbox.
17. Back to the Firebase window, copy the API key provided in the scripts.

18. Back to the WordPress window, paste the API key into the Firebase api textbox.

19. Finally, scroll down to the bottom of the page and click the Save changes button.

Also, this is where you can configure the app. You should check the settings to see if there is anything else you need to adjust.

#2: Enable Phone Number Sign-in on Your WooCommerce Store Programmatically 

In this tutorial, we will add one more phone number option on the login form of your WooCommerce store. Please note that this does not send OTP SMSs to verify users like in the previous tutorial.

Users can choose what is more convenient for them. You may have seen this on the Amazon login form. It allows users to sign in with an email or a phone number provided by their local phone service.

You will need to add custom PHP code to the “functions.php” file of the currently active theme. If you do not know how to do so, follow the instructions below: 

1. Navigate to the Appearance > Theme File Editor page from the WordPress dashboard.

2. Pick the theme you are using in the top right corner.
3. Access the “functions.php” file from the right sidebar.

Add Phone Number Entry

To enable WooCommerce phone number sign-in on your WordPress eCommerce site, you need to store the users’ phone numbers in the “wp_usermeta” table. 

This can be done at the time of user registration. You can use the below code to accomplish this goal.

<?php
$user_id = 1; // pass user id
$phone_number = 9999999999;
add_user_meta( $user_id, 'user_phone', $phone_number);

Once you have a “user_phone” meta_key with its value, you can check the user’s credentials with a phone number.

Create a Login Form

Now, let’s create a simple login form where users can enter their login details. It will have the following elements:

• A text field to enter a username/email/phone
• A text field to enter a password
• A nonce to avoid CSRF attacks (it is a hidden field)
• A submit button

<?php
$return = log_the_user_in();
if( is_wp_error( $return ) ) {
    echo $return->get_error_message();
}
?>
<form method="post">
    <p><input type="text" name="user_login" placeholder="Username, email or mobile" required /></p>
    <p><input type="password" name="user_password" placeholder="Password" required /></p>
    <input type="hidden" name="login_nonce" value="<?php echo wp_create_nonce('login_nonce'); ?>" />
    <input type="submit" name="btn_login" value="Submit" />
</form>

In the above scripts, we added HTML code and also called the “log_the_user_in()” method. This is responsible for checking the user’s credentials. 

If some errors occur on the server-side, we will inform the user through the “get_error_message()” method. 

In the next step, we will need to define the “log_the_user_in()” method and return the error.

Log in with Phone Numbers in WooCommerce

When a user fills in the credentials and clicks the submit button, we will get the credentials and verify them against the database. 

If everything matches, we will log them in and redirect them to the homepage. For false logins, the errors will be logged using the “WP_Error” class. Based on your needs, you can change it to any other page by altering the code.

We will define the “log_the_user_in()” method on the “init” hook. This hook fires after WordPress has finished loading but before any header is sent. This is ideal for processing a form using the POST method.

Below is the code:

add_action( 'init', 'log_the_user_in' );
function log_the_user_in() {
    if ( ! isset( $_POST['btn_login'] ) ) return;
 
    if ( ! wp_verify_nonce( $_POST['login_nonce'], 'login_nonce' ) ) {
        return new WP_Error('invalid_data', 'Invalid data.');
    }
 
    if ( empty( $_POST['user_login'] ) || empty( $_POST['user_password'] ) ) {
        return new WP_Error('empty', 'Both fields are required.');
    }
 
    if ( is_email( $_POST['user_login'] ) ) {
        // check user by email
        $user = get_user_by( 'email', $_POST['user_login'] );
    } elseif ( is_numeric( $_POST['user_login'] ) ) {
        // check user by phone number
        global $wpdb;
        $tbl_usermeta = $wpdb->prefix.'usermeta';
        $user_id = $wpdb->get_var( $wpdb->prepare( "SELECT user_id FROM $tbl_usermeta WHERE meta_key=%s AND meta_value=%s", 'user_phone', $_POST['user_login'] ) );
 
        $user = get_user_by( 'ID', $user_id );
    } else {
        // check user by username
        $user = get_user_by( 'login', $_POST['user_login'] );
    }
 
    if ( ! $user ) {
        return new WP_Error('wrong_credentials', 'Invalid credentials.');
    }
 
    // check the user's login with their password.
    if ( ! wp_check_password( $_POST['user_password'], $user->user_pass, $user->ID ) ) {
        return new WP_Error('wrong_credentials', 'Invalid password.');
    }
 
    wp_clear_auth_cookie();
    wp_set_current_user($user->ID);
    wp_set_auth_cookie($user->ID);
 
    wp_redirect(get_bloginfo('url'));
    exit;
}

Here, we first verified the nonce to protect the form from certain types of misusage, malicious code, and CSRF attacks.

Next, based on the “is_email()” or “is_numeric()” method, WordPress will check for a valid email or phone number. If the value entered is not an email or phone number, we will check for a username.

Final Words

That is all about adding the phone number sign-in in your WooCommerce store. I hope it has helped you with your project. 

If you found this article helpful, feel free to share your thoughts and suggestions in the comments section below.