So passen wir WooCommerce-Login-Seiten an (3 Methoden)

Wenn Sie Ihren Kunden ein reibungsloseres Erlebnis in Ihrem WooCommerce-Shop bieten möchten, ist die Erstellung einer benutzerdefinierten Anmeldeseite ein großartiger Ausgangspunkt.

Die Standard-WordPress-Anmeldeseite sieht schlicht aus und passt nicht zum Branding Ihres Shops. Durch die Anpassung können Sie den Anmeldevorgang professioneller und markenkonform gestalten.

Bei WPBeginner haben wir vielen Benutzern geholfen, benutzerdefinierte Anmeldeseiten einzurichten, und der einfachste Weg ist die Verwendung eines Seitenerstellers wie SeedProd oder eines Formular-Plugins wie WPForms.

In diesem Tutorial zeige ich Ihnen, wie Sie eine komplett benutzerdefinierte WooCommerce-Anmeldeseite gestalten und stelle Ihnen ein leistungsstarkes Tool vor, mit dem Sie auch die Checkout-Anmeldeseite anpassen können.

Warum eine benutzerdefinierte WooCommerce-Kundenanmeldeseite erstellen?

Das Anpassen der WooCommerce-Anmeldeseiten ermöglicht es Ihnen, Ihr Logo hinzuzufügen und das Design an Ihre Website anzupassen. Dies lässt Ihre Website professioneller aussehen und bietet eine bessere Benutzererfahrung.

Es ermöglicht Ihnen auch, weitere Formularfelder hinzuzufügen, und es ermöglicht Ihnen sogar, bestimmte Produkte zu bewerben oder Sonderangebote für Kunden anzuzeigen.

Andernfalls sehen Kunden beim Anmelden in Ihrem WooCommerce-Shop die Standard-WordPress-Anmeldeseite mit nur dem WordPress-Logo und Branding.

Diese Seite ist in Ordnung, wenn Sie nur auf das Dashboard Ihrer Website zugreifen möchten. Kunden könnten jedoch vom schlichten Design abgeschreckt werden und es verdächtig finden, dass die Login-Seite nicht zum Erscheinungsbild Ihrer Website passt.

Nichtsdestotrotz wollen wir uns ansehen, wie Sie eine benutzerdefinierte Kunden-Login-Seite in WooCommerce erstellen können.

Sie können die folgenden Schnelllinks verwenden, um zu verschiedenen Methoden in unserem Tutorial zu springen:

• Methode 1: Erstellen Sie eine vollständig benutzerdefinierte WooCommerce-Anmeldeseite mit SeedProd
• Methode 2: WooCommerce-Kunden-Login-Formular mit WPForms anpassen
• Bonustipp: Passen Sie die WooCommerce-Checkout-Anmeldeseite an
• Häufig gestellte Fragen zu WooCommerce-Anmeldeseiten

Methode 1: Erstellen Sie eine vollständig benutzerdefinierte WooCommerce-Anmeldeseite mit SeedProd

Der beste Weg, eine benutzerdefinierte WooCommerce-Kunden-Login-Seite zu erstellen, ist die Verwendung von SeedProd. Es ist der beste WordPress Landing Page und Theme Builder für WordPress und unglaublich einfach zu bedienen.

Sie können den Drag-and-Drop-Builder von SeedProd verwenden, um das Design und Layout einer Seite oder Ihres WordPress-Themes anzupassen, ohne eine einzige Codezeile anfassen zu müssen.

Um mehr zu erfahren, lesen Sie unsere detaillierte SeedProd-Bewertung.

Zuerst müssen Sie das SeedProd-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zum Thema Installieren eines WordPress-Plugins.

Nach der Aktivierung sehen Sie den SeedProd-Begrüßungsbildschirm.

Geben Sie Ihren Lizenzschlüssel ein und klicken Sie auf die Schaltfläche „Schlüssel überprüfen“. Sie finden den Lizenzschlüssel im SeedProd-Konto-Bereich.

Als Nächstes können Sie eine benutzerdefinierte Login-Seite für Ihren WooCommerce-Shop erstellen.

Gehen Sie einfach zu SeedProd » Landing Pages in Ihrem WordPress-Dashboard und klicken Sie auf die Schaltfläche 'Login-Seite einrichten'.

Danach zeigt Ihnen SeedProd mehrere Vorlagen an. Sie können schnell eine auswählen und sie nach Ihren Bedürfnissen anpassen. Dies spart Zeit und Sie können ein bestehendes Design verwenden, um Ihre eigene WooCommerce-Login-Seite zu erstellen.

Das Plugin ermöglicht es Ihnen auch, eine Anmeldeseite von Grund auf mit einer leeren Vorlage zu erstellen.

Sobald Sie eine Vorlage ausgewählt haben, öffnet sich ein Popup-Fenster.

Geben Sie einen Namen für Ihre Seite ein und klicken Sie auf die Schaltfläche 'Speichern und mit der Bearbeitung der Seite beginnen'.

Als Nächstes sehen Sie den Drag-and-Drop-Seitenersteller.

Sie können die Anmeldeseite jetzt anpassen, indem Sie dem Template aus dem Menü auf Ihrer linken Seite neue Blöcke hinzufügen.

SeedProd bietet Standardblöcke für Überschriften, Texte, Bilder, Schaltflächen und mehr.

Daneben können Sie erweiterte Blöcke hinzufügen, wie z. B. ein Gewinnspiel, ein Kontaktformular, Social-Sharing-Buttons, ein Opt-in-Formular und mehr.

Es gibt auch WooCommerce-Blöcke wie aktuelle Produkte, empfohlene Produkte und meistverkaufte Produkte, die Sie Ihrer Anmeldeseiten-Vorlage hinzufügen können.

Mit den WooCommerce-Blöcken können Sie ganz einfach Ihre Top-Produkte empfehlen und Rabattangebote bewerben, um mehr Conversions zu erzielen.

Abgesehen davon können Sie mit SeedProd auch jeden Abschnitt der Anmeldeseite weiter anpassen. Klicken Sie einfach auf den Abschnitt, und Sie sehen weitere Optionen wie das Bearbeiten von Beschriftung, Farbe, Schriftart und Abständen.

Wenn Sie mit der Anpassung der WooCommerce-Anmeldeseite fertig sind, vergessen Sie nicht, oben auf die Schaltfläche „Speichern“ zu klicken.

Danach können Sie zum Tab „Seiteneinstellungen“ gehen und auf den Schalter „Seitenstatus“ klicken, um ihn von Entwurf zu Veröffentlichen zu ändern. Dann können Sie auf die Schaltfläche „Speichern“ klicken und den Seitenersteller schließen.

Von hier aus müssen Sie nur noch dafür sorgen, dass Ihre neue benutzerdefinierte WooCommerce-Anmeldeseite für Benutzer angezeigt wird. Gehen Sie dazu in Ihrem WordPress-Dashboard zu SeedProd » Landing Pages.

Klicken Sie einfach auf den Schalter unter 'Login-Seite', damit er grün ist und 'Aktiv' anzeigt.

Sobald dies aktiviert ist, wird Ihre neue Login-Seite auf Ihrer WordPress-Website angezeigt!

Sie können Ihren E-Commerce-Shop besuchen, um ihn in Aktion zu sehen.

Methode 2: WooCommerce-Kunden-Login-Formular mit WPForms anpassen

Möchten Sie ein Login-Formular erstellen, das auch zu Ihrem Website-Theme passt und mehr Formularfelder bietet?

Das Standard-WordPress-Login-Formular erlaubt Benutzern nur die Eingabe ihrer E-Mail-Adresse oder ihres Benutzernamens zusammen mit einem Passwort.

Der Hauptvorteil der Verwendung eines Formular-Plugins ist die Flexibilität. Es ermöglicht Ihnen, Ihr Anmeldeformular überall in Ihrem Online-Shop zu platzieren, z. B. in einer Seitenleiste oder auf einer Produktseite, was es für Kunden bequem macht.

Der beste Weg, dies zu tun, ist die Verwendung von WPForms. Es ist der beste WordPress-Formularersteller, der für Anfänger einfach zu bedienen ist. Über 6 Millionen Websites nutzen WPForms, um intelligentere Formulare zu erstellen.

Bei WPBeginner haben wir es zum Erstellen von Kontaktformularen und Jahresumfragen verwendet und lieben es. Weitere Informationen finden Sie in unserem vollständigen WPForms-Testbericht.

Sie können ganz einfach ein benutzerdefiniertes WooCommerce-Login-Formular erstellen und es überall in Ihrem Online-Shop anzeigen, z. B. in der Seitenleiste oder auf der Produktseite.

Zuerst müssen Sie das WPForms-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie von Ihrem WordPress-Dashboard aus zu WPForms » Einstellungen gehen und den Lizenzschlüssel eingeben. Sie finden den Lizenzschlüssel im WPForms-Konto-Bereich.

Als Nächstes müssen Sie im WordPress-Admin-Bereich zu WPForms » Addons navigieren.

Scrollen Sie danach zum „User Registration Addon“ und klicken Sie dann auf die Schaltfläche „Addon installieren“.

Jetzt sind Sie bereit, ein benutzerdefiniertes Anmeldeformular für WooCommerce zu erstellen. Gehen Sie einfach zu WPForms » Neu hinzufügen, um den Formular-Builder zu starten.

Auf dem nächsten Bildschirm können Sie oben einen Namen für Ihr Formular eingeben. Suchen Sie dann nach der Vorlage 'User Login Form' und klicken Sie auf die Schaltfläche 'Use Template'.

Danach können Sie Ihre Vorlage für das Benutzeranmeldeformular mit dem Drag-and-Drop-Builder anpassen. WPForms macht es sehr einfach, verschiedene Felder zum Formular hinzuzufügen oder die vorhandenen Felder in der Vorlage neu anzuordnen.

Sie können zum Beispiel erweiterte Felder wie Telefonnummern hinzufügen, indem Sie sie aus dem Menü auf der linken Seite ziehen und auf der Vorlage ablegen.

Sie können jedes Formularfeld in der Vorlage weiter anpassen. Klicken Sie einfach auf ein beliebiges Feld und bearbeiten Sie dessen Bezeichnung, fügen Sie eine Beschreibung hinzu und machen Sie es zu einem Pflichtfeld im Formular.

Danach können Sie zum Tab „Einstellungen“ im Formular-Builder wechseln. Unter den allgemeinen Einstellungen können Sie den Text des Sende-Buttons in „Anmelden“ ändern.

Als Nächstes können Sie zum Tab „Bestätigungen“ gehen, um zu ändern, was passiert, wenn sich ein Benutzer erfolgreich anmeldet.

Klicken Sie einfach auf das Dropdown-Menü 'Bestätigungstyp' und wählen Sie eine Option. Sie können Kunden eine Nachricht anzeigen, eine Seite anzeigen oder sie zu einer bestimmten URL weiterleiten.

Sie können beispielsweise Ihr WooCommerce-Anmeldeformular zu einer Produktseite hinzufügen und Kunden ermöglichen, sich schnell anzumelden, um Ihr Produkt zu kaufen.

Wenn Sie fertig sind, klicken Sie einfach oben auf die Schaltfläche 'Speichern'.

Als Nächstes müssen Sie das WooCommerce-Kunden-Login-Formular zu einer Seite auf Ihrer Website hinzufügen.

Klicken Sie einfach auf die Schaltfläche „Einbetten“ oben im Builder. Sie können dann wählen, ob Sie das Formular auf einer vorhandenen Seite platzieren oder eine neue dafür erstellen möchten.

Wählen wir vorerst die Option „Neue Seite erstellen“.

Als Nächstes müssen Sie einen Namen für Ihre Seite eingeben und auf die Schaltfläche 'Los geht's!' klicken.

Danach sehen Sie das WPForms-Anmeldeformular im WordPress-Inhaltsbereich.

Von hier aus können Sie Ihr Login-Formular anpassen und gestalten, indem Sie das Block-Panel auf der rechten Seite des Bildschirms öffnen. Im Abschnitt 'Designs' können Sie aus über 40 vorgefertigten Designs wählen, um Ihrem Login-Formular ein einzigartiges Aussehen zu verleihen.

Sie können auch den Stil und die Größe der Formularfelder, Beschriftungen, Schaltflächen und mehr ändern.

Sobald Sie mit dem Design zufrieden sind, können Sie eine Vorschau Ihres Formulars anzeigen, die neue Seite veröffentlichen und das benutzerdefinierte WooCommerce-Login für Ihre Kunden anzeigen.

Sie können Ihr WooCommerce-Anmeldeformular auch zur Seitenleiste Ihres Shops hinzufügen. Auf diese Weise wird Ihr Formular auf jeder Produktseite angezeigt und ermöglicht es Kunden, sich schnell anzumelden.

Gehen Sie einfach zu Darstellung » Widgets in Ihrem WordPress-Dashboard. Klicken Sie dann auf die Schaltfläche '+' und fügen Sie einen WPForms Widget-Block hinzu.

Danach können Sie Ihr Anmeldeformular aus dem Dropdown-Menü auswählen und einen Titel eingeben.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Aktualisieren“.

Sie können nun Ihren Online-Shop besuchen, um das Login-Formular in der Seitenleiste zu sehen.

Für weitere Möglichkeiten, eine benutzerdefinierte WooCommerce-Kundenanmeldeseite zu erstellen, sollten Sie sich unseren Leitfaden ansehen zur Erstellung einer benutzerdefinierten WordPress-Anmeldeseite.

Außerdem können Sie sich auch unser Tutorial ansehen zur Hinzufügung eines Navigationsmenüs in WordPress, damit Sie Ihre WooCommerce-Anmeldeseite zu Ihrer Website-Navigation hinzufügen können.

Bonustipp: Passen Sie die WooCommerce-Checkout-Anmeldeseite an

WooCommerce ermöglicht es wiederkehrenden Besuchern, sich während des Bestellvorgangs anzumelden. Ein generisches oder unhandliches Anmeldeformular auf der Checkout-Seite kann jedoch den Kaufprozess unterbrechen und zu Umsatzeinbußen führen.

Indem Sie in diesem kritischen Schritt ein nahtloses, markenbezogenes Anmeldeerlebnis schaffen, können Sie Warenkorbabbrüche reduzieren und mehr Vertrauen bei Ihren Kunden aufbauen.

Der beste Weg, dies zu tun, ist die Verwendung eines leistungsstarken Funnel-Builder-Plugins wie FunnelKit.

Es kommt mit professionell gestalteten Vorlagen, die die Standard-Checkout-Seite ersetzen und wiederkehrenden Kunden eine viel bessere und einfachere Anmeldeerfahrung bieten. Dies hilft, Reibungsverluste zu reduzieren und erhöht die Wahrscheinlichkeit, dass sie ihre Einkäufe abschließen.

Sie haben auch die Möglichkeit, die verschiedenen Funnels, Verkaufsseiten und Upsell-Angebote per A/B-Test zu testen.

FunnelKit bietet Ihnen detaillierte Analysen zu jedem Schritt Ihres WooCommerce-Funnels.

Es wird auch mit einem leistungsstarken Marketing-Automatisierungs-Add-on geliefert, FunnelKit Automations.

Es ermöglicht Ihnen, WooCommerce-E-Mails anzupassen, Drip-E-Mail-Benachrichtigungen in WooCommerce für Warenkorbabbrüche, Willkommensserien und mehr zu senden.

Wenn Sie es ernst meinen mit dem Wachstum Ihres WooCommerce-Shops, dann ist dies eines der unverzichtbaren Tools, die wir empfehlen.

Häufig gestellte Fragen zu WooCommerce-Anmeldeseiten

Hier sind einige Fragen, die unsere Leser häufig zum Erstellen von WooCommerce-Anmeldeseiten in WordPress stellen:

Kann ich diese benutzerdefinierten Login-Seiten auch für normale WordPress-Benutzer verwenden?

Ja, absolut. Die Methode mit SeedProd ersetzt die Standard-WordPress-Anmeldeseite für alle Benutzer, einschließlich Administratoren und Redakteure. Die WPForms-Methode ermöglicht es Ihnen, ein Anmeldeformular überall zu platzieren, das auch von jeder Benutzerrolle verwendet werden kann.

Muss ich programmieren können, um meine Anmeldeseite anzupassen?

Überhaupt nicht. Sowohl SeedProd als auch WPForms sind benutzerfreundlich mit Drag-and-Drop-Buildern gestaltet. Sie können eine professionell aussehende Anmeldeseite erstellen, ohne eine einzige Codezeile anzufassen.

Ist es kostenlos, eine benutzerdefinierte WooCommerce-Login-Seite zu erstellen?

Beide Plugins bieten kostenlose Versionen für den Einstieg. Um jedoch auf die spezifischen Login-Seiten-Vorlagen und erweiterten Funktionen zugreifen zu können, die in diesem Tutorial gezeigt werden, benötigen Sie die Pro-Versionen von SeedProd oder WPForms.

Welche Methode ist besser für meinen Shop, SeedProd oder WPForms?

Das hängt von Ihren spezifischen Bedürfnissen ab. SeedProd ist ideal, wenn Sie eine komplett separate, voll gestaltete Anmeldeseite erstellen möchten, die perfekt zu Ihrer Marke passt.

Andererseits ist WPForms besser, wenn Sie ein flexibles Anmeldeformular wünschen, das Sie an verschiedenen Stellen auf Ihrer Website einfügen können, z. B. in einer Seitenleiste oder auf einer Checkout-Seite.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie eine benutzerdefinierte WooCommerce-Kundenanmeldeseite erstellen. Sie können auch unsere Expertenauswahl der besten WooCommerce-Plugins und unseren Leitfaden dazu sehen, wie Sie die Anmeldeversuche in WordPress einschränken.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.