Sie können Ihre WooCommerce-Loginseite jetzt ohne Code anpassen. Custom Login für WooCommerce, neu von Visser Labs, bietet wiederkehrenden Kunden eine gebrandete Seite unter /login mit fünf Vorlagen, Ihrem Logo und einem Promo-Panel neben dem Formular.
Die meisten Shops berühren ihren Anmeldebildschirm nie. WooCommerce zeigt ein einfaches Benutzername- und Passwortformular auf der Seite „Mein Konto“, das von Ihrem Theme gestaltet wird. Es funktioniert, aber es wirkt wie eine nachträgliche Überlegung, und es ist die einzige Seite, die Ihre wiederkehrenden Kunden jedes Mal sehen, wenn sie zurückkehren.
Custom Login für WooCommerce behebt das. Im Folgenden behandeln wir, warum die Standardanmeldung zu kurz greift, was das Plugin tut, die fünf Vorlagen, wie man das Promo-Panel verwendet und wie man alles in wenigen Minuten einrichtet.
Inhaltsverzeichnis
- Warum die Standard-WooCommerce-Loginseite zu kurz greift
- Was Custom Login für WooCommerce tut
- Fünf Vorlagen für Ihre WooCommerce-Loginseite
- Verwandeln Sie Ihre Loginseite in einen Aktionsbereich
- So passen Sie Ihre WooCommerce-Loginseite an
- So funktionieren Anmeldungen und Weiterleitungen
- Für Entwickler: Hooks und Filter
- Preise und Anforderungen
- Bieten Sie wiederkehrenden Kunden ein besseres Willkommen
- Häufig gestellte Fragen
Warum die Standard-WooCommerce-Loginseite zu kurz greift
Die Standard-WooCommerce-Anmeldung ist ein funktionsfähiges Formular ohne eigene Markenzeichen oder Botschaften. Es befindet sich in der Vorlage „Mein Konto“ Ihres Themes. Daher bedeutet eine Änderung des Aussehens normalerweise die Bearbeitung von Theme-Dateien oder das Schreiben von CSS.
Die Personen, die sich anmelden, sind Ihre bestehenden Kunden, die Gruppe, die am wahrscheinlichsten wieder kauft. Unser Leitfaden zu den Vorteilen der Kundenbindung erklärt, warum diese Zielgruppe besondere Aufmerksamkeit verdient.
Die Anmeldung ist auch ein Punkt, an dem Käufer abbrechen. Laut Baymard Institute verursachten Probleme bei der Passwortzurücksetzung, dass einige bestehende Kontonutzer den Checkout auf Einzelhandelsseiten in ihren Tests abbrachen. Eine fokussierte Anmeldeseite mit einem sichtbaren Link „Passwort vergessen?“ gibt diesen Kunden einen klaren Weg zurück.
Ein weiteres Problem ist verschwendeter Platz. Eine Anmeldeseite erhält stetigen Traffic von Leuten, die Ihnen bereits vertrauen, und das Standardformular nutzt diesen nicht, um sie über einen Verkauf, ein neues Produkt oder ein Treueangebot zu informieren. Wenn Sie unsere Strategien zur Reduzierung von Warenkorbabbrüchen gelesen haben, wissen Sie, wie wichtig jeder kleine Schritt im Kaufprozess ist.
Was Custom Login für WooCommerce tut
Custom Login für WooCommerce erstellt eine eigenständige Anmeldeseite unter /login und leitet abgemeldete Käufer von „Mein Konto“ dorthin. Sie steuern das Layout, das Logo, die Farben, die Texte und ein Werbefeld über einen Einstellungsbildschirm unter WooCommerce.
Hier ist, was in Version 1.0.3 enthalten ist:
- Automatische /login-Seite: Durch Aktivieren des Plugins wird eine Anmeldeseite unter /login erstellt, falls Ihre Website noch keine hat.
- Weiterleitung zu „Mein Konto“: Abgemeldete Besucher, die „Mein Konto“ aufrufen, werden zu /login weitergeleitet und nach der Anmeldung zurück zu „Mein Konto“ geleitet.
- Fünf Vorlagen: Classic Split, Centered Card, Gradient Modern, Dark Mode und Warm Organic.
- Branding-Steuerelemente: Fügen Sie Ihr Logo hinzu, ändern Sie die Überschrift und legen Sie Farben für Felder, Schaltflächen, Links und Eingabefelder fest.
- Bearbeitbare Formularbeschriftungen: Benennen Sie die E-Mail- und Passwortbeschriftungen, den Text für „Angemeldet bleiben“, die Anmeldeschaltfläche und den Link „Passwort vergessen“ um.
- Werbefeld: Zeigen Sie eine Überschrift, eine kurze Nachricht und eine Call-to-Action-Schaltfläche neben dem Anmeldeformular an.
- Rotierende Inhalte: Fügen Sie mehrere Werbebotschaften hinzu und zeigen Sie bei jedem Besuch eine zufällige an.
- Mobile Steuerung: Blenden Sie das Werbefeld auf Mobiltelefonen aus oder stapeln Sie es unter dem Anmeldeformular.
Es erklärt auch die Kompatibilität mit High-Performance Order Storage. WooCommerce beschreibt HPOS als eine Datenbankstruktur, die speziell für E-Commerce-Bestelldaten entwickelt wurde, gemäß der WooCommerce HPOS-Dokumentation. Shops, die darauf umgestellt haben, sehen keine Kompatibilitätswarnung für Custom Login für WooCommerce.
Fünf Vorlagen für Ihre WooCommerce-Loginseite
Jede Vorlage ist ein vollständiges Design für die Anmeldeseite, und Sie wechseln mit einem Klick auf der Registerkarte „Vorlage“ zwischen ihnen. Ihr Logo, Ihre Überschrift und Ihre Beschriftungen werden übernommen, sodass das Ausprobieren eines anderen Looks Sekunden dauert. Centered Card zeigt das Anmeldeformular allein an, ohne das Werbefeld. Wählen Sie also eine der anderen vier, wenn Sie ein Angebot anzeigen möchten.
| Vorlage | Wie es aussieht |
|---|---|
| Classic Split | Sauberes weißes Anmeldeformular auf einer Seite, farbiger Werbebereich auf der anderen |
| Centered Card | Eine einzelne Anmeldekarte auf dunklem Hintergrund, ohne Werbefeld |
| Gradient Modern | Ein heller Farbverlaufshintergrund mit einer schwebenden weißen Karte |
| Dark Mode | Ein dunkles Thema mit Akzentfarben |
| Warm Organic | Warme Töne und abgerundete Formen für ein freundliches Gefühl |
Classic Split ist das Layout, das wir im Visser Labs Store verwenden. Einige Vorlagen behalten ihr eigenes Farbschema stärker bei als andere. Vorschau Ihrer Design-Registerkartenfarben für die ausgewählte Vorlage. Wenn Ihre Anmeldeseite exakte Markenfarben haben soll, ist Classic Split ein guter Ausgangspunkt.
Hier sehen Sie, wie jede Vorlage mit Beispiel-Shop-Branding aussieht. Wir haben diese fünf Beispiel-Shops auf unserer Testseite erstellt, einen pro Vorlage, damit Sie die Bandbreite sehen, bevor Sie sich entscheiden.
Verwandeln Sie Ihre Loginseite in einen Aktionsbereich
Das Promo-Panel stellt jedem Kunden, der sich anmeldet, ein Angebot vor. Es zeigt eine Überschrift, eine kurze Nachricht und eine Schaltfläche, die überall verlinkt werden kann, direkt neben dem Anmeldeformular, das Ihre Kunden bereits sehen.
Sie richten es auf der Registerkarte "Inhalt" ein. Schalten Sie Promo-Bereich aktivieren ein und füllen Sie dann vier Felder aus:
- Promo-Überschrift: Die Schlagzeile im Panel.
- Promo-Inhalt: Ein oder zwei Sätze unterstützender Text.
- Schaltflächentext: Die Beschriftung der Call-to-Action-Schaltfläche.
- Schaltflächen-URL: Wohin die Schaltfläche führt. Sie öffnet sich in einem neuen Tab, sodass die Anmeldeseite des Kunden geöffnet bleibt.
Anzeige einer anderen Nachricht bei jedem Besuch
Rotierende Inhalte ermöglichen es Ihnen, mehrere Aktionen gleichzeitig auszuführen. Schalten Sie Rotation aktivieren ein, klicken Sie auf Element hinzufügen und geben Sie jedem Element seine eigene Überschrift, seinen eigenen Inhalt, seinen eigenen Schaltflächentext, seine eigene Schaltflächen-URL und seine eigene Bild-URL. Custom Login für WooCommerce wählt dann bei jedem Laden der Seite zufällig ein Element aus.
Dies funktioniert gut für Shops mit mehr als einer Botschaft. Ein Element könnte einen saisonalen Verkauf bewerben, ein anderes eine neue Produktpalette und ein drittes Ihre Newsletter-Anmeldung.
Was wir gesehen haben: Auf unserer eigenen Visser Labs Anmeldeseite wirbt das Promo-Panel überhaupt nicht für ein Visser-Plugin. Es rotiert Angebote für unsere Schwester-Plugins wie SaveTo Wishlist und Advanced Coupons, und das SaveTo Wishlist-Angebot enthält einen getrackten Link, damit wir seine Klicks sehen können. Eine Anmeldeseite ist ein guter Ort, um etwas Verwandtes zu verkaufen, da die Leute, die sie lesen, bereits ein Konto bei Ihnen haben. Unser Artikel über Umsatzsteigerung mit SaveTo Wishlist Pro erklärt, warum ein Wunschlisten-Angebot für wiederkehrende Kunden geeignet ist.
Auswahl, wie die Promo auf Mobilgeräten aussieht
Telefone não têm espaço para dois painéis lado a lado, então a aba Design tem uma configuração Exibição de Promoção Mobile com duas opções. Ocultar no mobile mostra apenas o formulário de login em telas pequenas, e é o padrão. Empilhar abaixo do formulário de login mantém a promoção visível por baixo.
Escolha Empilhar abaixo do formulário de login se sua promoção carrega uma oferta real. Mantenha o padrão se o painel for principalmente decoração.
So passen Sie Ihre WooCommerce-Loginseite an
Para personalizar sua página de login do WooCommerce, você trabalha através de quatro abas e um botão Salvar. Tudo fica em WooCommerce > Login Personalizado.
- Instale e ative o plugin. Envie o Login Personalizado para WooCommerce de Plugins > Adicionar Novo, então ative-o. Sua página /login é criada automaticamente.
- Ative sua licença. Abra a aba Licença, insira sua Chave de Licença e o Email de Ativação que você usou na compra, e ative. Uma licença ativa lhe dá atualizações do plugin e suporte.
- Escolha um modelo. Na aba Modelo, clique no design que você quer.
- Personalize. Na aba Design, cole o endereço do seu logo em URL do Logo (SVG, PNG e JPG são suportados, e 200x60px é recomendado), então defina seu Título de Login.
- Defina cores e rótulos. Ainda na aba Design, ajuste Cores do Painel, Cores do Botão, Cores do Botão de Promoção, Cores dos Links e Cores de Entrada, então renomeie quaisquer Rótulos do Formulário que você queira mudar.
- Adicione sua promoção. Na aba Conteúdo, preencha o painel de promoção ou ative o conteúdo rotativo.
- Salvar. Clique em Salvar Configurações no topo da tela de configurações, então abra seusite.com/login em uma janela de navegador privada para verificar o resultado.
Use uma janela privada para essa verificação final. Usuários logados que visitam /login são enviados diretamente para Minha Conta, então você não verá a página de login enquanto estiver conectado como administrador.
So funktionieren Anmeldungen und Weiterleitungen
O Login Personalizado para WooCommerce usa o próprio fluxo de login do WooCommerce, então as contas, senhas e histórico de pedidos dos seus clientes permanecem os mesmos. Apenas a página em que eles fazem login é nova.
Alguns detalhes valem a pena saber:
- Entrar com nome de usuário ou e-mail: O campo de login aceita ambos, assim como o WordPress padrão.
- De volta para onde começaram: Quando um comprador é enviado de Minha Conta para /login, ele retorna para Minha Conta após fazer login.
- Redefinições de senha ainda funcionam: O link “Esqueceu sua senha?” leva para a página normal de recuperação de senha do WooCommerce, e essa página nunca é redirecionada.
- Logout leva para /login: Após o logout, os clientes retornam para sua página de login com uma mensagem de confirmação.
- Uma mensagem de erro: Uma senha errada e um nome de usuário desconhecido mostram a mesma mensagem, “Nome de usuário desconhecido ou senha incorreta.” Isso impede que alguém use o formulário para verificar quais contas existem.
Das Anmeldeformular verwendet auch die Standard-Hooks für Anmeldeformulare von WooCommerce. Erweiterungen, die Felder zum WooCommerce-Anmeldeformular hinzufügen, wie z. B. CAPTCHA-Plugins, können diese auch zu Ihrer neuen Seite hinzufügen. Wenn Bots ein Problem für Ihren Shop darstellen, behandelt unser Leitfaden zum Thema Verhindern von gefälschten Bestellungen in WooCommerce das Gesamtbild.
Für Entwickler: Hooks und Filter
Entwickler können das Verhalten von Custom Login for WooCommerce mit zwei Filtern und drei Aktionen ändern. Dies ist der unterstützte Weg, es anzupassen, ohne Plugin-Dateien zu bearbeiten.
clwc_login_redirect: Ändern Sie, wohin ein Kunde nach einer erfolgreichen Anmeldung weitergeleitet wird. Er empfängt die Weiterleitungs-URL und den Benutzer.clwc_logout_redirect: Ändern Sie, wohin ein Kunde nach der Abmeldung weitergeleitet wird.clwc_after_login_form: Wird nach dem Anmeldeformular ausgeführt, für zusätzliche Links oder Hinweise.clwc_login_footer: Wird im Fußzeilenbereich der Anmeldeseite ausgeführt.clwc_login_enqueue_scripts: Skripte oder Stile für die Anmeldeseite einreihen. Die Seite löstwp_enqueue_scriptsnicht aus, verwenden Sie stattdessen diese Aktion.
Die Weiterleitung nach der Anmeldung durchläuft auch den eigenen Filter woocommerce_login_redirect von WooCommerce, sodass bestehender Weiterleitungscode weiterhin funktioniert.
Preise und Anforderungen
Custom Login for WooCommerce wird als Jahreslizenz verkauft; prüfen Sie die Plugin-Seite für die aktuellen Preise. Dies beinhaltet automatische Updates und Support und wird durch die 14-tägige Geld-zurück-Garantie von Visser Labs abgedeckt.
Ihr Shop benötigt:
- WordPress 5.8 oder höher
- PHP 7.4 oder höher
- WooCommerce 6.0 oder höher
Bieten Sie wiederkehrenden Kunden ein besseres Willkommen
Ihre Anmeldeseite ist eine der wenigen Seiten, die Menschen immer wieder bewusst besuchen. Wenn Sie Ihre WooCommerce-Anmeldeseite anpassen, wird dieser Besuch zu einem Markenmoment, und das Promo-Panel bietet Ihnen einen Platz, um wiederkehrenden Kunden zu zeigen, was es Neues gibt.
- Prüfen Sie, warum die Standardanmeldung für Ihren Shop nicht ausreicht
- Wählen Sie eine der fünf Vorlagen, die zu Ihrer Marke passt
- Richten Sie das Promo-Panel ein mit einem Angebot für wiederkehrende Kunden
- Befolgen Sie die Einrichtungsschritte und testen Sie in einem privaten Fenster
Bereit, Ihre WooCommerce-Anmeldeseite anzupassen? Holen Sie sich Custom Login for WooCommerce und geben Sie Ihren wiederkehrenden Kunden eine Anmeldeseite, die wie Ihr Shop aussieht.
Häufig gestellte Fragen
Was ist eine benutzerdefinierte WooCommerce-Loginseite?
Eine benutzerdefinierte WooCommerce-Loginseite ist eine spezielle Anmeldeseite mit Ihrem eigenen Design anstelle des Standardformulars auf der Seite „Mein Konto“. Custom Login für WooCommerce erstellt eine unter /login mit Ihrer Wahl aus fünf Vorlagen, Ihrem Logo, benutzerdefinierten Farben und einem optionalen Promo-Panel.
Benötigen meine Kunden neue Passwörter?
Nein. Custom Login für WooCommerce verwendet die Standard-WordPress- und WooCommerce-Anmeldung, sodass jedes vorhandene Konto, jedes Passwort und jede Bestellhistorie unverändert bleibt. Kunden melden sich mit denselben Daten auf der neuen Seite an.
Ändert Custom Login für WooCommerce die WordPress-Admin-Anmeldung?
Nein. Es behandelt die Kundenanmeldung unter /login und die Weiterleitung von Mein Konto. Ihre wp-admin-Anmeldebildschirm wird nicht geändert.
Kann ich auf meiner Loginseite verschiedene Aktionen anzeigen?
Ja. Schalten Sie rotierende Inhalte auf der Registerkarte „Inhalt“ ein und fügen Sie so viele Elemente hinzu, wie Sie möchten. Jedes Element hat seine eigene Überschrift, seinen eigenen Text, seine eigene Schaltfläche und sein eigenes Bild, und Custom Login für WooCommerce zeigt bei jedem Besuch eines zufällig an.
Funktioniert es mit HPOS?
Ja. Version 1.0.3 erklärt die Kompatibilität mit WooCommerce High-Performance Order Storage, sodass Shops, die HPOS verwenden, keine Kompatibilitätswarnung sehen.
Was passiert, wenn ein angemeldeter Kunde /login besucht?
Sie werden direkt zu ihrer Mein Konto-Seite weitergeleitet. Das Anmeldeformular wird nur Besuchern angezeigt, die nicht angemeldet sind.
