Hello guys welcome back to my blog therichpost.com. Guys today in this post I will tell you How to Add Mobile OTP Login & Registration in WooCommerce (Without Plugin)?

Guys if you are new in  WordPress or in  WooCommerce then please check the below links for some good tutorials:

1. WooCommerce Hooks
2. WordPress Tricks
3. WordPress Hooks
4. Dokan

---

WooCommerce intro

WooCommerce by default allows users to register and log in using email and password. However, many modern eCommerce stores prefer a mobile number–based login with OTP for better user experience and higher conversion rates.

In this guide, you’ll learn how to add mobile number OTP login and registration in WooCommerce using custom code, without relying on heavy plugins.

This solution works perfectly for:

• Custom themes
• WooCommerce My Account page
• Checkout page login
• Mobile-first eCommerce stores

---

What This Solution Does

• Login using mobile phone number
• OTP-based authentication (no password required)
• Secure and WooCommerce-compatible
• No third-party plugin required
• Easy to customize and extend

---

How OTP Login Works in WooCommerce

1. User enters mobile number
2. Clicks Send OTP
3. OTP is generated and stored securely
4. OTP is sent via SMS (API-ready)
5. User enters OTP
6. User is logged in automatically

---

Step 1: Add Mobile Number Field to WooCommerce Login Form

We add a mobile number field and OTP input directly on the WooCommerce login form using hooks.

add_action('woocommerce_login_form', 'add_phone_otp_fields');
function add_phone_otp_fields() {
    ?>
    <p class="form-row">
        <label>Mobile Number</label>
        <input type="text" id="otp_phone">
    </p>

    <p class="form-row">
        <button type="button" id="send_otp">Send OTP</button>
    </p>

    <p class="form-row">
        <label>Enter OTP</label>
        <input type="text" id="otp_code">
    </p>

    <p class="form-row">
        <button type="button" id="verify_otp">Login with OTP</button>
    </p>
    <?php
}

Step 2: Generate & Send OTP Using AJAX

OTP is generated using PHP and stored temporarily using WordPress transients.

add_action('wp_ajax_send_otp', 'send_otp_ajax');
add_action('wp_ajax_nopriv_send_otp', 'send_otp_ajax');

function send_otp_ajax() {
    $phone = sanitize_text_field($_POST['phone']);
    $otp = rand(100000, 999999);

    set_transient('otp_' . $phone, $otp, 10 * MINUTE_IN_SECONDS);

    // Send OTP via SMS gateway here
    // Example: send_sms($phone, "Your OTP is $otp");

    wp_send_json_success(['message' => 'OTP sent successfully']);
}

Step 3: Verify OTP and Log User In

add_action('wp_ajax_verify_otp', 'verify_otp_ajax');
add_action('wp_ajax_nopriv_verify_otp', 'verify_otp_ajax');

function verify_otp_ajax() {

    $phone = sanitize_text_field($_POST['phone']);
    $otp   = sanitize_text_field($_POST['otp']);

    $saved_otp = get_transient('otp_' . $phone);

    if ($saved_otp != $otp) {
        wp_send_json_error('Invalid OTP');
    }

    $users = get_users([
        'meta_key' => 'billing_phone',
        'meta_value' => $phone,
        'number' => 1
    ]);

    if (!$users) {
        wp_send_json_error('User not found');
    }

    wp_set_current_user($users[0]->ID);
    wp_set_auth_cookie($users[0]->ID);

    delete_transient('otp_' . $phone);

    wp_send_json_success('Login successful');
}

Step 4: Frontend JavaScript (AJAX)

<script>
jQuery(function($){

  $('#send_otp').click(function(){
    $.post('<?php echo admin_url("admin-ajax.php"); ?>', {
      action: 'send_otp',
      phone: $('#otp_phone').val()
    }, function(res){
      alert(res.data.message);
    });
  });

  $('#verify_otp').click(function(){
    $.post('<?php echo admin_url("admin-ajax.php"); ?>', {
      action: 'verify_otp',
      phone: $('#otp_phone').val(),
      otp: $('#otp_code').val()
    }, function(res){
      if(res.success){
        location.reload();
      } else {
        alert(res.data);
      }
    });
  });

});
</script>

---

Conclusion

Adding mobile OTP login to WooCommerce using custom code gives you full control over authentication while keeping your store lightweight and fast.

This approach is ideal if you want:

• Plugin-free solution
• Custom checkout experience
• Scalable login system

---

Guys if you will have any query then feel free to contact me via contact us page.

Ajay

Thanks