[Gewusst wie] Hinzufügen von Login / Logout-Links für eine verbesserte WooCommerce-Benutzererfahrung

WooCommerce

WooCommerce ist das beliebtestes E-Commerce-Plugin im WordPress-Ökosystem. Es gibt jedoch ein nörgelndes Usability-Problem. Standardmäßig, WooCommerce Zeigt nicht an, ob ein Benutzer bei Ihrer E-Commerce-Website angemeldet ist oder nicht.

Inhalt[Anzahl Artikel]

Fügen Sie dem Woocommerce-Menü einen Woocommerce-Login-Logout-Link hinzu

Manchmal kann dies für Ihre Kunden verwirrend sein. Da die meisten beliebten E-Commerce-Shops (z. B. eBay oder Amazon) in ihrem Menü eine Anmeldeschaltfläche anzeigen, können Kunden dies auch erwarten Ihre E-Commerce-Shops auch.

Im Fall eines von WooCommerce betriebenen Geschäfts muss ein Benutzer jedoch die Seite "Mein Konto" besuchen, um ein Konto zu erstellen oder zu überprüfen, ob er angemeldet ist oder nicht.

woocommerce mein Konto - Abmeldelink

In diesem Tutorial wird erklärt, wie Sie die Login / Logout-Option zum Hauptmenü Ihres WooCommerce hinzufügen Website Geschäft. Dies ist einer der beliebtesten Tipps und Tricks von CollectiveRay.com - also bleiben Sie dran, wenn Sie mehr Tipps und Tricks erfahren möchten!

Erstellen Sie ein oberes Hauptmenü

Schritt 1: Bevor Sie fortfahren, stellen Sie sicher, dass Sie ein Menü als Hauptmenü Ihres Themas hinzugefügt haben. Stellen Sie außerdem sicher, dass Sie eine gemacht haben vollständige WordPress-Sicherung falls etwas schief geht

Wenn Sie kein Menü als Hauptmenü hinzugefügt haben, melden Sie sich bei Ihrem WordPress-Administrator an und gehen Sie zu Darstellung >> Menü. Erstellen Sie unter den Menüeinstellungen ein Menü und aktivieren Sie das Kontrollkästchen "Oberes Hauptmenü".

Woocommerce-Menü

Top Tipp: Wenn Sie mit Codeänderungen nicht zufrieden sind, sollten Sie einen WordPress-Entwickler beauftragen. Klicken Sie hier, um zu erfahren, wie Sie den idealen WordPress-Entwickler einstellen können: https://www.collectiveray.com/wordpress-developers-for-hire

Schritt 2: Fügen Sie den folgenden Code zur Datei functions.php Ihres Themas hinzu.

add_filter ('wp_nav_menu_items', 'add_loginout_link', 10, 2);
Funktion add_loginout_link ($ items, $ args) {
  if (is_user_logged_in () && $ args-> theme_location == 'primary') {
    $ items. = ' Ausloggen ';
  } elseif (! is_user_logged_in () && $ args-> theme_location == 'primary') {
    $ items. = ' Einloggen ';
  } return $ items;
}

AKTUELL: Wir wurden gerade von einem hilfreichen Leser / Kommentator der Website beraten, der sagte, dass wc_get_page_id jetzt anstelle der (jetzt veralteten) woocommerce_get_page_id verwendet werden sollte

Wenn Sie es nicht mögen, Codeänderungen selbst vorzunehmen, können Sie sich einige dieser hoch bewerteten, aber billigen Fiver-Gigs ansehen.

Überprüfen Sie den Woocommerce-Link zum Anmelden / Abmelden

Sobald Sie die Datei functions.php geändert haben, um die Woocommerce-Anmelde- / Abmeldelinks hinzuzufügen, ist es Zeit, das Ergebnis Ihrer Änderungen anzuzeigen. Wenn Sie die Änderungen korrekt vorgenommen haben, wird das folgende Ergebnis angezeigt.

Woocommerce Login / Logout Links

Sie sind fertig! Jetzt können Sie sehen, dass die Option Anmelden / Abmelden im oberen Menü Ihres Geschäfts angezeigt wird. Dieser Trick ist besonders nützlich, wenn Sie ein auf Abonnements basierendes Unternehmen eingerichtet haben, das wir detailliert beschrieben haben hier um Ihren Kundenservice-Helpdesk-Kontakt.

Nachdem wir Ihnen gezeigt haben, wie dies für WooCommerce funktioniert, ist es möglicherweise an der Zeit, dasselbe zu tun und einen WordPress-Abmeldelink zu erstellen. Dies ist häufig der Fall, wenn Sie sich entschieden haben, die Admin-Leiste zu deaktivieren, aber dennoch die Option zum Abmelden wünschen, um auf der sicheren Seite zu sein.

Wenn Sie nur nach einer Möglichkeit suchen, Ihre angemeldeten Sitzungen zu beenden, besuchen Sie einfach Folgendes auf Ihrer Website.

https://<yoursite.com>/wp-login.php?action=logout 

Sie erhalten einen kleinen Bestätigungsbildschirm mit der Frage "Möchten Sie sich wirklich abmelden?". - Sobald Sie auf den Link klicken, werden Sie abgemeldet.

WordPress-Abmeldebildschirm

Wie immer gibt es mehrere Möglichkeiten, dies zu tun. 

Die WordPress-Abmelde-URL können Sie tatsächlich in Ihrem Menü verwenden, wenn Sie eine WordPress-Abmeldeschaltfläche erstellen möchten. Verknüpfen Sie einfach die oben angegebene URL. Auf diese Weise kann Ihr Benutzer natürlich alle aktuellen Sitzungen beenden.

Abmeldemenü

 

Wenn dies aus irgendeinem Grund nicht funktioniert, müssen Sie möglicherweise Ihre functions.php optimieren, um diese Funktionalität zu aktivieren. 

add_filter ('wp_nav_menu_items', 'add_login_logout_link', 10, 2); Funktion add_login_logout_link ($ items, $ args) {ob_start (); wp_loginout ('index.php'); $ loginoutlink = ob_get_contents (); ob_end_clean (); $ items. = ' '. $ loginoutlink. ' '; $ items zurückgeben; }}

 

Hinweis: Diese obige Methode funktioniert und ist aktiviert, wenn Sie benutzerdefinierte WordPress-Menüs verwenden, dh die Menüfunktion, die im Admin-Bereich unter verfügbar ist Aussehen> Menüs.)

WordPress Logout Shortcode

Wie bei den meisten Funktionen gibt es auch hier eine Plugin Damit kann ein WordPress Logout Shortcode generiert werden. Neben den verschiedenen Konfigurationen, die Sie durchführen können, können Sie mit diesem Plugin die folgenden Shortcodes in Ihren Posts und Seiten verwenden.

[Abmelden] - Ein Standard-Link zum Abmelden, über den der Benutzer nach dem Abmelden auf dem Anmeldebildschirm bleibt. [logout_to_home] - Ein Link, der den Benutzer abmeldet und auf Ihre Homepage umleitet. [logout_to_current] - Ein Link, der den Benutzer abmeldet und ihn zurück zur aktuellen Seite / URL leitet.

Das Plugin bietet auch verschiedene Optionen zum Konfigurieren des Erscheinungsbilds und der Texte oder der tatsächlichen Benutzererfahrung.

WooCommerce-Login

Seit der Übernahme von WooCommerce durch Automattic hat WooCommerce immer mehr Funktionen von WordPress.com in WooCommerce integriert. Eine der großen Funktionen war die Möglichkeit, sich über Ihr WordPress.com-Konto bei WooCommerce.com anzumelden

Dies ist jedoch möglicherweise nicht die ideale Situation für Ihre Kunden, die normalerweise jetzt ein WordPress.com-Konto haben, sodass diese Funktionen verwendet werden könnenless für sie.

Wie können Sie also ein Konto-Anmelde- / Abmeldesystem erstellen, mit dem sie vertraut sind? Hier kommt der WooCommerce Social Login ins Spiel!

Woocommerce-Social-Login

Das WooCommerce Social Login ist eine Premium-WooCommerce-Erweiterung, die Social Logins für Seam ermöglichtless Kontoerstellung und Checkouts. Das ist riesig. Denn wussten Sie, dass Kontoregistrierungen ein sehr bedeutendes Hindernis für den Verkauf darstellen? 

Laut Statista können Sie aufgrund dieses Problems des langwierigen Prozesses der Kontoerstellung vor dem Auschecken bis zu 21% Ihrer Kunden verlieren.

Wie können Sie diese Straßensperre abmildern? Hier kommt die WooCommerce Social Login-Erweiterung ins Spiel.

Durch die Installation dieser Erweiterung in Ihrem WooCommerce-Online-Shop können Sie Benutzern ermöglichen, sich mit ihren Facebook-, Twitter-, Google-, Amazon-, LinkedIn-, PayPal-, Disqus-, Yahoo- oder VK-Konten anzumelden, anstatt ein neues Benutzerkonto mit einem neuen Konto erstellen zu müssen Satz von Anmeldeinformationen.

Woocommerce Social Login Checkout

Wenn ein Kunde Ihre Website zum ersten Mal besucht, kann er mit dieser Erweiterung einfach auf die Schaltfläche seines bevorzugten sozialen Netzwerks klicken und im Wesentlichen mit einem einzigen Klick ein Konto auf Ihrer Website erstellen.

Dies verringert die Barriere und Sie haben auch mehr validierte Benutzerkonten, die Sie möglicherweise für verschiedene Arten von Nachrichten verwenden (wenn sie sich anmelden).

 

Warum WooCommerce Social Login verwenden?

  • Sie haben die Möglichkeit, Ihre Kundenkonten mit den beliebtesten sozialen Netzwerken zu synchronisieren
  • Macht Kundenerstellung und Kassennahtless was nicht den langwierigen Prozess der Kontoerstellung und -verifizierung erfordert
  • Reduzieren Sie die Reibung, steigern Sie den Umsatz und wiederholen Sie Einkäufe und reduzieren Sie das Verlassen des Wagens
  • Soziale Anmeldungen sind eine akzeptierte und vertrauenswürdige Möglichkeit, sich bei Websites von Drittanbietern anzumelden

Dies ist eine Prämie, die ihren Preis von nur 79 US-Dollar wert ist. Sie werden das Geld im Gegenzug viele Male zurückverdienen.

Schauen Sie sich WooCommerce Social Login an

 

Alles andere, was Sie über das Abmelden wissen möchten

Gibt es etwas, das Sie wissen möchten und das fehlt, ist dieser Artikel? Wir würden uns über Ihre Kommentare freuen, damit wir diesen Beitrag weiter verbessern können!  

Laden Sie die Liste der 101 WordPress-Tricks herunter, die jeder Blogger kennen sollte

101 WordPress-Tricks

Klicken Sie hier, um jetzt herunterzuladen
Über den Autor
David Attard
Autor: David AttardWebsite: https://www.linkedin.com/in/dattard/
David arbeitet seit 18 Jahren in oder um die Online- / Digitalbranche. Er verfügt über umfangreiche Erfahrung in der Software- und Webdesignbranche mit WordPress, Joomla und den sie umgebenden Nischen. Als digitaler Berater konzentriert er sich darauf, Unternehmen durch die Kombination ihrer Website und der heute verfügbaren digitalen Plattformen einen Wettbewerbsvorteil zu verschaffen.

Eine Sache noch... Wussten Sie, dass Leute, die nützliche Dinge wie diesen Beitrag teilen, auch FANTASTISCH aussehen? ;-);
Bitte kontaktieren Sie uns, wenn lass a nützlich Kommentieren Sie mit Ihren Gedanken und teilen Sie dies dann Ihren Facebook-Gruppen mit, die dies nützlich finden würden, und lassen Sie uns gemeinsam die Vorteile nutzen. Vielen Dank für das Teilen und nett zu sein!

Disclosure: Diese Seite enthält möglicherweise Links zu externen Websites für Produkte, die wir lieben und von ganzem Herzen empfehlen. Wenn Sie Produkte kaufen, die wir vorschlagen, können wir eine Empfehlungsgebühr verdienen. Solche Gebühren haben keinen Einfluss auf unsere Empfehlungen und wir akzeptieren keine Zahlungen für positive Bewertungen.

Autor (en) Empfohlen am:  Inc Magazin Logo   Sitepoint-Logo   CSS Tricks Logo    Webdesignerdepot-Logo   WPMU DEV Logo   und viele mehr ...