So erstellen Sie ein benutzerdefiniertes WooCommerce-Registrierungsformular

Möchten Sie den Kundenregistrierungsprozess Ihrer WordPress-Site verbessern? Das Erstellen eines benutzerdefinierten WooCommerce-Registrierungsformulars ist ein Schritt in die richtige Richtung.

Das standardmäßige WooCommerce-Plugin hat ein Registrierungsformular, sammelt aber nur grundlegende Informationen. Aber mit Hilfe eines Plugins namens ProfilePress können Sie mehr Informationen vom Benutzer sammeln und das Formular neu anordnen, um es benutzerfreundlicher zu gestalten. Die über das Formular gesammelten Informationen können unter anderem für Ihre E-Mail-Marketingkampagnen verwendet werden.

In diesem Artikel zeigen wir Ihnen, wie Sie ein benutzerdefiniertes Registrierungsformular erstellen und durch Ihr Standard-WooCommerce-Formular ersetzen. Tauchen wir ein.

Erstellen eines benutzerdefinierten WooCommerce-Registrierungsformulars

Um ein benutzerdefiniertes WooCommerce-Registrierungsformular zu erstellen, benötigen Sie ein Plugin namens ProfilePress. Im Folgenden zeigen wir Ihnen, wie Sie das Plugin einrichten.

Schritt 1: Installieren Sie ProfilePress

Melden Sie sich bei ProfilePress an und Sie erhalten eine Quittung mit einem Link zum Herunterladen des Plugins zusammen mit einem Lizenzschlüssel. Laden Sie das Plugin herunter und installieren Sie es auf Ihrer WordPress-Website. Geben Sie den Lizenzschlüssel ein, um das Plugin zu aktivieren.

Schritt 1.5: Aktivieren Sie die WooCommerce-Registrierung

Gehen Sie zu WooCommerce->Einstellungen Ihres Dashboards. Klicken Sie auf den Abschnitt Datenschutz und Konten und aktivieren Sie die Option Kunden erlauben, ein Konto auf der Seite „Mein Konto“ zu erstellen .

Schritt 2: Erstellen eines benutzerdefinierten Formulars mit ProfilePress

Jetzt kommt der lustige Teil. Gehen Sie in Ihrem WordPress-Dashboard zu ProfilePress > Forms & Profiles > Registration > Add New .

Sie haben zwei Möglichkeiten, ein benutzerdefiniertes Registrierungsformular zu erstellen. Sie können entweder eine vorgefertigte Vorlage verwenden oder ein Formular von Grund auf neu erstellen. Wenn Sie nicht wissen, wie man codiert und/oder keine Zeit in die Erstellung eines Formulars von Grund auf investieren möchten, empfehlen wir die Auswahl einer Vorlage.

Wählen Sie den Drag & Drop-Builder aus.

Geben Sie dem Formular einen Namen und wählen Sie dann eine der vorgefertigten Vorlagen aus. Für dieses Tutorial haben wir uns für Tulip entschieden. Auf der nächsten Seite können Sie das Formular nach Ihren Wünschen anpassen.

Benutzerdefinierte Felder hinzufügen

Sie können die folgenden benutzerdefinierten Felder zum Formular hinzufügen, einschließlich WooCommerce-Rechnungs- und Versandfelder zu Ihrem Registrierungsformular.

• Nutzername
• E-Mail-Addresse
• Bestätigungs-E-Mail
• Passwort
• Bestätige das Passwort
• Passwortstärke
• Website-Spitzname
• Anzeigename
• Vorname
• Familienname, Nachname
• Profilbild hochladen
• Titelbild hochladen
• Biografie
• Rolle auswählen
• Benutzerdefiniertes HTML
• reCaptcha

Hier ist ein kurzer Blick auf die benutzerdefinierten Felder, die wir für unser Registrierungsformular auswählen:

Formulareinstellungen ändern

Mit ProfilePress können Sie das Erscheinungsbild des Formulars einschließlich ändern. Das bedeutet, dass Sie ein Formular erstellen können, das zu Ihrem Branding und Stil passt. Wir empfehlen, ein paar Minuten damit zu verbringen, das Aussehen Ihres Formulars zu ändern.

Und bevor Sie mit dem nächsten Schritt fortfahren, stellen Sie sicher, dass Sie zu den Registrierungseinstellungen gehen und Kunde als neue Benutzerrolle auswählen. Jeder, der sich mit diesem benutzerdefinierten Formular anmeldet, wird als Kunde gezählt.

Wenn das Formular fertig ist, speichern Sie die Änderungen. Jetzt ist es an der Zeit, das neue benutzerdefinierte Registrierungsformular auf Ihrer Website anzuzeigen.

Schritt 3: Ersetzen des WooCommerce-Registrierungsformulars

In diesem Abschnitt erfahren Sie, wie Sie das standardmäßige WooCommerce-Registrierungsformular durch das neue benutzerdefinierte Registrierungsformular ersetzen.

Gehen Sie zu ProfilePress > Einstellungen > WooCommerce . Sie sollten eine Option mit dem Namen My Account Registration Form sehen. Wählen Sie aus dem Dropdown-Menü das neue Registrierungsformular aus, das Sie gerade erstellt haben, und speichern Sie die Einstellung.

Wenn Sie möchten, können Sie dieses Formular als Standardregistrierungsseite für Ihre Website verwenden. Alles, was Sie tun müssen, ist, zu ProfilePress > Einstellungen > Allgemein > Global zu gehen. Wählen Sie dann unter der Option Registrierungsseite die neue benutzerdefinierte Registrierungsseite aus.

Es ist erwähnenswert, dass Sie, wenn Sie jemals eine neue Registrierungsseite erstellen möchten, den Shortcode des Formulars kopieren , eine neue Seite erstellen, den Shortcode hinzufügen und die Seite veröffentlichen. Ja, es ist so einfach!

Das ist es, Leute! So erstellen Sie ein benutzerdefiniertes WooCommerce-Registrierungsformular! Wenn Sie Ihre WooCommerce-Seite „Mein Konto“ in der Vorschau anzeigen, sollte das Registrierungsformular angezeigt werden.

Jetzt, da Sie das benutzerdefinierte Registrierungsformular haben, fragen sich einige von Ihnen, ob Sie auch ein benutzerdefiniertes Anmeldeformular erstellen können. Der Prozess zum Erstellen eines benutzerdefinierten WooCommerce-Anmeldeformulars ist identisch mit dem Prozess zum Erstellen eines benutzerdefinierten Registrierungsformulars. Wir werden Ihnen die Schritte im nächsten Abschnitt schnell zeigen.

So erstellen Sie ein benutzerdefiniertes WooCommerce-Anmeldeformular

Um ein benutzerdefiniertes WooCommerce-Anmeldeformular zu erstellen, gehen Sie zu ProfilePress > Forms & Profiles > Login > Add New .

Wählen Sie den Drag & Drop-Builder aus . Geben Sie dem Formular einen Namen und wählen Sie dann aus einer der vorgefertigten Vorlagen .

Fügen Sie als Nächstes benutzerdefinierte Felder hinzu und ändern Sie das Erscheinungsbild des Formulars gemäß Ihren Anforderungen.

Um schließlich das standardmäßige WooCommerce-Anmeldeformular durch das neue benutzerdefinierte Formular zu ersetzen, gehen Sie zu ProfilePress > Einstellungen > WooCommerce > Anmeldeformular für mein Konto und wählen Sie das neue Anmeldeformular aus .

Wenn Sie das neue Anmeldeformular zu Ihrem Standard-Anmeldeformular für Ihre gesamte Website machen möchten, gehen Sie zu ProfilePress > Einstellungen > Allgemein > Global . Wählen Sie dann in der Option „Anmeldeseite“ das neue benutzerdefinierte Anmeldeformular aus .

So sieht die benutzerdefinierte Anmeldeseite auf unserer Website aus:

Damit wissen Sie jetzt, wie Sie ein benutzerdefiniertes WooCommerce-Anmeldeformular erstellen.

Wenn Sie sowohl die Standardregistrierungs- als auch die Anmeldeformulare auf der Seite „Mein Konto“ durch benutzerdefinierte Formulare von ProfilePress ersetzen, könnte dies auf Ihrer Website folgendermaßen aussehen.

In jedem WooCommerce-Shop gibt es neben dem Registrierungs- und Anmeldeformular ein weiteres wichtiges Formular, das Besucher häufig verwenden – das Checkout-Formular. Im Folgenden werden wir uns ansehen, warum Sie eine Anpassung des Checkout-Formulars in Betracht ziehen sollten und welche Schritte Sie genau unternehmen müssen.

Hinzufügen von benutzerdefinierten Registrierungsfeldern zur WooCommerce-Kaufabwicklung

Das Hinzufügen benutzerdefinierter Felder zur Checkout-Seite ist eine großartige Möglichkeit, zusätzliche Informationen vom Kunden zu sammeln. Beispielsweise können Sie Kunden ihre Social-Media-Konten hinzufügen lassen, um den Registrierungsprozess zu vereinfachen. Dies trägt dazu bei, ein besseres Kundenerlebnis zu bieten und Ihren Umsatz zu steigern.

Gehen Sie zu WooCommerce > Einstellungen > Konten & Datenschutz und wählen Sie Kunden erlauben, während des Bezahlvorgangs ein Konto zu erstellen .

Gehen Sie als Nächstes zu ProfilePress > Einstellungen > Benutzerdefinierte Felder . Auf dieser Seite sollten ein oder zwei benutzerdefinierte Felder verfügbar sein. Um weitere benutzerdefinierte Felder hinzuzufügen, wählen Sie Neu hinzufügen aus.

ProfilePress unterstützt die folgenden benutzerdefinierten Feldtypen:

• Text
• Passwort
• Email
• Telefon
• Verstecktes Feld
• Anzahl
• Datum
• Land
• Textbereich
• Einzelnes Kontrollkästchen
• Datei-Upload
• Wählen Sie Dropdown aus
• Radio Knöpfe
• Kontrollkästchen

Wenn Sie alle erforderlichen Felder erstellt haben, speichern Sie die Einstellungen und gehen Sie dann zu ProfilePress > Settings > WooCommerce > Checkout Registration Fields . Fügen Sie die soeben erstellten Registrierungsfelder hinzu .

Wenn Sie die Felder zu Pflichtfeldern machen möchten, fügen Sie in den erforderlichen Registrierungsfeldern die Felder hinzu, die Ihrer Meinung nach Pflichtfelder sein sollten.

Vergessen Sie nicht, die Änderungen zu speichern.

Das ist es. Sie haben jetzt ein benutzerdefiniertes Checkout-Registrierungsformular.

Fazit

Das Sammeln von Benutzerinformationen über eine benutzerdefinierte WooCommerce-Registrierung oder ein Formular kann dazu beitragen, Ihren Umsatz zu steigern. WooCommerce bietet keine Optionen zum Hinzufügen von Feldern oder zur Anpassung seiner Formulare, daher benötigen Sie ein Plugin wie ProfilePress, um WooCommerce-Formulare zu ändern.

ProfilePress ist jedoch mehr als nur ein Formularersteller. Es kann Ihnen helfen, Benutzerprofile und Mitgliederverzeichnisse zu verwalten. Es kann Ihnen unter anderem dabei helfen, den Zugriff auf Inhalte auf Ihrer Website einzuschränken. Probieren Sie ProfilePress aus!

Wenn Ihnen unser Leitfaden gefallen hat, finden Sie vielleicht einige unserer anderen WooCommerce-Leitfäden hilfreich. Werfen Sie einen Blick in unseren Blog.