Die vollständige Anleitung zum WooCommerce-Login-Shortcode

Eine Anmeldeseite ist ein wichtiges Element eines WooCommerce-Shops. Es ist wie ein Tor für Ihre Kunden, um auf ihre Konten zuzugreifen, Bestellungen zu verfolgen und Einkäufe abzuschließen. Was aber, wenn der gesamte Prozess zu kompliziert ist und seinen eigentlichen Zweck nicht erfüllt?

Aus diesem Grund müssen Sie versuchen, die Anmelde-Shortcodes für WooCommerce anzupassen. Sie helfen Ihnen , Anmeldeseiten in wenigen Minuten zu erstellen und anzupassen und bieten Ihren Kunden ein benutzerfreundliches Erlebnis.

Ganz gleich, ob Sie ein einfaches Anmeldeformular, eine kombinierte Anmelde- und Registrierungsseite oder eine eigenständige Registrierungsseite für gezielte Kampagnen wünschen, mit WooCommerce-Login-Shortcodes ist dies ganz einfach.

In diesem Artikel werden wir alles besprechen, was mit dem WooCommerce-Anmelde-Shortcode zu tun hat, angefangen bei der Erstellung einer Anmeldeseite mithilfe eines Shortcodes, um sie für ein besseres Benutzererlebnis anzupassen.

Also, fangen wir an.

Arten von WooCommerce-Anmeldeseiten

Eine Anmeldeseite mag wie ein einfaches Gateway aussehen, aber sie ist mehr als nur ein Gateway – sie ist ein Feld für Benutzername und Passwort!

Abhängig von Ihren Geschäftsanforderungen und Benutzerpräferenzen gibt es verschiedene Arten von Anmeldeseiten. Lassen Sie uns die Optionen erkunden:

1. Klassische Anmeldeseite : Dies ist eine einfache Anmeldeseite. Die Benutzer müssen lediglich ihre Anmeldedaten eingeben, und schon sind sie dabei.
2. Soziale Anmeldeseite : Diese Art von Anmeldeseite ermöglicht es Ihren Benutzern, sich mit ihren bevorzugten Social-Media-Konten anzumelden.
3. Benutzerdefinierte Anmeldeseite : Diese Art von Anmeldeseite wird an Ihre Markenidentität angepasst. Dazu müssen Sie Ihr Markenlogo und Ihre Farben hinzufügen sowie Begrüßungsnachrichten hinzufügen, um Benutzer zur Anmeldung zu ermutigen.
4. Mehrstufige Anmeldeseite : Diese Art von Anmeldeseite ist ideal für diejenigen, die ihrer Anmeldeseite eine zusätzliche Sicherheitsebene hinzufügen möchten. Es unterteilt den gesamten Prozess in überschaubare Schritte, wie die Eingabe eines Benutzernamens, eines Passworts und eines Bestätigungscodes.
5. Single-Sign-On-Seite (SSO) : Schließlich ermöglicht diese Art von Anmeldeseite Benutzern, dieselben Anmeldeinformationen für mehrere Anwendungen zu verwenden.

Dies waren auch einige Arten von Anmeldeseiten. Was denken Sie, welche passen zu Ihrem WooCommerce-Shop? Handelt es sich um eine klassische Anmeldeseite oder um eine soziale Seite? Nun, die Wahl liegt bei Ihnen. Denken Sie daran, es personalisiert und benutzerfreundlich zu gestalten.

Wichtigkeit der Anpassung der WooCommerce-Anmeldeseite

Eine langweilige und generische Anmeldeseite kann für Ihre Kunden völlig abschreckend sein. Durch die Personalisierung verbessern Sie das Erscheinungsbild der Seite und steigern den Wert Ihres Shops .

Aber es erfordert Aufwand, und wenn Sie sich fragen, warum Sie Ihre Zeit dafür investieren müssen, finden Sie hier einige der wichtigsten Gründe, warum sich der Aufwand lohnt.

• Exklusive Bereiche: Erstellen Sie eingeschränkte Bereiche, die nur für angemeldete Benutzer zugänglich sind.
• Verbesserte Benutzererfahrung: Verbessert die Benutzererfahrung, da nicht mehr immer wieder Angaben gemacht werden müssen, um einen Kauf zu tätigen.
• Optimierter Zugriff: Ermöglicht Benutzern die Anmeldung und die Verwaltung ihrer Informationen an einem Ort.
• Gesteigerte Conversions: Eine benutzerfreundliche und optisch ansprechende Anmeldeseite trägt zur Reduzierung der Absprungraten bei und ermutigt Kunden, ihre Einkäufe abzuschließen.
• Erhöhte Sicherheit: Fügen Sie Funktionen wie CAPTCHA oder Zwei-Faktor-Authentifizierung hinzu, um Benutzerdaten zu schützen.

Das Anpassen Ihrer WooCommerce-Anmeldeseite ist nicht nur eine ästhetische Aufwertung, sondern eine wichtige Verbesserung .

Nachdem Sie nun die Gründe dafür kennen, können wir uns an die Arbeit machen und sehen, wie Sie mithilfe des WooCommerce-Anmeldekurzcodes eine Anmeldeseite erstellen und anpassen.

Wie erstelle ich eine Anmeldeseite mit dem WooCommerce-Anmelde-Shortcode?

Alles beginnt also mit dem My Account Shortcode in WooCommerce. Mit diesem einfachen WooCommerce-Login-Shortcode – [woocommerce_my_account] können Sie den gesamten Bereich „Mein Konto“ zu jeder Seite hinzufügen.

Hier können sich Ihre Kunden anmelden, vergangene Bestellungen einsehen, ihre Daten aktualisieren und ihr Konto verwalten.

Wenn Sie also möchten, dass sich Kunden auch über diese Seite registrieren können, stellen Sie sicher, dass die Registrierung in den WooCommerce-Einstellungen aktiviert ist.

• Gehen Sie zunächst zu Ihrem WordPress admin dashboard . Navigieren Sie nun zu Pages um eine neue Seite zu erstellen. Wenn Sie keine neue Seite erstellen möchten, klicken Sie auf eine vorhandene Seite, um sie zu bearbeiten.
• Klicken Sie nun auf das + -Symbol, um einen neuen Block auf der Seite hinzuzufügen.
• Suchen Sie in den Optionen nach Shortcode.
• Es erscheint ein Feld. Hier können Sie den WooCommerce-Login-Shortcode kopieren und einfügen: [woocommerce_my_account]

Hinweis: Dieser Shortcode zeigt ein Anmeldeformular zusammen mit der Benutzerregistrierung und den Kontodetails an.

• Klicken Sie abschließend auf die Schaltfläche Publish oder Update , um die Seite auf Ihrer Website zu veröffentlichen.

Auf diese Weise haben Sie eine Anmeldeseite erstellt; Befolgen Sie nun diese Schritte, um die Seite als Ihre Standard-Anmeldeseite festzulegen:

• Gehen Sie zu WooCommerce > Settings > Advanced .
• Wählen Sie auf der My account page die obige Seite für die Option „Mein Konto“ aus.

Besuchen Sie abschließend die Anmeldeseite und stellen Sie sicher, dass alles reibungslos funktioniert.

Mit diesen Schritten haben Sie eine voll funktionsfähige Anmeldeseite erstellt .

Wenn Sie also eine separate Registrierungs-, Anmelde- und Kontoseite wünschen, müssen Sie die Seite mithilfe der WooCommerce-Anmeldekurzcodes anpassen.

Anpassen der WooCommerce-Anmeldeseite

1. Registrierungsseite: Fügen Sie den Shortcode [sa_woocommerce_registration_form] zu Ihrer Registrierungsseite hinzu, sobald Sie das erste Snippet unten aktiviert haben. Wenn die Benutzer angemeldet sind, wird die Meldung „Sie sind bereits registriert“ angezeigt.

/**
 * Shortcode für die WooCommerce-Benutzerregistrierung.
 *
 * @author StoreApps
 */
add_shortcode( 'sa_woocommerce_registration_form', 'storeapps_custom_registration_form' );
Funktion storeapps_custom_registration_form() {
	if ( is_user_logged_in() ) {
		zurückkehren '
 Sie sind bereits registriert.
		

 ';
	}
	ob_start();
	do_action( 'woocommerce_before_customer_login_form' );
	$html = wc_get_template_html( 'myaccount/form-login.php' );
	$dom = new DOMDocument();
	$dom->encoding = 'utf-8';
	$dom->loadHTML( utf8_decode( $html ) );
	$xpath = new DOMXPath( $dom );
	$form = $xpath->query( '//form[contains(@class,"register")]' );
	$form = $form->item( 0 );
	echo $dom->saveHTML( $form );
	return ob_get_clean();
}

2. Anmeldeseite: Verwenden Sie für die Anmeldeseite den Shortcode [sa_woocommerce_registration_form] nachdem Sie das zweite Snippet aktiviert haben. Wenn der Benutzer angemeldet ist, wird die Meldung „Sie sind bereits angemeldet“ angezeigt.

/**
 * Shortcode für die WooCommerce-Benutzeranmeldung
 *
 * @author StoreApps
 */
add_shortcode( 'sa_woocommerce_login_form', 'storeapps_custom_login_form' );
Funktion storeapps_custom_login_form() {
	if ( is_user_logged_in() ) {
		zurückkehren '
 Sie sind bereits angemeldet.
		

 ';
	}
	ob_start();
	do_action( 'woocommerce_before_customer_login_form' );
	woocommerce_login_form( array( 'redirect' => wc_get_page_permalink( 'myaccount' ) ) );
	return ob_get_clean();
}

3. Seite „Mein Konto“: Behalten Sie den Shortcode [woocommerce_my_account] auf Ihrer Seite „Mein Konto“, um alle Benutzerkontodetails anzuzeigen.
4. Weiterleitung nach der Registrierung: Sie können auch eine Weiterleitung nach der Registrierung hinzufügen, sodass die Kunden nach der Registrierung auf die Seite „Mein Konto“ weitergeleitet werden (das Anmeldeformular übernimmt dies standardmäßig bereits).
5. Angemeldete Benutzer umleiten: Um Fehler zu vermeiden, wenn angemeldete Benutzer auf die Anmelde- oder Registrierungsseiten zugreifen, verwenden Sie das folgende Snippet. Dadurch werden sie automatisch zur Seite „Mein Konto“ weitergeleitet.

/**
 * Anmeldung/Registrierung auf „Mein Konto“ umleiten
 *
 * @author StoreApps
 */
add_action( 'template_redirect', 'storeapps_redirect_to_myaccount_after_logged_in' );
Funktion storeapps_redirect_to_myaccount_after_logged_in() {
	if ( is_page() && is_user_logged_in() && ( has_shortcode( get_the_content(), 'sa_woocommerce_login_form' ) || has_shortcode( get_the_content(), 'sa_woocommerce_registration_form' ) ) ) {
		wp_safe_redirect( wc_get_page_permalink( 'myaccount' ) );
		Ausfahrt;
	}
}

Hinweis: Damit dies funktioniert, müssen Sie die Snippets zum benutzerdefinierten PHP-Abschnitt in Ihrer Datei „functions.php“ und das benutzerdefinierte CSS in der Datei „style.css“ Ihres Hauptthemas hinzufügen.

Beste Plugins zur Verbesserung der WooCommerce-Anmeldung

Hier sind einige der besten WooCommerce-Plugins, die Ihnen dabei helfen können , Ihre Anmeldeseite anzupassen, ohne sich auf WooCommerce-Anmelde-Shortcodes einzulassen :

Express-Login für WordPress

Anmeldeseiten eignen sich hervorragend für Ihre Website, aber wie wäre es, wenn wir sie noch intelligenter machen?

Herkömmliche Anmeldeseiten sind zwar hilfreich, aber wie wäre es mit einem noch schnelleren Zugriff für Kunden, Klienten oder temporäre Mitarbeiter ? Hier kommt Express Login für WordPress von StoreApps ins Spiel.

Express Login für WordPress ermöglicht Ihren Benutzern die sofortige Anmeldung mit sicheren und automatischen Anmeldelinks. Es sind weder Benutzername noch Passwörter erforderlich – nur ein reibungsloses Benutzererlebnis!

• Überall weiterleiten: Leiten Sie Ihre Benutzer mühelos direkt zur Kasse, zum Warenkorb oder zu versteckten Seiten.
• Selbstverfallende Links: Legen Sie Anmeldelinks mit Ablaufdaten fest, um die Sicherheit zu erhöhen.
• Massenexport von Links: Erstellen und teilen Sie ganz einfach Anmeldelinks für E-Mail-Kampagnen.
• Einfach zu verwendendes Plugin: Dieses Plugin ist einfach zu verwenden. Sie müssen es nur noch installieren, aktivieren und schon kann es losgehen!

Mit Express Login für WordPress sorgen Sie dafür, dass sich Ihre Benutzer nicht den Kopf zerbrechen, wenn sie nach Benutzernamen und Passwörtern suchen.

Verabschieden Sie sich vom Anmeldeproblem und begrüßen Sie Komfort und Sicherheit.

Probieren Sie jetzt Express Login für WordPress aus

Ultimatives Mitglied

Ultimate Member ist ein leistungsstarkes Plugin zur Vereinfachung der Benutzerverwaltung. Sie können damit benutzerdefinierte Registrierungs- und Anmeldeformulare, Benutzerprofile und rollenbasierten Zugriff erstellen .

Es bietet außerdem einen Drag-and-Drop-Builder, mit dem Sie mühelos beeindruckende Formulare entwerfen können.

• Benutzerdefinierte Formulare: Erstellen Sie anpassbare Anmelde-, Registrierungs- und Benutzerprofilformulare.
• Rollenbasierter Zugriff: Weisen Sie verschiedene Benutzerrollen mit maßgeschneiderten Berechtigungen zu.
• Drag-and-Drop-Builder: Gestalten Sie Formulare mühelos.
• Bedingte Logik: Formularfelder basierend auf Benutzereingaben anzeigen.

Insgesamt ist es eine gute Wahl, um auf WooCommerce ansprechende Communities oder Mitgliederseiten aufzubauen .

Benutzerregistrierung

User Registration ist ein weiteres einsteigerfreundliches Plugin zum Erstellen anpassbarer Anmelde- und Registrierungsformulare. Es bietet vorgefertigte Vorlagen, bedingte Logik und Integrationen von Drittanbietern für ein nahtloses Benutzererlebnis.

• Vorgefertigte Vorlagen: Mit vorgefertigten Formularentwürfen können Sie schnell loslegen.
• Bedingte Logik: Felder basierend auf Benutzereingaben anzeigen.
• Integrationen von Drittanbietern: Nahtlose Verbindung mit E-Mail-Marketing-Tools und CRMs.
• Mehrstufige Formulare: Teilen Sie lange Formulare für eine bessere Benutzererfahrung in mehrere Schritte auf.

Insgesamt ist dieses Plugin ideal für WooCommerce-Shop-Besitzer, die anpassbare und skalierbare Formulare wünschen .

RegistrierungMagic

RegistrationMagic ist ein weiteres Plugin, das Ihnen bei der Erstellung erweiterter Anmelde- und Registrierungsformulare helfen kann. Es unterstützt auch die Zahlungsintegration, die Zuweisung von Benutzerrollen und detaillierte Formularanalysen .

• Zahlungsintegration: Akzeptieren Sie Zahlungen direkt über Registrierungsformulare.
• Zuweisung von Benutzerrollen: Weisen Sie Benutzern basierend auf Formulareinsendungen automatisch Rollen zu.
• Detaillierte Analysen: Verfolgen Sie die Leistung mit detaillierten Dateneinblicken.
• Shortcodes: Betten Sie Formulare an einer beliebigen Stelle auf Ihrer Website ein.

Insgesamt ist dies ideal für die Verwaltung von Benutzerregistrierungen und bietet gleichzeitig Flexibilität und Kontrolle über Formulardesign und Funktionalität.

Abschluss

Das Anpassen Ihrer Anmeldeseite mit dem WooCommerce-Anmeldekurzcode bietet zahlreiche Vorteile, darunter ein verbessertes Benutzererlebnis, eine Verbesserung der Markenidentität, verbesserte Sicherheit usw.

Eine personalisierte Anmeldeseite sorgt für eine nahtlose Reise für Ihre Kunden und vereinfacht den gesamten Prozess.

Unabhängig davon, ob Sie WooCommerce-Anmeldekurzcodes oder -Plugins verwenden, sollten Sie auf jeden Fall versuchen, die Anmeldeseite anzupassen, um eine bessere Funktionalität zu erzielen und die Benutzerzufriedenheit zu erhöhen.

Wenn Sie Ihren Kunden die WooCommerce-Anmeldung erleichtern möchten, vergessen Sie nicht, noch heute Express Login für WordPress zu erkunden.