Create OTP login in woocommerce without plugin.
Hi, Are you want to create custom OTP login in woo-commerce. if you want then follow my all step one by one.
Firstly, go to the WordPress dashboard and hover on woo-commerce and then click on settings as you can see in the first image.
And then Click on account and privacy after click tick the three options as you can see in the second image.
After that, you will see registration and login form on the My-account page.
on the coding side, you will paste all coding in function.php in WordPress child theme. And you can also separate CSS and JQuery.
Create custom OTP login in woocommerce without plugin.
Note: Use console while using this code.
Note: You can separate jquery and css.
Read Carefully, wooc_extra_register_fields function add Billing phone field in a registration form which is located on my account page.
wooc_validate_extra_register_fields function validate the phone number field. Is it empty or not.
wooc_save_extra_register_fields function saved phone number into usermeta table in the database.
set_otp_cookies function save the cookies in your browser. And it sends random five digits in SMS and it also checks the user is existing or not in the database.
otp_form function adds custom phone number field and OTP sends button in the woo-commerce login form. It checks OTP is correct or not. if the OTP number is incorrect then it gives an error for entering correct OTP.Users can change the number at the same time for sending OTP. When we submit the OTP then otp_login function run. This function check OTP and phone number in the database. if OTP or number incorrect it will give an error on your screen. It also checks from where we login such as checkout page or my account page.
if we login account with OTP from the checkout page then it will redirect on the checkout page to the user.
add_billing_mobile_phone_to_edit_account_form, this function adds the billing_phone number field on edit-account page (Account details).
billing_mobile_phone_field_validation function validate billing_phone number filed which is located on edit-account page.
my_account_saving_billing_mobile_phone function update billing_phone number into database. when users buy products without login on the checkout page
then show_login_option function show automatically login form on the checkout page.
paste code carefully into your product.Thanks
We are here to help you. Contact us without any hesitation.
function wooc_extra_register_fields() { ?> <p class="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 esc_attr_e( $_POST['billing_phone'] ); ?>" /> </p> <?php } add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' ); function wooc_validate_extra_register_fields( $username, $email, $validation_errors ) { if ( isset( $_POST['billing_phone'] ) ) { $hasPhoneNumber= get_users('meta_value='.$_POST['billing_phone']); if ( !empty($hasPhoneNumber)) { $validation_errors->add( 'billing_phone_error', __( '<strong>Error</strong>: Mobile number is already used!.', 'woocommerce' ) ); } } return $validation_errors; } add_action( 'woocommerce_register_post', 'wooc_validate_extra_register_fields', 10, 3 ); /** * Below code save extra fields. */ function wooc_save_extra_register_fields( $customer_id ) { if ( isset( $_POST['billing_phone'] ) ) { // Phone input filed which is used in WooCommerce update_user_meta( $customer_id, 'billing_phone', sanitize_text_field( $_POST['billing_phone'] ) ); } } add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' ); function set_otp_cookies(){ $customfield = $_POST['phone_number']; if(empty($customfield)){ $success = "not_exist"; $otp = 'null'; //return false; die(); } $cookie_otp = $_COOKIE[$customfield]; $UsermetaData = get_users('meta_value='.$customfield); //print_r($UsermetaData); foreach($UsermetaData as $userdata) { $billing_phone_num = $userdata->billing_phone; $user = $userdata->ID; } if($billing_phone_num==$customfield){ $random_otp = (rand(55555, 99999)); // set cookie for 5 mintues 500/60=5 setcookie($customfield, $random_otp,time()+500,'/'); setcookie('phone_number', $customfield,time()+500,'/'); $_COOKIE[$customfield]; $_COOKIE[$phone_number]; $success = "true"; $otp = $random_otp; } else{ $success = "flase"; $otp = $cookie_otp; } echo json_encode(array($customfield,$success,$otp)); die(); } add_action('wp_ajax_set_otp_cookies', 'set_otp_cookies'); add_action('wp_ajax_nopriv_set_otp_cookies', 'set_otp_cookies'); function otp_form(){ $slug = basename(get_permalink()); ?> <style> .change_number{ color:Red; cursor:pointer; } </style> <script> jQuery(document).ready(function($) { //$(".set_otp").click(function(e) { jQuery(document).on('click', '.set_otp', function(e){ e.preventDefault(); var ajaxurl = $(".ajaxurl").val(); var phone_number = $(".phone_number").val(); if(phone_number=='') { $(".phone_number").focus(); } else{ var slug = $(".slug").val(); var data = { 'action': 'set_otp_cookies', 'phone_number': phone_number, 'slug': slug, }; jQuery.post(ajaxurl, data, function(response) { //$('.otp').val(response); //$('.woocommerce').prepend(response); var result = $.parseJSON(response); var customfield = result[0]; //alert(customfield); var success = result[1]; var otp = result[2]; $('.phone_number').val(customfield); //alert(otp); console.log(response); if(success=='true'){ $('.otp_form').html('<input type="hidden" name="phone_number" class="phone_number" value="'+phone_number+'"><input type="hidden" name="slug" class="slug" value="<?php echo $slug; ?>"><span>Please enter the OTP sent to<br><span class="sent_number">'+customfield+'</span><span class="change_number"> Change</span></span><input type="text" name="otp" class="otp" value=""><input type="submit" name="otp_submit" Value="Submit">'); } else{ // alert('not exist'); $('.otp_form').html('<span>Account not Exists!</span> <span class="change_number">Change Number</span>'); } }); } }); jQuery(document).on('click', '.change_number', function(){ //alert('hello'); $('.otp_form').html('<label>Enter Phone number <span class="required">*</span></label><input type="text" name="phone_number" class="phone_number"><input type="hidden" name="slug" class="slug" value="<?php echo $slug; ?>"><input type="hidden" class="ajaxurl" value="<?php echo admin_url( "admin-ajax.php" ) ;?>"><input type="submit" name="set_otp" class="set_otp" Value="Send Otp">'); }); }); </script> <form action="" method="post"> <div class="otp_form"> <label>Enter Phone number <span class="required">*</span></label> <input type="text" name="phone_number" class="phone_number"> <input type="hidden" name="slug" class="slug" value="<?php echo $slug; ?>"> <input type="hidden" class="ajaxurl" value="<?php echo admin_url( 'admin-ajax.php' ) ;?>"> <input type="submit" name="set_otp" class="set_otp" Value="Send Otp"> <!--<input type="text" name="otp" class="otp" value=""> <input type="submit" name="otp_submit" Value="Submit">---> </div> </form> <?php } add_action('woocommerce_login_form_end','otp_form'); function otp_login(){ if(isset($_POST['otp_submit'])){ $customfield = $_POST['phone_number']; //$customfield = $_COOKIE['phone_number']; $slug_name = $_POST['slug']; $otp = $_POST['otp']; $cookie_name = $customfield; $cookie_otp = $_COOKIE[$customfield]; //$cookie_name = 'otp'; $cookie_otp = $_COOKIE[$cookie_name]; $UsermetaData = get_users('meta_value='.$customfield); //print_r($UsermetaData); foreach($UsermetaData as $userdata) { $billing_phone_num = $userdata->billing_phone; $user = $userdata->ID; } if(!empty($customfield) && $billing_phone_num==$customfield && !empty($otp) && $otp==$cookie_otp){ if(is_null($user)){ wc_add_notice( 'You must enter registered phone number for otp!', 'error' ); return false; } if(!empty($user)) { global $wpdb; global $post; if($slug_name=='checkout') { if (!is_wp_error($user)) { wp_clear_auth_cookie(); wp_set_current_user($user); wp_set_auth_cookie($user); setcookie($cookie_name, "", time()-60, '/'); setcookie("phone_number", "", time()-60, '/'); $redirect_to = wc_get_checkout_url(); wp_safe_redirect( wc_get_checkout_url() ); exit(); } return $user; } else { if (!is_wp_error($user)) { wp_clear_auth_cookie(); wp_set_current_user($user); wp_set_auth_cookie($user); setcookie($cookie_name, "", time()-60, '/'); setcookie("phone_number", "", time()-60, '/'); $redirect_to = user_admin_url(); wp_safe_redirect( user_admin_url() ); exit(); } return $user; } } } elseif(empty($customfield) && empty($otp)) { wc_add_notice( 'You must enter registered phone number for otp!', 'error' ); return false; } elseif(empty($customfield) && !empty($otp)) { wc_add_notice( 'You must enter registered phone number for otp!', 'error' ); return false; } elseif(empty($otp)) { wc_add_notice( 'You must enter correct otp number!', 'error' ); return false; } elseif($otp!==$cookie_otp) { wc_add_notice( 'You must enter correct otp number!', 'error' ); return false; } else{ wc_add_notice( 'You must enter registered phone number for otp!', 'error' ); return false; } } } add_action('init','otp_login'); function add_billing_mobile_phone_to_edit_account_form() { $user = wp_get_current_user(); ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="billing_phone"><?php _e( 'Mobile phone', 'woocommerce' ); ?> <span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--phone input-text" name="billing_phone" id="billing_phone" value="<?php echo esc_attr( $user->billing_phone ); ?>" /> </p> <?php } add_action( 'woocommerce_edit_account_form_start', 'add_billing_mobile_phone_to_edit_account_form' ); // Check and validate the mobile phone function billing_mobile_phone_field_validation( $args ) { if ( isset( $_POST['billing_phone'] ) ) { $hasPhoneNumber= get_users('meta_value='.$_POST['billing_phone']); global $current_user; get_currentuserinfo(); $current_user_id = $current_user->ID; $billing_phone = get_user_meta( $current_user_id, 'billing_phone', true ); if ( !empty($hasPhoneNumber) && $billing_phone !== $_POST['billing_phone']) { $args->add( 'billing_phone_error', __( '<strong>Error</strong>: Mobile number is already used!.', 'woocommerce' ) ); } } } add_action( 'woocommerce_save_account_details_errors','billing_mobile_phone_field_validation', 20, 1 ); // Save the mobile phone value to user data function my_account_saving_billing_mobile_phone( $user_id ) { if( isset($_POST['billing_phone']) && ! empty($_POST['billing_phone']) ) update_user_meta( $user_id, 'billing_phone', sanitize_text_field($_POST['billing_phone']) ); } add_action( 'woocommerce_save_account_details', 'my_account_saving_billing_mobile_phone', 20, 1 ); function show_login_option() { $slug = basename(get_permalink()); if($slug=='checkout') { if ( is_user_logged_in() ) { } else { ?> <script> jQuery(document).ready(function($) { $(window).load(function() { $('.showlogin').click(); //alert('hello'); }); }); </script> <?php } } } add_action('wp_head','show_login_option');