So passen Sie Anmelde- und Registrierungsseiten in WooCommerce an und trennen sie

Unabhängig davon, ob Sie WooCommerce verwenden oder nicht, wissen Sie möglicherweise bereits, dass es sich um eine der beliebtesten Open-Source-E-Commerce-Lösungen handelt, die heute verfügbar sind. Wie jede Software hat sie jedoch gewisse Einschränkungen und Nachteile. In diesem Artikel werden wir eines davon ansprechen … die Unfähigkeit, die Anmelde- und Registrierungsseiten vollständig anzupassen und/oder zu trennen.

Eine der häufigsten Anfragen von WooCommerce-Benutzern ist die Möglichkeit, sowohl die Anmelde- als auch die Registrierungsseite zu aktualisieren und anzupassen. Im Idealfall möchten viele Benutzer diese Seiten auch trennen können, anstatt sie als „Alles-in-einer“-Seite zu haben. In diesem Artikel werden wir uns ansehen, wie Sie beides erreichen können … eine vollständig angepasste UND getrennte Anmelde-/Registrierungsseite für Ihre WooCommerce-Website.

Lass uns anfangen!

Verwendung eines Plugins

Es überrascht vielleicht nicht, dass der einfachste Weg, das Dilemma der Anpassung der Anmelde-/Registrierungsseite zu lösen, die Verwendung eines Plugins ist. Wir haben einige der besten ausgewählt, die Sie möglicherweise verwenden möchten. Werfen wir einen Blick auf sie.

Woocommerce Login / Anmeldung Lite

Gehen Sie in Ihr WordPress-Admin-Menü und installieren und aktivieren Sie im Bereich „Plugins -> Neu hinzufügen“ das Plugin.

Das Woocommerce Login / Signup Lite-Plugin ist ein kostenloses Plugin, das auch eine Premium-Version anbietet. Für unsere Bedürfnisse sollte die kostenlose Version jedoch in Ordnung sein. Es ist ziemlich einfach zu bedienen. Nach der Installation können Sie Shortcodes erstellen, die der Art von Formular entsprechen, das Sie benötigen (z. B. ein Anmelde- oder Registrierungsformular). Sie können diesen Shortcode dann auf jeder gewünschten Seite einfügen. Zu den Shortcodes gehören:

• Der [lsphe-login-form] zum Erstellen eines Anmeldeformulars.
• Der [lsphe-signup-form] zum Erstellen eines Registrierungsformulars.
• Der [lsphe-header] zum Erstellen eines Formulars, das sowohl Anmelde- als auch Registrierungsformulare enthält.

Du kannst die verfügbaren Shortcodes im Admin-Bereich des Plugins sehen.

Eine weitere großartige Funktion, die dieses Plugin bietet, ist die Möglichkeit, ein Popup-Anmelde-/Registrierungsfenster aus einem Menüpunkt zu erstellen. Das sieht ziemlich ordentlich aus und bietet weitere Flexibilität, wenn es darum geht, Ihren Kunden Anmeldeoptionen anzubieten. Führen Sie die folgenden Schritte aus, um eines davon zu erstellen:

• Klicken Sie auf Darstellung > Menüs, um den Menüverwaltungsbildschirm aufzurufen.
• Verwenden Sie den Pfeil oben rechts, um die Bildschirmoptionen zu öffnen, und aktivieren Sie die „CSS-Klassen“ in den „Erweiterten Menüeigenschaften anzeigen“.

• Erstellen Sie einen benutzerdefinierten Link-Menüeintrag und geben Sie eine „#“-URL ein. Benennen Sie das Element wie Sie möchten und fügen Sie es dem Menü hinzu.
• Sobald es in der Menüliste erscheint, öffnen Sie seinen Akkordeonabschnitt und fügen Sie in der CSS-Klasse Folgendes hinzu: phoen-login-popup-open

Um dasselbe für ein Registrierungs-Popup zu tun, folgen Sie denselben Schritten und verwenden Sie die phoen-signup-popup-open und um beide Formulare anzuzeigen, verwenden Sie die phoen-login-signup-popup-open .

Benutzer Registration

Das Plugin zur Benutzerregistrierung ermöglicht Ihnen die Erstellung von Frontend-Formularen mithilfe von Drag-and-Drop-Feldern, die eine einfache Gestaltung und Neuordnung von Formularen ermöglichen.

Nachdem Sie das Plugin installiert haben, gehen Sie zur „Benutzerregistrierung“, wo Sie mit der Erstellung Ihres maßgeschneiderten Registrierungsformulars für Ihren WooCommerce-Shop beginnen können. Sie werden feststellen, dass es ein vorgefertigtes Formular mit einem Shortcode gibt, den Sie kopieren und an einer Stelle Ihrer Wahl in Ihre Website einfügen können. Das Formular sieht in etwa so aus:

Sie können das Formular natürlich bearbeiten oder ganz einfach ein neues erstellen. Folgen Sie einfach den Anweisungen im Plugin und Sie sind im Handumdrehen mit einem Formular Ihrer Wahl einsatzbereit.

Anmelde-/Registrierungs-Popup

Ein weiteres erwägenswertes Plugin ist das Login/Signup Popup (Inline Form + Woocommerce). Anstelle von On-Page-Formularen hilft Ihnen das Plugin (wie der Name schon sagt) beim Erstellen von Popup-Anmeldeformularen, die über einen Link oder eine Schaltfläche auf Ihrer Website ausgelöst werden können. Popups können großartig sein und helfen, Platz auf der Seite zu sparen, und geben den Leuten die Möglichkeit, sich von jedem Punkt Ihrer Website aus anzumelden, ohne auf eine bestimmte Anmelde- oder Registrierungsseite umgeleitet zu werden.

Wie bei allen aufgeführten Plugins steht es Ihnen frei, das Design der Formulare vollständig anzupassen. Andere bemerkenswerte Funktionen sind Dinge wie "Social"-Logins, die es Benutzern ermöglichen, sich mit ihren Google- oder Facebook-Logins anzumelden. Dies geschieht mit einem kostenpflichtigen Addon für benutzerdefinierte Registrierungsfelder.

Kodieren Sie Ihre eigenen WooCommerce-Registrierungs- und Anmeldeseiten

Wenn Sie kein Plugin verwenden möchten, um Ihre eigenen Anmelde-/Registrierungsseiten für WooCommerce zu erstellen, warum programmieren Sie dann nicht Ihre eigenen! Wie immer bietet die Codierung die ultimative Kontrolle über Features, Design und Funktion und ist daher die perfekte Option, wenn Sie eine bestimmte Aufgabe erfüllen müssen oder die potenzielle Aufblähung vermeiden möchten, die mit einem Plugin einhergeht.

Um mit diesem Tutorial zu beginnen, richten Sie zunächst einen Menüpunkt ein, der auf die Standardseite „Mein Konto“ von WooCommerce verweist. Wenn Sie nun diesen Menü-Link im Frontend der Website aufrufen, sehen Sie entweder das Anmeldeformular oder ein zweispaltiges Layout, das sowohl das Registrierungsformular als auch das Anmeldeformular enthält. Dies hängt davon ab, was Sie in der unten gezeigten Option zur Erstellung des WooCommerce-Kontos festgelegt haben.

Melden Sie sich mit einem SFTP-Client bei Ihrem Webserver an, damit Sie Ihre Website-Ordner sehen können. Unter /wp-content/plugins/woocommerce/templates/myaccount/ du die Datei form-login.php . Öffnen Sie diese Datei mit Ihrem bevorzugten Editor.

Der Code in dieser Datei enthält sowohl das Anmelde- als auch das Registrierungsformular. Sie können den Inhalt dieser Datei auf der offiziellen Git-Seite sehen. Dort werden Sie feststellen, dass es eine if-Bedingung <?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?> , die sich auf die Admin-Option im obigen Screenshot bezieht.

Auf diese Weise können wir die Anmelde- und Registrierungsseiten trennen und die Formulare mit nur wenigen Änderungen anpassen.

Passen Sie das Anmeldeformular an

Zunächst sollten Sie sicherstellen, dass alle Änderungen, die Sie am Anmelde-/Registrierungsformular vornehmen, auf sichere Weise vorgenommen werden, damit sie bei zukünftigen Aktualisierungen nicht rückgängig gemacht werden können.

Hosten Sie Ihre Website mit Pressidium

60- TÄGIGE GELD-ZURÜCK-GARANTIE

SEHEN SIE UNSERE PLÄNE

Wenn du bereits über deinen SFTP-Client angemeldet bist, gehe zu wp-content/themes/__my__theme__ . und erstelle einen ‚woocommerce‘-Ordner. Erstellen Sie in diesem Ordner eine Kopie der Woocommerce-Vorlagen. Es ist wichtig, dass Sie die Dateistruktur beibehalten, aber das Unterverzeichnis /templates/ entfernen. Zum Beispiel haben wir das Twenty Twenty Theme installiert und die WooCommerce form-login.php befindet sich unter plugins/woocommerce/templates/myaccount/ . Das bedeutet, dass wir, um das Formular zu überschreiben, eine Hierarchie wie diese erstellen müssen: /themes/twentytwenty/woocommerce/myaccount/ und darin die Datei form-login.php .

Testen wir es. An diesem Punkt sehen wir diese Ausgabe, wenn wir die Kontoseite am Frontend unserer Website besuchen:

Wenn wir nun versuchen, irgendetwas im Code innerhalb des form-login.php Duplikats zu ändern, werden wir feststellen, dass sich dies wie erwartet auf das Layout auswirkt. Lassen Sie uns eine kleine Änderung versuchen, nur um zu überprüfen, ob dies funktioniert. Wir ändern den „Remember me“-Text in „Remember my Credentials“ und voila, wenn wir die Front-End-Seite aktualisieren, sollten wir sehen, dass die Aktualisierung wirksam wurde.

Separate Anmeldung/Registrierung

Hier sind die Schritte, die Sie befolgen müssen, um Anmelde- und Registrierungsseiten zu trennen:

Zu Beginn registrieren wir eine neue benutzerdefinierte Vorlage. Erstellen Sie dazu eine neue Datei namens register.php und legen Sie sie im Vorlagenordner ab. In diese Datei fügen wir den folgenden Code ein:

 <?php /* * Template name: Registration Form */ ?> <?php if(is_user_logged_in()){ wp_redirect(get_permalink(get_option('woocommerce_myaccount_page_id'))); } ?> <?php get_header();?> <?php do_action( 'woocommerce_before_customer_login_form' ); ?> <div class="custom-registration"> <h2><?php esc_html_e( 'Register', 'woocommerce' ); ?></h2> <form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> > <?php do_action( 'woocommerce_register_form_start' ); ?> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php endif; ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" autocomplete="new-password" /> </p> <?php else : ?> <p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p> <?php endif; ?> <?php do_action( 'woocommerce_register_form' ); ?> <p class="woocommerce-form-row form-row"> <?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?> <button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button> </p> <?php do_action( 'woocommerce_register_form_end' ); ?> </form> </div> <?php do_action( 'woocommerce_after_customer_login_form' ); ?> <?php get_footer();?>

In diesem Code haben wir zunächst den Vorlagennamen im Kommentar Template name: Registration Form definiert. Dann prüfen wir, ob der Benutzer bereits angemeldet ist. Der Rest des Codes ist im Wesentlichen eine Kopie des Teils des Inhalts von login-form.php , der sich auf das Registrierungsformular bezieht, das in eine <div class="custom-registration"> eingeschlossen ist. <div class="custom-registration"> Element.

Als nächstes fügen wir eine neue Seite im Bildschirm wp-admin Pages hinzu und benennen sie nach Belieben. Es wäre vielleicht sinnvoll, es so etwas wie „Registrierungsseite“ zu nennen. Stellen Sie dann sicher, dass Sie die richtige Vorlage (die gerade erstellte) mit der Vorlagenauswahl in der rechten Seitenleiste auswählen.

Jetzt müssen wir nur noch eine Möglichkeit für Benutzer bereitstellen, auf diese Seite zuzugreifen. Sie können einen Menüpunkt „Registrieren“ erstellen und ihn mit der gerade erstellten Registrierungsseite verknüpfen, oder Sie können die form-login.php bearbeiten und den Registrierungscode durch einen Link zur Registrierungsseite ersetzen.

In diesem Fall würden wir die Datei form-login.php unter themes/twentytwenty/woocommerce/myaccount/ so ändern, dass der Inhalt wie folgt aussieht:

 <?php /** * Login Form * * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-login.php. * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see https://docs.woocommerce.com/document/template-structure/ * @package WooCommerce\Templates * @version 4.1.0 */ if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } do_action( 'woocommerce_before_customer_login_form' ); ?> <h2><?php esc_html_e( 'Login', 'woocommerce' ); ?></h2> <form class="woocommerce-form woocommerce-form-login login" method="post"> <?php do_action( 'woocommerce_login_form_start' ); ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" autocomplete="current-password" /> </p> <?php do_action( 'woocommerce_login_form' ); ?> <p class="form-row"> <label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme"> <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span> </label> <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?> <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button> </p> <p class="woocommerce-LostPassword lost_password"> <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a> </p> <?php do_action( 'woocommerce_login_form_end' ); ?> </form> <a href="/?p=202">Sign Up</a> <?php do_action( 'woocommerce_after_customer_login_form' ); ?>

Die Nummer 202 ist die ID der benutzerdefinierten Registrierungsseite. Zur Erinnerung: Sie können die Seiten-ID in der URL sehen, wenn sie im Backend-Editor geöffnet ist.

Wenn Sie sich die Seite jetzt vom Frontend aus ansehen, sollten Sie beim Besuch der Seite mit den Kontodetails so etwas sehen:

Wenn Sie auf den Anmeldelink klicken, sollten Sie zu der von uns erstellten Registrierungsseite weitergeleitet werden, wie unten gezeigt:

Ziemlich einfach, nicht wahr?

Shortcode erstellen

Die WooCommerce-Kontoseite enthält den Shortcode [woocommerce_my_account], mit dem die Formulare mithilfe der Datei form-login.php werden können. In diesem Abschnitt werden wir sehen, wie wir unsere eigenen Shortcodes erstellen können, einen für das Anmeldeformular und einen für das Registrierungsformular, das wir oben erstellt haben.

Shortcode für WooCommerce-Registrierung

Öffnen Sie die Datei functions.php Ihres Themes mit Ihrem Editor und fügen Sie die folgenden Zeilen ein:

 // REGISTRATION SHORTCODE function wc_registration_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; // OUR REGISTRATION FORM CONTENT } add_shortcode( 'wc_registration_form', 'wc_registration_form_function' );

Dadurch vermeiden wir die Notwendigkeit, eine separate benutzerdefinierte Vorlage zu verwenden. Stattdessen fügen wir den Inhalt der zuvor erstellten Vorlage wie folgt ein:

 // REGISTRATION SHORTCODE function wc_registration_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; ob_start(); do_action( 'woocommerce_before_customer_login_form' ); ?> <form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> > <?php do_action( 'woocommerce_register_form_start' ); ?> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php endif; ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" autocomplete="new-password" /> </p> <?php else : ?> <p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p> <?php endif; ?> <?php do_action( 'woocommerce_register_form' ); ?> <p class="woocommerce-form-row form-row"> <?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?> <button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button> </p> <?php do_action( 'woocommerce_register_form_end' ); ?> </form> <?php return ob_get_clean(); } add_shortcode( 'wc_registration_form', 'wc_registration_form_function' );

Wie Sie sehen können, haben wir den Shortcode [wc_registration_form] benannt und unseren HTML-Code in eine ob_start()-Funktion verpackt. Auf diese Weise aktivieren wir die Ausgabepufferung, sodass der HTML-Code gespeichert und als Zeichenfolge zurückgegeben wird.

Wir sind jetzt bereit, in unseren Admin-Bereich zu gehen und unsere Registrierungsseite zu bearbeiten. Wenn Sie die Registrierungsseite geöffnet haben, fügen Sie einfach den Shortcode [wc_registration_form] ein. In diesem Fall können Sie eine beliebige Vorlage verwenden, da wir nicht auf die Vorlage selbst angewiesen sind, um das Registrierungsformular zu erstellen.

Wenn Sie nun die Registrierungsseite im Frontend öffnen, sollten Sie das Registrierungsformular sehen.

Die Verwendung von Shortcodes bietet uns mehr Flexibilität als die Verwendung einer Seite mit Vorlagen, da wir das Design der gesamten Seite im Handumdrehen ändern können, ohne die Vorlagendatei neu codieren zu müssen. Dies allein erklärt, warum Shortcodes in WordPress so beliebt sind.

WooCommerce-Login-Shortcode

Jetzt haben wir einen Shortcode für das Registrierungsformular, wir können weitermachen und einen für das Anmeldeformular erstellen. Öffnen Sie erneut die Datei functions.php und fügen Sie den folgenden Code ein:

 // LOGIN SHORTCODE function wc_login_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; ob_start(); ?> <form class="woocommerce-form woocommerce-form-login login" method="post"> <?php do_action( 'woocommerce_login_form_start' ); ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" autocomplete="current-password" /> </p> <?php do_action( 'woocommerce_login_form' ); ?> <p class="form-row"> <label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme"> <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span> </label> <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?> <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button> </p> <p class="woocommerce-LostPassword lost_password"> <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a> </p> <?php do_action( 'woocommerce_login_form_end' ); ?> </form> <?php return ob_get_clean(); } add_shortcode( 'wc_login_form', 'wc_login_form_function' );

Was die Registrierungsseite betrifft, können Sie jetzt fortfahren und eine Anmeldeseite erstellen, den Shortcode [wc_login_form] einfügen und schon kann es losgehen.

Wenn Sie noch einen Schritt weiter gehen und die Seite diktieren möchten, auf die Benutzer geleitet werden, wenn sie sich von Ihrer Website abmelden, können Sie einen wp_logout Hook wie diesen verwenden:

 add_action('wp_logout','my_redirect_after_logout'); function my_redirect_after_logout(){ wp_redirect( '/?p=207' ); exit(); }

Die oben verwendete URL /?p=207 verweist auf die ID der Seite, auf die wir Personen beim Abmelden leiten möchten. Ersetzen Sie dies durch die ID Ihrer gewählten Abmeldeseite.

Ein wichtiger Hinweis!

Denken Sie daran, dass jeder Ihre neuen Anmelde- und/oder Registrierungsseiten besuchen kann … und mit jedem meinen wir auch Bots! Es ist daher sehr wichtig, dass Sie Ihre Website vor gefälschten Registrierungen und Brute-Force-Anmeldungen schützen. Für weitere Informationen zum Schutz Ihrer Website empfehlen wir Ihnen dringend, sich die Zeit zu nehmen, unseren Leitfaden zum Schutz Ihrer WordPress-Website und zum Umgang mit Spam-Aktivitäten auf Ihrer WordPress-Website zu lesen.

Hoffentlich hat Ihnen dieser Artikel einige Ideen gegeben, wie Sie Ihre WooCommerce-Registrierungs- und Anmeldeseiten neu gestalten können, und Ihnen die Tools gegeben, um Änderungen vorzunehmen, wo Sie es für richtig halten.