So fügst du WordPress Social Login zu WooCommerce hinzu

Veröffentlicht: 2022-04-18

Suchen Sie nach einer Möglichkeit, Ihren Social-Media-Followern die Möglichkeit zu geben, sich einfach auf Ihrer WooCommerce-Site anzumelden? Erwägen Sie das Hinzufügen von WordPress-Social-Login zu Ihrer Website.

Indem Sie Social Login zu WooCommerce hinzufügen, bieten Sie Website-Besuchern eine schnelle Möglichkeit, sich mit ihren Social-Media-Kontoanmeldeinformationen anzumelden.

Das einzige Problem ist jedoch, dass WooCommerce standardmäßig keine Social-Login-Option für Ihre E-Commerce-Site anbietet. Sie können Website-Besuchern nur ein einfaches Anmelde- und Registrierungsformular anbieten, das sie auffordert, ein neues Konto mit neuen Anmeldeinformationen zu erstellen.

Die gute Nachricht ist, dass Sie mit einem Plugin wie ProfilePress ein benutzerdefiniertes Anmelde- und Registrierungsformular auf Ihrer WooCommerce-Website erstellen können.

In diesem Artikel zeigen wir Ihnen, wie Sie dem WooCommerce-Anmeldeformular soziale Schaltflächen hinzufügen und die standardmäßige WooCommerce-Schaltfläche durch die benutzerdefinierten ProfilePress-Schaltflächen ersetzen können.

Warum sollten Sie Social Login zu WooCommerce hinzufügen?

Als Besitzer eines Online-Shops wissen Sie wahrscheinlich bereits, dass WooCommerce standardmäßig eingeschränkte Optionen für Website-Besucher bietet, sich auf Ihrer Website anzumelden.

Alle Website-Besucher müssen sich zunächst auf Ihrer Website mit einem eindeutigen Benutzernamen und ihrer E-Mail-Adresse registrieren, bevor sie auf die Inhalte zugreifen können. Die Standard-Anmeldeformulare sehen nicht nur einfach aus, sondern bieten Benutzern auch eingeschränkte Möglichkeiten, sich schnell zu registrieren und sich auf Ihrer WooCommerce-Site anzumelden.

Die standardmäßigen WooCommerce-Formulare sind nicht dafür ausgelegt, dass sich Ihre Benutzer über ihre Social-Media-Konten auf Ihrer Website anmelden können. Da viele Menschen Social-Media-Konten auf Plattformen wie Facebook, Twitter oder Google haben, ist es einfacher, diese Kontodaten zu verwenden, um sich bei Ihrem Geschäft anzumelden.

Hier sind einige weitere Gründe, warum das Hinzufügen eines sozialen Logins zu Ihrer WooCommerce-Site nützlich ist:

  • Erlauben Sie allen Arten von Benutzern, sich auf Ihrer Website zu registrieren und anzumelden. Da die meisten Menschen bereits über Social-Media-Konten verfügen, können Sie Ihre WooCommerce-Website für alle Arten von Benutzern viel zugänglicher und einladender gestalten. Benutzer, die bereits ein registriertes Facebook-Konto haben, können sich mit wenigen Klicks einfach registrieren und auf Ihrer Website anmelden.
  • Bieten Sie eine freundliche Benutzererfahrung. Das Anbieten einer freundlichen Benutzererfahrung auf Ihrer WooCommerce-Website ermutigt die Menschen, mehr Einkäufe zu tätigen, und verbessert die Kundenbindung. Denken Sie darüber nach: Wenn es für Kunden einfach ist, sich auf Ihrer WooCommerce-Website anzumelden und ihre Bestellungen aufzugeben, besteht eine höhere Wahrscheinlichkeit, dass dieselben Kunden das nächste Mal zu Ihrem Online-Shop zurückkehren.
  • Ermutigen Sie mehr Menschen, sich zu registrieren. Indem Sie eine einfache Registrierung und Anmeldung mit einem Klick anbieten, ermutigen Sie mehr Menschen, sich auf Ihrer WooCommerce-Website zu registrieren. Dies ist eine großartige Möglichkeit, Ihre E-Mail-Listen aufzubauen und Ihre E-Mail-Marketingkampagnen zu verbessern.
  • Konvertieren Sie Ihre Social-Media-Follower in registrierte Benutzer auf Ihrer Website. Wenn Ihr Unternehmen eine große Fangemeinde auf Social-Media-Plattformen hat, könnte es eine gute Idee sein, die gesamte Aufmerksamkeit auf Ihre WooCommerce-Site zu lenken. Sie können dies tun, indem Sie auf Ihrer WooCommerce-Site Social-Login-Buttons anbieten, damit Ihr Publikum leichter auf Ihre WooCommerce-Site zugreifen kann.

Der einfachste Weg, ein soziales Login zum Standard-WooCommerce hinzuzufügen

Während es viele Plugins gibt, die Sie verwenden können, um Social-Login-Buttons auf Ihrer WooCommerce-Site hinzuzufügen, ist ProfilePress die einzige Lösung, die heraussticht.

ProfilePress ist ein professionelles Benutzerprofil- und Mitgliedschafts-Plugin, das mit leistungsstarken Formularerstellern und erweiterten Anpassungen ausgestattet ist.

Sie können attraktiv aussehende benutzerdefinierte Formulare für die Standard-Anmelde- und Registrierungsseiten von WooCommerce erstellen, ohne eine einzige Codezeile schreiben zu müssen. Darüber hinaus können Sie auch Mitgliederverzeichnisse erstellen und alle Ihre registrierten Mitglieder im Frontend Ihrer WooCommerce-Site präsentieren. Das Beste an ProfilePress ist, dass Sie die vorgefertigten Vorlagen verwenden können, um schnell benutzerdefinierte Formulare zu erstellen und sie dann nach Ihren Bedürfnissen zu personalisieren.

Mit dem ProfilePress-Plugin können Sie Social-Login-Schaltflächen zu einem benutzerdefinierten ProfilePress-Anmeldeformular hinzufügen und es durch das standardmäßige WooCommerce-Registrierungs- und Anmeldeformular auf der Seite „Mein Konto“ ersetzen.

Hinzufügen eines sozialen Logins zu WooCommerce mit ProfilePress

Hier zeigen wir Ihnen, wie einfach es ist, mit ProfilePress ein soziales Login zu WooCommerce hinzuzufügen.

Für dieses Tutorial muss das WooCommerce-Plugin auf Ihrer WordPress-Site installiert sein. Sie benötigen auch das ProfilePress-Plugin, um benutzerdefinierte Anmeldeformulare mit sozialen Anmeldeschaltflächen auf Ihrer WooCommerce-Website hinzuzufügen.

Schritt #1: Installieren und aktivieren Sie ProfilePress

Holen Sie sich zunächst das ProfilePress-Plugin und installieren Sie es auf Ihrer WordPress-Seite.

Navigieren Sie im WordPress-Adminbereich zu Plugins → Neu hinzufügen und klicken Sie auf die Schaltfläche Neu hinzufügen. Laden Sie nun die ZIP-Datei hoch und fahren Sie mit der Installation des Plugins auf Ihrer WooCommerce-Site fort.

Schritt Nr. 2: Erstellen Sie ein benutzerdefiniertes Anmeldeformular

Wenn das ProfilePress-Plugin einsatzbereit ist, können Sie damit beginnen, ein benutzerdefiniertes Anmeldeformular mit hinzugefügten Schaltflächen für soziale Medien zu erstellen. Stellen Sie sicher, dass Sie zuerst das Social Login -Add-on aktivieren, indem Sie zum Bildschirm ProfilePress → Addons navigieren.

Sobald dies erledigt ist, gehen Sie zu ProfilePress → Formulare & Profile und klicken Sie auf die Schaltfläche Neu hinzufügen.

Wählen Sie den Drag & Drop Builder aus und geben Sie Ihrem individuellen Anmeldeformular einen neuen Titel. Wählen Sie nun eine Vorlage aus, um mit der Bearbeitung des Anmeldeformulars zu beginnen. Wir haben die Bash- Vorlage zur Demonstration ausgewählt.

Sobald Sie auf die Schaltfläche Vorlage auswählen klicken, werden Sie automatisch zur Formularbearbeitungsseite weitergeleitet, auf der Sie zusätzliche Felder sowie die Anmeldeschaltflächen für soziale Medien hinzufügen können.

Schritt Nr. 3: Fügen Sie Social-Login-Buttons hinzu

Auf dieser Seite können Sie mehrere Anmeldeschaltflächen für soziale Netzwerke hinzufügen und per Drag-and-Drop zusätzliche Felder zu Ihrem Anmeldeformular hinzufügen oder daraus entfernen.

Sie können auch jedes Feld bearbeiten und den Feldtext anpassen, der im Frontend Ihrer WooCommerce-Site angezeigt wird.

Klicken Sie einfach auf das Einstellungssymbol, während Sie mit der Maus über das Feld fahren, und klicken Sie auf die Schaltfläche Änderungen übernehmen, wenn Sie fertig sind. Sobald Sie mit dem Anpassen der Felder fertig sind, können Sie das Metafeld „Formulareinstellungen“ verwenden, um Anmeldeschaltflächen für soziale Medien zu Ihrem Anmeldeformular hinzuzufügen.

Fügen Sie auf der Registerkarte „Darstellung“ mithilfe des Textfelds Social Login Buttons Social-Media-Konten hinzu. Sie können auch den Schaltflächentext für Senden-Schaltflächen und Textfeld-Platzhalter für Ihr benutzerdefiniertes Anmeldeformular anpassen.

Wenn Sie fertig sind, stellen Sie sicher, dass Sie auf die Schaltfläche Änderungen anwenden klicken, um fortzufahren.

Schritt #4: Ersetzen Sie das Standard-WooCommerce-Anmeldeformular

Kopieren Sie den Shortcode des benutzerdefinierten Anmeldeformulars und navigieren Sie zu Seiten → Neu hinzufügen , um eine neue soziale Anmeldeseite auf Ihrer WooCommerce-Website zu erstellen.

Fügen Sie einfach den Shortcode des Anmeldeformulars mit dem Shortcode- Block ein und klicken Sie auf die Schaltfläche „ Veröffentlichen “, um fortzufahren. Jetzt müssen Sie nur noch das eigentliche soziale Login in den Einstellungen konfigurieren und das standardmäßige WooCommerce-Login-Formular durch das gerade erstellte ersetzen.

Um die von uns erstellte Seite global als standardmäßige WordPress-Anmeldeseite auf unserer Website festzulegen, navigieren Sie zu ProfilePress → Einstellungen und wählen Sie die neu erstellte Anmeldeseite über das Dropdown-Menü Anmeldeseite auf der Registerkarte Globale Einstellungen aus.

Um den eigentlichen Social Login-Prozess einzurichten, navigieren Sie zu ProfilePress → Einstellungen und klicken Sie auf die Registerkarte Social Login , um die Social Login-Einstellungen festzulegen.

Hier können Sie API-Schlüssel für alle Social-Media-Konten eingeben, damit sich die verschiedenen Social-Apps nahtlos in die Social-Login-Formulare von ProfilePress integrieren lassen. Nachdem Sie die API-Schlüssel für Social-Media-Plattformen eingegeben haben, klicken Sie auf die Schaltfläche Änderungen speichern .

Darüber hinaus können Sie auch den Schaltflächentext auf den Social-Login-Schaltflächen ändern, indem Sie zur Registerkarte Schaltflächen gehen.

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

Um die standardmäßigen Registrierungs- und Anmeldeformulare zu ersetzen, die auf der Seite „Mein Konto“ von WooCommerce angezeigt werden; Klicken Sie auf die Registerkarte WooCommerce und wählen Sie Ihre neu erstellte Social-Login-Seite mithilfe der Dropdown-Felder Mein Konto-Anmeldeformular und Mein Konto-Registrierungsformular aus.

So könnte es je nach ausgewähltem Formularthema auf Ihrer WooCommerce-Seite „Mein Konto“ aussehen.

Sie können auch das standardmäßige WooCommerce-Anmeldeformular an der Kasse durch ein ProfilePress-Anmeldeformular mit sozialem Login ersetzen. Wählen Sie dazu einfach die Login-Seite aus, die das Login-Formular mit Social Logins enthält, die wir zuvor erstellt haben, indem Sie das Dropdown-Menü Checkout-Login-Formular verwenden.

Klicken Sie auf die Schaltfläche Änderungen speichern , um fortzufahren.

Durch Klicken auf die Social-Login-Schaltflächen werden Benutzer auf die Login-Authentifizierungsseite umgeleitet.

Kunden können sich auch über ihre Social-Media-Konten auf der WooCommerce-Checkout-Seite anmelden.

Fazit

Das Hinzufügen von Social-Login-Schaltflächen zu Ihrer WooCommerce-Website ist eine großartige Möglichkeit, mehr Registrierungen zu fördern und die Benutzererfahrung auf Ihrer Website zu verbessern. Dies ist besonders nützlich für Unternehmen, die bereits eine große Fangemeinde auf ihren Social-Media-Konten haben.

Sie sind jedoch durch die standardmäßige WooCommerce-Funktionalität eingeschränkt, wenn es darum geht, Social Login auf Ihrer Website anzubieten. Aus diesem Grund empfehlen wir die Verwendung eines speziellen benutzerdefinierten Formularerstellungs-Plugins wie ProfilePress, um das standardmäßige, generisch aussehende Anmeldeformular auf Ihrer WooCommerce-Website zu ersetzen.

Suchen Sie nach einer einfachen Möglichkeit, Social Login zu Ihrer WooCommerce-Site hinzuzufügen? Holen Sie sich noch heute ProfilePress!