2 einfache Möglichkeiten, die Anmeldung per Telefonnummer in WooCommerce zu aktivieren

Die Anmeldung per Telefonnummer ist eine praktische Funktion, die das Benutzererlebnis verbessern und den Anmelde- und Registrierungsprozess vereinfachen soll. Daher möchten viele WooCommerce-Benutzer diese Funktion in ihren Online-Shops implementieren.

Wenn Sie einer dieser Menschen sind, dann sind Sie auf der richtigen Webseite gelandet. In diesem Artikel erfahren Sie, wie Sie es Benutzern ermöglichen, sich mit ihrer WooCommerce-Telefonnummer auf zwei Arten anzumelden und zu registrieren.

Warum sollten Sie die WooCommerce -Telefonnummer-Anmeldung in Ihrem Geschäft aktivieren?

Telefonregistrierung und -anmeldung sind für WooCommerce-Shops, die stark auf die Handynummern der Kunden angewiesen sind, äußerst nützlich geworden. Zum Beispiel Lebensmittellieferung, Taxis usw.

Zusätzlich zu diesen spezifischen Nischen finden Sie im Folgenden einige Vorteile, von denen jedes Unternehmen profitiert.

• Käufer können sich direkt mit ihrer Telefonnummer in Ihrem WooCommerce-Shop anmelden und registrieren.
• Es vermeidet Kundenregistrierungs-Spam in Ihrem Online-Shop.
• Käufer können sich auch anmelden, ohne sich an ihren Benutzernamen und ihr Passwort zu erinnern.
• Sie können die Telefonnummern der Kunden per OTP-SMS verifizieren.
• Alle verifizierten Kunden sind echt und verhindern somit gefälschte Bestellungen.
• Ihre Kunden können schnell über mobile Geräte benachrichtigt werden, auch wenn sie keinen Zugang zum Internet haben.
• Sie können Ihre Kunden schnell mit Aktionen und Angeboten über ihre Telefonnummern erreichen.

Mit diesen Vorteilen können Sie Ihre Geschäftsstrategie und schließlich Ihr Verbrauchswachstum leicht verbessern. Sie haben alles, was Sie brauchen, um mit Ihren Kunden auf einfachste und konkreteste Weise zu kommunizieren.

Nr. 1: Aktivieren Sie die Anmeldung per Telefonnummer in Ihrem WooCommerce-Shop mit einem Plugin

Es gibt mehrere Plugins, die Ihnen dabei helfen können. Zum Beispiel:

• Registrierung & Login mit Handynummer
• Ziffern: WordPress-Mobiltelefonnummer OTP-Registrierungs- und Anmeldeformular
• Melden Sie sich mit der Handynummer für WooCommerce an

Aber in diesem Tutorial werden wir uns für das Plugin „Login mit Telefonnummer“ entscheiden, da es das beliebteste kostenlose ist.

Installieren Sie das Plugin „ Login mit Telefonnummer “ in Ihrem WooCommerce- Shop aktivieren

Als erstes müssen Sie das Plug-in „ Login mit Telefonnummer “ in Ihrem WooCommerce -Shop installieren und aktivieren. Nachfolgend finden Sie die Anweisungen.

1. Navigieren Sie zunächst vom WordPress-Dashboard zur Seite Plugins > Neu hinzufügen.

2. Geben Sie „Login mit Telefonnummer“ in das Suchfeld oben rechts ein.
3. Das Plugin sollte zuerst in der Liste erscheinen. Klicken Sie auf die Schaltfläche Jetzt installieren , die neben dem Titel angezeigt wird.
4. Danach wird das Plugin heruntergeladen. Sobald Sie fertig sind, sehen Sie, wie sich die Schaltfläche Jetzt installieren in die Schaltfläche Aktivieren ändert. Klick es.

Erstellen Sie eine neue Anmelde-/Registrierungsseite

Der nächste Schritt besteht darin, den Shortcode des Plugins in eine neue Anmelde-/Registrierungsseite einzufügen.

1. Navigieren Sie im WordPress-Dashboard zu Seite > Neu hinzufügen.

2. Wählen Sie einen Titel für die neue Seite aus, z. B. „ Anmelde-/Registrierungsseite “.

3. Fügen Sie den Shortcode [idehweb_lwp] darin ein.
4. Veröffentlichen Sie die Seite.

Erhalten Sie 10.000 kostenlose OTP-SMS pro Monat mit Firebase

Wenn ein neuer Benutzer ein Konto in Ihrem WooCommerce-Shop registriert, wird ein Bestätigungscode an seine Handynummer gesendet. Daher müssen Sie ein SMS-Gateway bereitstellen, damit das Plugin ordnungsgemäß funktioniert.

Sie können Firebase von Google verwenden. Es bietet 10.000 OTP-SMS pro Monat kostenlos. Hier ist, wie:

1. Melden Sie sich mit Ihrem Google-Konto bei der Firebase-Konsole an.
2. Klicken Sie auf die Schaltfläche Projekt erstellen .

3. Jetzt müssen Sie einen Namen für das neue Projekt eingeben, die Nutzungsbedingungen von Firebase akzeptieren und auf die Schaltfläche Projekt erstellen klicken.
4. Sobald das Projekt erfolgreich erstellt wurde, gehen Sie in der linken Seitenleiste zur Seite Erstellen > Authentifizierung .

5. Klicken Sie auf die Schaltfläche Erste Schritte.
6. Wählen Sie Telefon als Anbieter aus.

7. Schalten Sie den Schalter in der oberen rechten Ecke um, um diese Option zu aktivieren. Klicken Sie dann auf die Schaltfläche Speichern .

8. Scrollen Sie nach unten zum Abschnitt Autorisierte Domänen . Klicken Sie auf die Schaltfläche Domain hinzufügen und geben Sie den Domainnamen Ihres WooCommerce-Shops ein. Klicken Sie dann auf die Schaltfläche Hinzufügen .

9. Wechseln Sie nun zur Registerkarte Vorlagen .

10. Klicken Sie auf das Stiftsymbol neben dem Text der Vorlagensprache . Wählen Sie als Nächstes die Sprache aus, die Sie für die SMS-Bestätigung bevorzugen.

11. Klicken Sie auf das Zahnradsymbol neben dem Text Projektübersicht und wählen Sie Projekteinstellungen .

12. Scrollen Sie nach unten zu den Abschnitten Ihre Apps . Klicken Sie dann auf das Web-Symbol.

13. Geben Sie einen Spitznamen für Ihre neue App ein. Klicken Sie dann auf die Schaltfläche App registrieren .

14. Wählen Sie die Option <script>-Tag verwenden und kopieren Sie die bereitgestellten Skripts.

15. Gehen Sie jetzt zum WordPress-Dashboard Ihres WooCommerce-Shops. Besuchen Sie dann die Seite „Anmeldeeinstellungen“.

16. Fügen Sie die Skripts in das Textfeld „Firebase-Konfiguration “ ein.
17. Kopieren Sie zurück zum Firebase-Fenster den in den Skripten bereitgestellten API-Schlüssel.

18. Zurück zum WordPress-Fenster, fügen Sie den API-Schlüssel in das Textfeld Firebase api ein.

19. Scrollen Sie schließlich zum Ende der Seite und klicken Sie auf die Schaltfläche Änderungen speichern .

Außerdem können Sie hier die App konfigurieren. Sie sollten die Einstellungen überprüfen, um festzustellen, ob Sie noch etwas anpassen müssen.

Nr. 2: Aktivieren Sie die Anmeldung per Telefonnummer in Ihrem WooCommerce-Shop programmgesteuert

In diesem Tutorial fügen wir dem Anmeldeformular Ihres WooCommerce-Shops eine weitere Telefonnummernoption hinzu. Bitte beachten Sie, dass dies keine OTP-SMS sendet, um Benutzer zu verifizieren, wie im vorherigen Tutorial.

Benutzer können wählen, was für sie bequemer ist. Möglicherweise haben Sie dies auf dem Amazon-Anmeldeformular gesehen. Benutzer können sich mit einer E-Mail-Adresse oder Telefonnummer anmelden.

Sie müssen benutzerdefinierten PHP-Code zur Datei „functions.php“ des derzeit aktiven Designs hinzufügen. Wenn Sie nicht wissen, wie das geht, befolgen Sie die nachstehenden Anweisungen:

1. Navigieren Sie im WordPress-Dashboard zur Seite Aussehen > Designdatei-Editor .

2. Wählen Sie das von Ihnen verwendete Thema in der oberen rechten Ecke aus.
3. Greifen Sie über die rechte Seitenleiste auf die Datei „functions.php“ zu.

Telefonnummerneintrag hinzufügen

Um die WooCommerce-Telefonnummernanmeldung auf Ihrer WordPress-E-Commerce-Website zu aktivieren, müssen Sie die Telefonnummern der Benutzer in der Tabelle „wp_usermeta“ speichern.

Dies kann zum Zeitpunkt der Benutzerregistrierung erfolgen. Sie können den folgenden Code verwenden, um dieses Ziel zu erreichen.

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

Sobald Sie einen „user_phone“-Metaschlüssel mit seinem Wert haben, können Sie die Anmeldeinformationen des Benutzers mit einer Telefonnummer überprüfen.

Anmeldeformular erstellen

Lassen Sie uns nun ein einfaches Anmeldeformular erstellen, in das Benutzer ihre Anmeldedaten eingeben können. Es wird die folgenden Elemente haben:

• Ein Textfeld zur Eingabe von Benutzername/E-Mail/Telefon
• Ein Textfeld zur Eingabe eines Passworts
• Eine Nonce, um CSRF-Angriffe zu vermeiden (es ist ein verstecktes Feld)
• Ein 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 den obigen Skripten haben wir HTML-Code hinzugefügt und auch die Methode „log_the_user_in()“ aufgerufen. Dies ist für die Überprüfung der Anmeldeinformationen des Benutzers verantwortlich.

Wenn einige Fehler auf der Serverseite auftreten, werden wir den Benutzer über die Methode „get_error_message()“ informieren.

Im nächsten Schritt müssen wir die Methode „log_the_user_in()“ definieren und den Fehler zurückgeben.

Melden Sie sich mit Telefonnummern in WooCommerce an

Wenn ein Benutzer die Anmeldeinformationen ausfüllt und auf die Schaltfläche „Senden“ klickt, erhalten wir die Anmeldeinformationen und verifizieren sie mit der Datenbank.

Wenn alles passt, melden wir sie an und leiten sie auf die Homepage weiter. Bei falschen Anmeldungen werden die Fehler mithilfe der Klasse „WP_Error“ protokolliert. Je nach Bedarf können Sie sie auf jede andere Seite ändern, indem Sie den Code ändern.

Wir werden die Methode „log_the_user_in()“ am Hook „init“ definieren. Dieser Hook wird ausgelöst, nachdem WordPress das Laden beendet hat, aber bevor ein Header gesendet wird. Dies ist ideal für die Verarbeitung eines Formulars mit der POST-Methode.

Unten ist der 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; }

Hier haben wir zunächst die Nonce verifiziert, um das Formular vor bestimmten Arten von Missbrauch, bösartigem Code und CSRF-Angriffen zu schützen.

Als nächstes prüft WordPress basierend auf der Methode „is_email()“ oder „is_numeric()“ auf eine gültige E-Mail-Adresse oder Telefonnummer. Wenn der eingegebene Wert keine E-Mail-Adresse oder Telefonnummer ist, suchen wir nach einem Benutzernamen.

Letzte Worte

Hier geht es darum, die Anmeldung mit der Telefonnummer in Ihrem WooCommerce-Shop hinzuzufügen. Ich hoffe, es hat Ihnen bei Ihrem Projekt geholfen.

Wenn Sie diesen Artikel hilfreich fanden, können Sie Ihre Gedanken und Vorschläge im Kommentarbereich unten teilen.