So passen Sie WooCommerce-Anmelde- und Registrierungsformulare an

Out of the Box bietet WooCommerce begrenzte Anpassungsoptionen für Anmelde- und Registrierungsformulare. Dies erschwert es Ladenbesitzern, den Kunden ein gutes Benutzererlebnis zu bieten.

Darüber hinaus sind Sie auf die standardmäßigen Checkout-Felder beschränkt, was bedeutet, dass Sie während des Checkouts keine zusätzlichen Informationen vom Kunden sammeln können. Dies ist nicht ideal für Geschäfte, die Kunden die Möglichkeit geben möchten, Buchungsdaten auszuwählen, mehrere E-Mail-Adressen einzugeben oder Geschenkverpackungsoptionen anzubieten.

Eine Möglichkeit, dies zu überwinden, ist die Verwendung eines robusten Plugins wie ProfilePress, mit dem Sie alles an einem Ort verwalten können. In diesem Artikel gehen wir darauf ein, wie Sie WooCommerce-Anmelde- und Registrierungsformulare mit ProfilePress anpassen können.

Warum die Anmelde- und Registrierungsformulare von WooCommerce anpassen?

Die Anpassung der Anmelde- und Registrierungsformulare von WooCommerce kann dazu beitragen, Ihre Website benutzerfreundlicher zu gestalten und die Conversions zu steigern.

Ladenbesitzer müssen möglicherweise die Standard-WooCommerce-Anmelde- und Registrierungsformulare anpassen, um Kunden ein personalisiertes Erlebnis zu bieten. Indem Sie ein exklusives Anmelde- und Registrierungsformular erstellen, können Sie das Kundenerlebnis auf Ihrer Website verbessern und Registrierungen maximieren.

Sie können der Checkout-Seite Ihrer WooCommerce-Website auch benutzerdefinierte Felder hinzufügen, um zusätzliche Informationen vom Kunden zu sammeln, bevor er zur Kasse geht. Sie können Kunden beispielsweise erlauben, ihre Social-Media-Konten und ihre Benutzernamen hinzuzufügen oder zusätzliche Informationen zu den Produkten in ihrem Einkaufswagen anzuzeigen. Dies hilft Ihnen, Ihren Kunden ein personalisierteres Einkaufserlebnis zu bieten.

Das Ersetzen der Standardseite „Mein Konto“ in WooCommerce durch eine benutzerdefinierte Seite ist eine großartige Möglichkeit, Ihren Shop hervorzuheben. Sie können Kunden ermöglichen, sich einfach bei ihren Konten anzumelden und ihre Daten von einem zentralen Ort aus zu verwalten. Sie können sich beispielsweise anmelden, registrieren und ihre Benutzerkonten personalisieren, indem sie Profilbilder hochladen, Spitznamen bearbeiten oder eine Biografie hinzufügen.

Das Anpassen der Anmelde- und Registrierungsformulare von WooCommerce kann Ihnen dabei helfen, eine verbesserte Benutzererfahrung in Ihrem Online-Shop anzubieten.

Anpassen von Anmelde- und Registrierungsformularen für WooCommerce

Mit ProfilePress ist es einfach, die Anmelde- und Registrierungsformulare von WooCommerce anzupassen und sie genau so aussehen zu lassen, wie Sie es möchten.

ProfilePress bietet eine All-in-One-Lösung zum Erstellen ansprechender WordPress-Websites und bietet umfangreiche Tools, mit denen Sie kontrollieren können, wer Zugriff auf Ihre Inhalte hat. Per Drag-and-Drop-Builder erstellen Sie intuitive Benutzerprofile sowie ansprechende Registrierungs- und Login-Formulare.

Dazu benötigen wir eine funktionierende WordPress-Site mit installiertem WooCommerce-Plugin. Wir benötigen auch das ProfilePress-Plugin, um benutzerdefinierte Anmelde- und Registrierungsformulare zu erstellen.

Schritt #1: Installieren und aktivieren Sie ProfilePress

Beginnen Sie damit, das ProfilePress-Plugin zu erhalten und es auf Ihrer WordPress-Seite zu installieren. Navigieren Sie im WordPress-Adminbereich zu Plugins → Neu hinzufügen und klicken Sie auf die Schaltfläche Neu hinzufügen. Laden Sie die ZIP-Datei hoch und installieren Sie das Plugin auf Ihrer WordPress-Seite.

Schritt Nr. 2: Passen Sie Anmelde- und Registrierungsformulare an

Als erstes müssen wir mit der Erstellung unseres benutzerdefinierten Anmeldeformulars mit ProfilePress beginnen. Navigieren Sie dazu zu ProfilePress → Formulare & Profile und klicken Sie auf die Schaltfläche Neu hinzufügen im Abschnitt Anmelden . Klicken Sie auf den Drag & Drop Builder und wählen Sie eine Vorlage aus. Für diese Demonstration haben wir das Bash- Template ausgewählt.

Sobald Sie die Vorlage ausgewählt haben, werden Sie automatisch zur Seite „ Formular bearbeiten “ weitergeleitet. Sie können Felder in der von Ihnen bevorzugten Reihenfolge hinzufügen und löschen und auch Feldbeschriftungen bearbeiten.

Sie können auch die Formulareinstellungen bearbeiten und das Aussehen und die Beschriftungen der Schaltflächen im Anmeldeformular anpassen. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Änderungen speichern , um fortzufahren. Jetzt müssen wir eine neue WordPress-Seite erstellen und das benutzerdefinierte Anmeldeformular zu dieser Seite hinzufügen, indem wir den benutzerdefinierten Shortcode verwenden.

Navigieren Sie zu Seiten → Neu hinzufügen, um eine neue Seite zu erstellen, und fügen Sie der Seite den Shortcode des Anmeldeformulars hinzu. Klicken Sie auf die Schaltfläche Veröffentlichen , um fortzufahren.

Jetzt erstellen wir das Registrierungsformular und fügen es einer neuen WordPress-Seite hinzu. Navigieren Sie dazu zu ProfilePress → Formulare & Profile und klicken Sie im Bereich Registrierung auf die Schaltfläche Neu hinzufügen.

Geben Sie Ihrem Registrierungsformular einen Titel und wählen Sie eine Vorlage aus, um mit der Anpassung zu beginnen. Wir haben die Tulip- Vorlage ausgewählt. Sie werden automatisch zur Seite „ Formular bearbeiten “ weitergeleitet.

Hier können Sie Felder zu Ihrem Registrierungsformular hinzufügen oder entfernen und die Darstellung im Frontend ändern. Wenn Sie mit der Anpassung des Registrierungsformulars fertig sind, klicken Sie auf die Schaltfläche Änderungen speichern , um fortzufahren.

Um eine neue WordPress-Registrierungsseite zu erstellen, gehen Sie zu Seiten → Neu hinzufügen und fügen Sie den Shortcode des Registrierungsformulars ein. Klicken Sie auf die Schaltfläche Veröffentlichen , um fortzufahren.

Schritt #3: Anmelde- und Registrierungsformulare im Frontend anzeigen

Gehen Sie zu ProfilePress → Einstellungen und klicken Sie auf die Registerkarte Allgemein . Fügen Sie die neu erstellten benutzerdefinierten Anmelde- und Registrierungsseiten mithilfe der Dropdown-Menüs zu Ihrem Shop hinzu und klicken Sie auf die Schaltfläche Änderungen speichern , um fortzufahren.

Dadurch werden die standardmäßige WordPress-Anmeldeseite und alle Anmelde- und Registrierungslinks von WooCommerce durch die von ProfilePress ersetzt . So sieht das auf dem Frontend Ihrer Website aus.

Schritt #3.5: Anmelde- und Registrierungsformulare für WooCommerce ersetzen

Um die Registrierungs- und Anmeldeformulare zu ersetzen, die auf der WooCommerce-Seite „Mein Konto“ angezeigt werden, gehen Sie zu Einstellungen >> WooCommerce und wählen Sie die ProfilePress-Anmelde- und Registrierungsformulare aus, um sie zu ersetzen.

Benutzer können sich mit dem attraktiven benutzerdefinierten Registrierungsformular für ein Konto auf Ihrer WooCommerce-Website registrieren. Bereits registrierte Benutzer können sich mit dem zuvor erstellten benutzerdefinierten Anmeldeformular bei ihrem Konto anmelden:

Schritt #4: Fügen Sie der Checkout-Seite benutzerdefinierte Felder hinzu

Sie können der Checkout-Seite Ihres WooCommerce-Shops auch benutzerdefinierte Felder hinzufügen. Navigieren Sie dazu einfach zu ProfilePress → Einstellungen und klicken Sie auf die Registerkarte Benutzerdefinierte Felder .

Klicken Sie auf die Schaltfläche Neu hinzufügen und legen Sie eine Feldbezeichnung für Ihr benutzerdefiniertes Feld fest. Nachdem Sie den Feldschlüssel und die Feldbeschreibung festgelegt haben, können Sie den Feldtyp je nach Bedarf festlegen.

Sie können Text, Passwörter, E-Mail, Telefon, versteckte Felder, Nummer, Datum, Land, Datei-Upload, Optionsfelder, Kontrollkästchen, Textbereichsfelder erstellen und diese auf der Checkout-Seite Ihres WooCommerce-Shops anzeigen.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Änderungen speichern , um fortzufahren.

Gehen Sie als Nächstes zu ProfilePress → Einstellungen und klicken Sie auf die Registerkarte WooCommerce . Fügen Sie die benutzerdefinierten Felder im Metafeld Erforderliche Registrierungsfelder hinzu und klicken Sie auf die Schaltfläche Änderungen speichern , um fortzufahren.

Benutzer können die benutzerdefinierten Felder auf der Checkout-Registrierungsseite sehen, wenn sie aus Ihrem Online-Shop auschecken

.

Darüber hinaus möchten wir auch das benutzerdefinierte Anmeldeformular auf der Checkout-Seite anzeigen und das Standardformular ersetzen. Navigieren Sie dazu einfach zu ProfilePress → Einstellungen und klicken Sie auf die Registerkarte WooCommerce .

Wählen Sie das benutzerdefinierte Anmeldeformular aus dem Dropdown-Menü neben Anmeldeformular zur Kasse aus und klicken Sie auf die Schaltfläche Änderungen speichern , um fortzufahren. Dadurch wird das Standard-Anmeldeformular auf der Checkout-Seite Ihrer WooCommerce-Website ersetzt.

Bonus: Erstellen Sie eine benutzerdefinierte WooCommerce-Seite „Mein Konto“.

Über die Seite „Mein Konto“ in WooCommerce können Website-Besucher direkt vom Frontend aus auf ihr Benutzerkonto zugreifen.

Mit ProfilePress können Sie eine vollständig benutzerdefinierte WooCommerce-Seite „Mein Konto“ erstellen, auf der Benutzer ihre Benutzerkonten einfach anzeigen und bearbeiten können, alles von einer einzigen Seite aus. Navigieren Sie dazu zu Profile Press → Forms & Profiles und klicken Sie auf die Schaltfläche Add New .

Geben Sie Ihrem Formular „Profil bearbeiten“ einen neuen Namen und wählen Sie eine Vorlage aus, um mit der Anpassung zu beginnen. Wir haben die Pinnacle- Vorlage ausgewählt. Sobald Sie auf die Schaltfläche „ Vorlage auswählen“ klicken, werden Sie automatisch zur Seite „ Formular bearbeiten “ weitergeleitet.

Sie können Felder hinzufügen und das Aussehen Ihres Formulars im Frontend Ihrer WooCommerce-Site anpassen. Wenn Sie mit der Anpassung des Formulars „Mein Konto“ fertig sind, klicken Sie auf die Schaltfläche „ Änderungen speichern “, um fortzufahren.

Nachdem wir das Formular „Mein Konto“ erstellt haben, müssen wir eine WordPress-Seite erstellen, um sie auf Ihrer Website anzeigen zu können. Gehen Sie zu Seiten → Neu hinzufügen und fügen Sie den Shortcode Profil bearbeiten ein. Klicken Sie auf die Schaltfläche „ Veröffentlichen “, wenn Sie fertig sind.

Und unten ist eine Vorschau des benutzerdefinierten Profilbearbeitungsformulars.

Oder Sie können den gesamten Vorgang einfach überspringen und stattdessen den Shortcode ProfilePress My Account auf der oben erstellten Seite verwenden.

Benutzer können ihre Kontoinformationen bearbeiten und auf die Schaltfläche Profil aktualisieren klicken, um Änderungen an ihren Benutzerkonten direkt vom Frontend aus vorzunehmen. Die Seite würde als neue Seite „Mein Konto“ dienen.

Sie können Benutzern auch erlauben, ihre Bestellungen, Downloads, Abonnements und ihre Mitgliedschaft anzuzeigen, indem Sie zu ProfilePress → Einstellungen gehen. Klicken Sie auf die Registerkarte WooCommerce und wählen Sie die Registerkarten aus, die in der Einstellung Meine Konto-Registerkarten angezeigt werden sollen.

Fazit

Das Anpassen der WooCommerce-Anmelde- und Registrierungsformulare auf Ihrer Website ist eine großartige Möglichkeit, das Kundenerlebnis zu verbessern und mehr Benutzer zu ermutigen, sich bei Ihnen zu registrieren.

Obwohl WordPress standardmäßig eingeschränkte Anpassungsfunktionen für Anmelde- und Registrierungsseiten bietet, können Sie ein robustes Plugin wie ProfilePress verwenden, um benutzerdefinierte Seiten zu erstellen und die Benutzererfahrung Ihres Online-Shops zu verbessern.

Sind Sie bereit, die Anmelde- und Registrierungsformulare für WooCommerce auf Ihrer Website anzupassen? Holen Sie sich noch heute ProfilePress!