2 moduri ușoare de a activa conectarea la numărul de telefon în WooCommerce

Conectarea la numărul de telefon este o funcție utilă concepută pentru a îmbunătăți experiența utilizatorului și a ușura procesul de conectare și înregistrare. Prin urmare, mulți utilizatori WooCommerce doresc să implementeze această caracteristică în magazinele lor online.

Dacă sunteți unul dintre acești oameni, atunci ați ajuns pe pagina web potrivită. Acest articol vă va învăța cum să permiteți utilizatorilor să se conecteze și să se înregistreze cu numărul lor de telefon WooCommerce în două moduri.

De ce ar trebui să activați conectarea la numărul de telefon WooCommerce în magazinul dvs.?

Înregistrarea prin telefon și autentificarea au devenit extrem de utile pentru magazinele WooCommerce care se bazează foarte mult pe numerele de telefon mobil ale clienților. De exemplu, livrarea alimentelor, taxiurile etc.

Pe lângă aceste nișe specifice, mai jos sunt câteva avantaje care beneficiază orice afacere.

• Cumpărătorii se pot conecta și se pot înregistra direct cu numărul lor de telefon în magazinul tău WooCommerce.
• Evită spamul de înregistrare a clienților în magazinul dvs. online.
• Cumpărătorii se pot conecta, de asemenea, fără a-și aminti numele de utilizator și parola.
• Puteți verifica numerele de telefon ale clienților prin SMS-uri OTP.
• Toți clienții verificați sunt autentici și, prin urmare, previn comenzile false.
• Clienții tăi pot fi notificați rapid prin intermediul dispozitivelor mobile, chiar dacă nu au acces la internet.
• Puteți ajunge rapid la clienții dvs. cu promoții și oferte prin numerele lor de telefon.

Cu aceste avantaje, vă puteți îmbunătăți cu ușurință strategia de afaceri și, eventual, creșterea consumului. Ai tot ce ai nevoie pentru a comunica cu clienții tăi în cel mai simplu și concret mod.

#1: Activați conectarea la numărul de telefon în magazinul dvs. WooCommerce cu un plugin

Există mai multe plugin-uri care vă pot ajuta în acest sens. De exemplu:

• Înregistrare și autentificare cu numărul de telefon mobil
• Cifre: Număr de telefon mobil WordPress Formular de înregistrare și autentificare OTP
• Conectați-vă cu numărul de mobil pentru WooCommerce

Dar în acest tutorial, vom merge cu pluginul „Autentificare cu număr de telefon”, deoarece este cel mai popular gratuit.

Instalați pluginul Activați „ Autentificare cu numărul de telefon ” în magazinul dvs. WooCommerce

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul „ Autentificare cu număr de telefon ” în magazinul dumneavoastră WooCommerce . Mai jos sunt instrucțiunile.

1. În primul rând, din tabloul de bord WordPress, navigați la pagina Plugin-uri > Adăugați nou .

2. Introduceți „Autentificare cu număr de telefon” în caseta de căutare din colțul din dreapta sus.
3. Pluginul ar trebui să apară primul în listă. Faceți clic pe butonul Instalați acum care se afișează lângă titlu.
4. După aceea, pluginul va fi descărcat. După ce ați terminat, veți vedea că butonul Instalați acum se schimbă în butonul Activare . Apasă-l.

Creați o nouă pagină de conectare/înregistrare

Următorul pas este să inserați codul scurt al pluginului într-o nouă pagină de conectare/înregistrare.

1. Navigați la Pagina > Adăugați nou din tabloul de bord WordPress.

2. Alegeți un titlu pentru pagina nouă, de exemplu, „ Pagină de autentificare/Înregistrare ”.

3. Introduceți codul scurt [idehweb_lwp] în interiorul acestuia.
4. Publicați pagina.

Obțineți 10.000 de SMS-uri OTP gratuite pe lună cu Firebase

Când un utilizator nou înregistrează un cont în magazinul dvs. WooCommerce, un cod de verificare va fi trimis la numărul său de telefon mobil. Prin urmare, va trebui să furnizați un gateway SMS pentru ca pluginul să funcționeze corect.

Puteți folosi Firebase de la Google. Oferă gratuit 10.000 de SMS-uri OTP pe lună. Iată cum:

1. Conectați-vă la consola Firebase folosind contul dvs. Google.
2. Faceți clic pe butonul Creați un proiect .

3. Acum, va trebui să introduceți un nume pentru noul proiect, să acceptați termenii și condițiile Firebase și să faceți clic pe butonul Creați proiect .
4. Odată ce proiectul este creat cu succes, în bara laterală din stânga, accesați pagina Build > Autentificare .

5. Faceți clic pe butonul Începeți .
6. Alegeți Telefon ca furnizor.

7. Comutați comutatorul din colțul din dreapta sus pentru a activa această opțiune. Apoi faceți clic pe butonul Salvare .

8. Derulați în jos la secțiunea Domenii autorizate . Faceți clic pe butonul Adăugați domeniu și introduceți numele domeniului magazinului dvs. WooCommerce. Apoi faceți clic pe butonul Adăugați .

9. Acum, accesați fila Șabloane .

10. Faceți clic pe pictograma creion de lângă textul în limba șablonului . Apoi, alegeți limba în care preferați să fie folosită pentru verificarea prin SMS.

11. Faceți clic pe pictograma roată de lângă textul Prezentare generală a proiectului și alegeți Setări proiect .

12. Derulați în jos la secțiunile Aplicațiile dvs. Apoi faceți clic pe pictograma web.

13. Introduceți o poreclă pentru noua dvs. aplicație. Apoi faceți clic pe butonul Înregistrați aplicația .

14. Alegeți opțiunea Utilizați o etichetă <script> și copiați scripturile furnizate.

15. Acum, accesați tabloul de bord WordPress al magazinului dvs. WooCommerce. Apoi vizitați pagina „setare de conectare”.

16. Lipiți scripturile în caseta de text de configurare Firebase .
17. Înapoi la fereastra Firebase, copiați cheia API furnizată în scripturi.

18. Înapoi la fereastra WordPress, inserați cheia API în caseta de text API Firebase .

19. În cele din urmă, derulați în jos până în partea de jos a paginii și faceți clic pe butonul Salvați modificările .

De asemenea, aici puteți configura aplicația. Ar trebui să verificați setările pentru a vedea dacă mai trebuie să ajustați ceva.

#2: Activați programatic conectarea la numărul de telefon în magazinul dvs. WooCommerce

În acest tutorial, vom adăuga încă o opțiune de număr de telefon pe formularul de conectare al magazinului dvs. WooCommerce. Vă rugăm să rețineți că acest lucru nu trimite SMS-uri OTP pentru a verifica utilizatorii, ca în tutorialul anterior.

Utilizatorii pot alege ceea ce este mai convenabil pentru ei. Este posibil să fi văzut acest lucru pe formularul de conectare Amazon. Permite utilizatorilor să se conecteze cu un e-mail sau un număr de telefon.

Va trebui să adăugați cod PHP personalizat la fișierul „functions.php” al temei active în prezent. Dacă nu știți cum să faceți acest lucru, urmați instrucțiunile de mai jos:

1. Navigați la pagina Aspect > Editor fișier temă din tabloul de bord WordPress.

2. Alegeți tema pe care o utilizați în colțul din dreapta sus.
3. Accesați fișierul „functions.php” din bara laterală din dreapta.

Adăugați o intrare pentru numărul de telefon

Pentru a activa conectarea la numărul de telefon WooCommerce pe site-ul dvs. de comerț electronic WordPress, trebuie să stocați numerele de telefon ale utilizatorilor în tabelul „wp_usermeta”.

Acest lucru se poate face în momentul înregistrării utilizatorului. Puteți folosi codul de mai jos pentru a îndeplini acest obiectiv.

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

Odată ce aveți o meta_key „user_phone” cu valoarea acesteia, puteți verifica acreditările utilizatorului cu un număr de telefon.

Creați un formular de conectare

Acum, să creăm un formular simplu de conectare în care utilizatorii își pot introduce detaliile de conectare. Acesta va avea următoarele elemente:

• Un câmp de text pentru a introduce un nume de utilizator/e-mail/telefon
• Un câmp de text pentru a introduce o parolă
• Un nonce pentru a evita atacurile CSRF (este un câmp ascuns)
• Un buton de trimitere

 <?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>

În scripturile de mai sus, am adăugat cod HTML și am numit și metoda „log_the_user_in()”. Acesta este responsabil pentru verificarea acreditărilor utilizatorului.

Dacă apar unele erori pe partea serverului, vom informa utilizatorul prin metoda „get_error_message()”.

În pasul următor, va trebui să definim metoda „log_the_user_in()” și să returnăm eroarea.

Conectați-vă cu numerele de telefon în WooCommerce

Când un utilizator completează acreditările și face clic pe butonul de trimitere, vom obține acreditările și le vom verifica în baza de date.

Dacă totul se potrivește, le vom conecta și le vom redirecționa către pagina de pornire. Pentru autentificări false, erorile vor fi înregistrate folosind clasa „WP_Error”. În funcție de nevoile dvs., îl puteți schimba în orice altă pagină modificând codul.

Vom defini metoda „log_the_user_in()” pe cârligul „init”. Acest cârlig se declanșează după ce WordPress a terminat de încărcat, dar înainte ca orice antet să fie trimis. Acesta este ideal pentru procesarea unui formular folosind metoda POST.

Mai jos este codul:

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

Aici, am verificat mai întâi nonce pentru a proteja formularul de anumite tipuri de utilizare greșită, cod rău intenționat și atacuri CSRF.

Apoi, pe baza metodei „is_email()” sau „is_numeric()”, WordPress va verifica dacă există un e-mail sau un număr de telefon valid. Dacă valoarea introdusă nu este un e-mail sau un număr de telefon, vom verifica dacă există un nume de utilizator.

Cuvinte finale

Este vorba despre adăugarea numărului de telefon de conectare în magazinul tău WooCommerce. Sper că te-a ajutat cu proiectul tău.

Dacă ați găsit acest articol util, nu ezitați să vă împărtășiți gândurile și sugestiile în secțiunea de comentarii de mai jos.