2 semplici modi per abilitare l'accesso al numero di telefono in WooCommerce

L'accesso al numero di telefono è una pratica funzionalità progettata per migliorare l'esperienza dell'utente e facilitare il processo di accesso e registrazione. Pertanto, molti utenti di WooCommerce desiderano implementare questa funzionalità nei loro negozi online.

Se sei una di quelle persone, allora sei arrivato sulla pagina web giusta. Questo articolo ti insegnerà come consentire agli utenti di accedere e registrarsi con il loro numero di telefono WooCommerce in due modi.

Perché dovresti abilitare l'accesso al numero di telefono di WooCommerce nel tuo negozio?

La registrazione del telefono e l'accesso sono diventati estremamente utili per i negozi WooCommerce che fanno molto affidamento sui numeri di cellulare dei clienti. Ad esempio, consegna di cibo, taxi, ecc.

Oltre a queste nicchie specifiche, di seguito sono riportati alcuni vantaggi a vantaggio di qualsiasi attività commerciale.

• Gli acquirenti possono accedere e registrarsi direttamente con il loro numero di telefono sul tuo negozio WooCommerce.
• Evita lo spam di registrazione dei clienti sul tuo negozio online.
• Gli acquirenti possono anche accedere senza ricordare nome utente e password.
• Puoi verificare i numeri di telefono dei clienti tramite SMS OTP.
• Tutti i clienti verificati sono autentici e quindi impediscono ordini falsi.
• I tuoi clienti possono essere avvisati rapidamente tramite dispositivi mobili, anche se non hanno accesso a Internet.
• Puoi raggiungere rapidamente i tuoi clienti con promozioni e offerte tramite i loro numeri di telefono.

Con questi vantaggi, puoi facilmente migliorare la tua strategia aziendale e, infine, la crescita dei tuoi consumi. Hai tutto ciò che ti serve per comunicare con i tuoi clienti nel modo più semplice e concreto.

#1: Abilita l'accesso con il numero di telefono sul tuo negozio WooCommerce con un plug-in

Ci sono diversi plugin che possono aiutarti in questo. Per esempio:

• Registrazione e accesso con numero di cellulare
• Cifre: numero di cellulare WordPress Modulo di registrazione e accesso OTP
• Accedi con il numero di cellulare per WooCommerce

Ma in questo tutorial, andremo con il plug-in "Accedi con numero di telefono" in quanto è il più popolare gratuito.

Installa il plug-in Attiva il " Accedi con numero di telefono " sul tuo negozio WooCommerce

La prima cosa che devi fare è installare e attivare il plugin “ Accedi con numero di telefono ” sul tuo negozio WooCommerce . Di seguito sono riportate le istruzioni.

1. Innanzitutto, dalla dashboard di WordPress, vai alla pagina Plugin > Aggiungi nuovo .

2. Inserisci "Accedi con numero di telefono" nella casella di ricerca nell'angolo in alto a destra.
3. Il plugin dovrebbe apparire per primo nell'elenco. Fai clic sul pulsante Installa ora visualizzato accanto al titolo.
4. Successivamente, il plug-in verrà scaricato. Una volta terminato, vedrai il pulsante Installa ora cambiare nel pulsante Attiva . Cliccalo.

Crea una nuova pagina di accesso/registrazione

Il passaggio successivo consiste nell'inserire lo shortcode del plug-in in una nuova pagina di accesso/registrazione.

1. Vai a Pagina> Aggiungi nuovo dalla dashboard di WordPress.

2. Scegli un titolo per la nuova pagina, ad esempio " Pagina di accesso/registrazione ".

3. Inserisci lo shortcode [idehweb_lwp] al suo interno.
4. Pubblica la pagina.

Ricevi 10.000 SMS OTP gratuiti al mese con Firebase

Quando un nuovo utente registra un account sul tuo negozio WooCommerce, verrà inviato un codice di verifica al suo numero di cellulare. Pertanto, sarà necessario fornire un gateway SMS affinché il plug-in funzioni correttamente.

Puoi utilizzare Firebase di Google. Fornisce 10.000 SMS OTP al mese gratuitamente. Ecco come:

1. Accedi alla console Firebase utilizzando il tuo account Google.
2. Fare clic sul pulsante Crea un progetto .

3. Ora dovrai inserire un nome per il nuovo progetto, accettare i termini e le condizioni di Firebase e fare clic sul pulsante Crea progetto .
4. Una volta che il progetto è stato creato con successo, nella barra laterale di sinistra, vai alla pagina Build > Autenticazione .

5. Fare clic sul pulsante Inizia .
6. Scegli Telefono come fornitore.

7. Cambia l'interruttore nell'angolo in alto a destra per abilitare questa opzione. Quindi fare clic sul pulsante Salva .

8. Scorri verso il basso fino alla sezione Domini autorizzati . Fai clic sul pulsante Aggiungi dominio e inserisci il nome di dominio del tuo negozio WooCommerce. Quindi fare clic sul pulsante Aggiungi .

9. Ora vai alla scheda Modelli .

10. Fare clic sull'icona a forma di matita accanto al testo della lingua del modello . Quindi, scegli la lingua che preferisci utilizzare per la verifica tramite SMS.

11. Fai clic sull'icona a forma di ingranaggio accanto al testo Panoramica del progetto e scegli Impostazioni progetto .

12. Scorri verso il basso fino alle sezioni Le tue app . Quindi fare clic sull'icona web.

13. Inserisci un nickname per la tua nuova app. Quindi fare clic sul pulsante Registra app .

14. Scegli l'opzione Usa un tag <script> e copia gli script forniti.

15. Ora vai alla dashboard di WordPress del tuo negozio WooCommerce. Quindi visita la pagina "impostazioni di accesso".

16. Incolla gli script nella casella di testo della configurazione di Firebase .
17. Torna alla finestra di Firebase, copia la chiave API fornita negli script.

18. Torna alla finestra di WordPress, incolla la chiave API nella casella di testo dell'API di Firebase .

19. Infine, scorri verso il basso fino alla fine della pagina e fai clic sul pulsante Salva modifiche .

Inoltre, qui è dove puoi configurare l'app. Dovresti controllare le impostazioni per vedere se c'è qualcos'altro che devi regolare.

#2: Abilita l'accesso al numero di telefono sul tuo negozio WooCommerce in modo programmatico

In questo tutorial, aggiungeremo un'altra opzione per il numero di telefono nel modulo di accesso del tuo negozio WooCommerce. Tieni presente che questo non invia SMS OTP per verificare gli utenti come nel tutorial precedente.

Gli utenti possono scegliere ciò che è più conveniente per loro. Potresti averlo visto nel modulo di accesso di Amazon. Consente agli utenti di accedere con un'e-mail o un numero di telefono.

Dovrai aggiungere un codice PHP personalizzato al file "functions.php" del tema attualmente attivo. Se non sai come farlo, segui le istruzioni seguenti:

1. Passa alla pagina Aspetto > Editor file tema dalla dashboard di WordPress.

2. Scegli il tema che stai utilizzando nell'angolo in alto a destra.
3. Accedi al file “functions.php” dalla barra laterale destra.

Aggiungi l'immissione del numero di telefono

Per abilitare l'accesso al numero di telefono WooCommerce sul tuo sito eCommerce WordPress, devi memorizzare i numeri di telefono degli utenti nella tabella "wp_usermeta".

Questo può essere fatto al momento della registrazione dell'utente. È possibile utilizzare il codice seguente per raggiungere questo obiettivo.

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

Una volta che hai una meta_key "user_phone" con il suo valore, puoi controllare le credenziali dell'utente con un numero di telefono.

Crea un modulo di accesso

Ora creiamo un semplice modulo di accesso in cui gli utenti possono inserire i propri dettagli di accesso. Avrà i seguenti elementi:

• Un campo di testo per inserire un nome utente/e-mail/telefono
• Un campo di testo per inserire una password
• Un nonce per evitare attacchi CSRF (è un campo nascosto)
• Un pulsante di invio

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

Negli script precedenti, abbiamo aggiunto il codice HTML e chiamato anche il metodo "log_the_user_in()". Questo è responsabile del controllo delle credenziali dell'utente.

Se si verificano errori sul lato server, informeremo l'utente tramite il metodo "get_error_message()".

Nel passaggio successivo, dovremo definire il metodo "log_the_user_in()" e restituire l'errore.

Accedi con i numeri di telefono in WooCommerce

Quando un utente inserisce le credenziali e fa clic sul pulsante di invio, otterremo le credenziali e le verificheremo rispetto al database.

Se tutto corrisponde, li accederemo e li reindirizzeremo alla home page. Per gli accessi falsi, gli errori verranno registrati utilizzando la classe "WP_Error". In base alle tue esigenze, puoi cambiarlo in qualsiasi altra pagina modificando il codice.

Definiremo il metodo "log_the_user_in()" sull'hook "init". Questo hook si attiva dopo che WordPress ha terminato il caricamento ma prima che venga inviata qualsiasi intestazione. Questo è l'ideale per elaborare un modulo utilizzando il metodo POST.

Di seguito il codice:

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

Qui, abbiamo prima verificato il nonce per proteggere il modulo da determinati tipi di uso improprio, codice dannoso e attacchi CSRF.

Successivamente, in base al metodo "is_email()" o "is_numeric()", WordPress verificherà la presenza di un'e-mail o di un numero di telefono valido. Se il valore inserito non è un'e-mail o un numero di telefono, verificheremo un nome utente.

Parole finali

Si tratta di aggiungere il numero di telefono di accesso nel tuo negozio WooCommerce. Spero di averti aiutato con il tuo progetto.

Se hai trovato utile questo articolo, sentiti libero di condividere i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.