[Hur] Lägg till inloggnings- / utloggningslänkar för en förbättrad WooCommerce-användarupplevelse

WooCommerce

WooCommerce är mest populära e-handelsplugin i WordPress-ekosystemet. Det har dock lite av en gnagande användbarhetsproblem. Som standard, WooCommerce visar inte om en användare är inloggad eller inte på din e-handelswebbplats.

Innehåll[Show]

Lägg till en inloggningslänk för Woocommerce-inloggning till Woocommerce-menyn

Ibland kan detta vara förvirrande för dina kunder. Eftersom de flesta av de populära e-handelsbutikerna (säg ebay eller Amazon) visar en inloggningsknapp i sin meny kan kunder förvänta sig samma i dina e-handelsbutiker också.

I fallet med en WooCommerce-driven butik måste en användare besöka sidan "mitt konto" för att skapa ett konto eller kontrollera om han är inloggad eller inte.

woocommerce mitt konto - utloggningslänk

I den här handledningen förklarar vi hur du lägger till inloggnings- / utloggningsalternativ till toppmenyn i din WooCommerce hemsida Lagra. Detta är ett av de mer populära tipsen och tricksna av CollectiveRay.com - så håll utkik om du vill lära dig fler tips och tricks!

Skapa en primär meny

Steg 1: Innan du fortsätter, se till att du har lagt till en meny som huvudmeny för ditt tema. Se också till att du har gjort en fullständig WordPress-säkerhetskopia om något går fel

Om du inte har lagt till en meny som huvudmeny, logga in på din WordPress-administratör, gå till Utseende >> Meny. Under menyinställningarna skapar du en meny och markerar rutan "Huvudhuvudmeny".

Woocommerce-menyn

Toppspets: Om du inte är bekväm med att ändra kod kan du överväga att anställa en WordPress-utvecklare. Klicka här för att lära dig hur du anställer den perfekta WordPress-utvecklaren: https://www.collectiveray.com/wordpress-developers-for-hire

Steg 2: Lägg till koden nedan i funktions.php-filen för ditt tema.

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') {
    $ artiklar. = ' Logga ut ';
  } elseif (! is_user_logged_in () && $ args-> theme_location == 'primary') {
    $ artiklar. = ' Logga in ';
  } returnera $ artiklar;
}

UPPDATERING: Vi har just fått råd av en hjälpsam läsare / kommentator på webbplatsen som sa att wc_get_page_id nu ska användas istället för (nu utfasad) woocommerce_get_page_id

Om du inte är bekväm med att göra kodändringar själv kan du kolla in några av dessa högt rankade men billiga Fiver-spelningar.

Verifiera Woocommerce-inloggnings- / utloggningslänken

När du har ändrat functions.php för att lägga till inloggnings- / utloggningslänkarna till Woocommerce är det dags att se resultatet av dina ändringar. Om du har gjort ändringarna korrekt ser du resultatet nedan.

Woocommerce-inloggnings- / utloggningslänkar

Du är klar! Nu kan du se att inloggnings- / utloggningsalternativet visas i toppmenyn i din butik. Detta trick är särskilt användbart om du har skapat en prenumerationsbaserad verksamhet som vi har beskrivit här.

Nu när vi har visat dig hur du gör detta för WooCommerce, kanske det är dags att göra samma sak och skapa en WordPress-utloggningslänk. Detta är ofta fallet om du har beslutat att inaktivera administratörsfältet men ändå vill ha alternativet att logga ut, bara för att vara på den säkra sidan.

Om du bara letar efter ett sätt att avsluta dina inloggade sessioner, besök bara följande på din webbplats.

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

Du får en liten bekräftelseskärm där du frågar "Vill du verkligen logga ut?" - när du klickar på länken kommer du att loggas ut.

WordPress-utloggningsskärm

Som alltid finns det flera sätt att göra detta. 

WordPress-utloggnings-URL: en är något du faktiskt kan använda i din meny om du vill skapa en WordPress-utloggningsknapp. Länk bara webbadressen ovan, så kommer det naturligtvis att din användare kan avsluta alla pågående sessioner.

Logout-menyn

 

Om detta inte fungerar av någon anledning kan du behöva justera dina funktioner.php för att aktivera den här funktionen. 

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 (); $ artiklar. = ' '. $ loginoutlink. ' '; returnera $ artiklar; }

 

Notera: den här metoden ovan fungerar och är aktiverad om du använder WordPress anpassade menyer, dvs menyfunktionen tillgänglig i administratörssektionen under Utseende> Menyer.)

WordPress-utloggningskort

Precis som med de flesta funktioner hittar du att det också finns en plugin som kan användas för att generera en WordPress Logout Shortcode. Förutom de olika konfigurationerna du kan utföra ger detta plugin dig möjligheten att använda följande kortkoder i dina inlägg och sidor.

[logout] - En standardlänk för utloggning, där användaren stannar på inloggningsskärmen efter att ha loggats ut. [logout_to_home] - En länk som loggar ut användaren och omdirigerar dem till din startsida. [logout_to_current] - En länk som loggar ut användaren och omdirigerar dem tillbaka till aktuell sida / URL.

Plugin har också olika alternativ för att konfigurera utseende och känsla och texter, eller den faktiska användarupplevelsen.

WooCommerce-inloggning

Sedan förvärvet av WooCommerce av Automattic har WooCommerce integrerat mer och mer funktionalitet från WordPress.com i WooCommerce. En av de stora funktionerna har varit möjligheten att logga in på WooCommerce.com via ditt WordPress.com-konto

Men det här kanske inte är en idealisk situation för dina kunder som vanligtvis nu skulle ha ett WordPress.com -konto, så sådan funktion skulle användasless för dem.

Så hur kan du skapa ett kontoinloggnings- / utloggningssystem som de är bekanta med? Det är här WooCommerce Social Login spelar in!

Woocommerce social inloggning

WooCommerce Social Login är en premium WooCommerce -tillägg som möjliggör sociala inloggningar för Seamless kontoskapelser och kassor. Det här är STORT. För visste du att kontoregistreringar är ett mycket betydande hinder för försäljning? 

I själva verket kan du enligt Statista förlora upp till 21% av dina kunder på grund av detta problem med den långvariga processen med att skapa konto innan du checkar ut.

Så hur mildrar du den här spärren? Det är här WooCommerce Social Login-tillägget spelar in.

Genom att installera den här tillägget i din WooCommerce-onlinebutik kan du tillåta användare att logga in med sina Facebook-, Twitter-, Google-, Amazon-, LinkedIn-, PayPal-, Disqus-, Yahoo- eller VK-konton istället för att behöva skapa ett nytt användarkonto med ett nytt uppsättning referenser.

Woocommerce social inloggningskassa

Så när en kund besöker din webbplats för första gången, med den här förlängningen kan de bara klicka på knappen för sitt favoritnätverk och i princip få ett konto skapat på din webbplats med ett enda klick.

Detta minskar barriären och du har också mer validerade användarkonton som du eventuellt kan använda för olika typer av meddelanden (om de väljer in).

 

Varför använda WooCommerce social inloggning?

  • Det ger dig möjlighet att synkronisera dina kundkonton med de mest populära sociala nätverken
  • Gör kundskapande och kassasömless vilket inte kräver den långvariga processen för att skapa och verifiera konton
  • Minska friktionen, öka försäljningen och upprepa inköp och minska övergivningen av kundvagnen
  • Sociala inloggningar är ett accepterat och pålitligt sätt att logga in på webbplatser från tredje part

Detta är en premie som är väl värt sitt pris på bara $ 79. Du kommer att tjäna tillbaka pengarna många gånger i gengäld.

Kolla in WooCommerce Social Login

 

Allt annat du vill veta om att logga ut

Finns det något som du vill veta och saknas är den här artikeln? Vi skulle gärna få dina kommentarer så att vi kan fortsätta göra det här inlägget bättre!  

Ladda ner listan över 101 WordPress-trick som alla bloggare borde veta

101 WordPress-tricks

Klicka här för att ladda ner nu
Om författaren
David Attard
Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/
David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...