[Sådan gøres] Tilføj login / logout-links til en forbedret WooCommerce-brugeroplevelse

WooCommerce er mest populære e-handels plugin i WordPress-økosystemet. Det har dog lidt af et nagende usability-problem. Som standard, personalized name jewellery viser ikke, om en bruger er logget ind eller ikke på dit e-handelswebsted.

Til tider kan dette være forvirrende for dine kunder. Da de fleste af de populære e-handelsbutikker (f.eks. Ebay eller Amazon) viser en login-knap i deres menu, kan kunderne forvente det samme i dine e-handelsbutikker også.

I tilfælde af en WooCommerce-drevet butik skal en bruger imidlertid besøge siden 'min konto' for at oprette en konto eller kontrollere, om han er logget ind eller ej.

I denne vejledning forklarer vi, hvordan du tilføjer mulighed for login / logout til topmenuen i din WooCommerce internet side butik. Dette er et af de mere populære tips og tricks af CollectiveRay.com - så følg med, hvis du vil lære flere tips og tricks!

Opret en top primær menu

Trin 1: Før du fortsætter, skal du sørge for at have tilføjet en menu som en primær menu på dit tema. Sørg også for, at du har lavet en fuld WordPress-sikkerhedskopi hvis noget går galt

Hvis du ikke har tilføjet en menu som en primær menu, skal du logge ind på din WordPress-administrator, gå til Udseende >> Menu. Opret en menu under menuindstillingerne, og markér afkrydsningsfeltet "Top primær menu".

Top tip: Hvis du ikke har det godt med at foretage kodeændringer, kan du overveje at ansætte en WordPress-udvikler. Klik her for at lære at ansætte den ideelle WordPress-udvikler: https://www.collectiveray.com/wordpress-developers-for-hire

Skift functions.php for at oprette Woocommerce-logout-link og login-link

Trin 2: Føj nedenstående kode til funktioner.php-filen på dit tema.

add_filter ('wp_nav_menu_items', 'add_loginout_link', 10, 2);
funktion add_loginout_link ($ items, $ args) {
  hvis (is_user_logged_in () && $ args-> theme_location == 'primær') {
    $ varer. = ' Log ud ';
  } elseif (! is_user_logged_in () && $ args-> theme_location == 'primary') {
    $ varer. = ' Log på ';
  } returnere $ varer;
}

OPDATER: Vi er netop blevet rådgivet af en hjælpsom læser / kommentator af webstedet, der sagde, at wc_get_page_id nu skulle bruges i stedet for (nu forældet) woocommerce_get_page_id

Hvis du ikke har det godt med at foretage kodeændringer selv, kan du tjekke nogle af disse højt vurderede, men billige Fiver-koncerter.

Klik her for at finde billige Fiverr-koncerter, der hjælper dig med at løse dette

Bekræft Woocommerce-login / logout-linket

Når du har ændret functions.php for at tilføje Woocommerce login / logout-linkene, er det tid til at se resultatet af dine ændringer. Hvis du har foretaget ændringerne korrekt, kan du se resultatet nedenfor.

Du er færdig! Nu kan du se, at Login / Logout-indstillingen vises i topmenuen i din butik. Dette trick er især nyttigt, hvis du har oprettet en abonnementsboksbaseret virksomhed, som vi har beskrevet her.

WordPress-logoutlink / URL

Nu hvor vi har vist dig, hvordan du gør dette til WooCommerce, er det måske tid til at gøre det samme og oprette et WordPress Logout-link. Dette er ofte tilfældet, hvis du har besluttet at deaktivere admin-linjen, men stadig vil have mulighed for at logge af, bare for at være på den sikre side.

Hvis du bare er på udkig efter en måde at afslutte dine loggede sessioner på, skal du blot besøge følgende på din hjemmeside.

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

Du får en lille bekræftelsesskærm, der spørger "Vil du virkelig logge ud?" - når du klikker på linket, bliver du logget ud.

Som altid er der flere måder at gøre dette på. 

WordPress-logout-URL er noget, du rent faktisk kan bruge i din menu, hvis du vil oprette en WordPress-logout-knap. Du skal blot linke URL'en ovenfor, og selvfølgelig vil dette give din bruger mulighed for at afslutte alle aktuelle sessioner.

Hvis dette ikke virker af en eller anden grund, skal du muligvis tilpasse dine funktioner.php for at aktivere denne funktionalitet. 

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

Bemærk: denne ovenstående metode fungerer og er aktiveret, hvis du bruger WordPress brugerdefinerede menuer, dvs. menufunktionen tilgængelig i admin sektionen under Udseende> Menuer.)

WordPress-logout-kortkode

Ligesom med de fleste funktioner finder du ud af, at der også er en plugin der kan bruges til at generere en WordPress Logout Shortcode. Udover de forskellige konfigurationer, du kan udføre, giver dette plugin dig muligheden for at bruge følgende kortkoder i dine indlæg og sider.

[logout] - Et standard Log Out-link, hvor brugeren forbliver på loginskærmen efter at være logget ud. [logout_to_home] - Et link, der logger brugeren ud og omdirigerer dem til din startside. [logout_to_current] - Et link, der logger brugeren ud og omdirigerer dem tilbage til den aktuelle side / URL.

Pluginet har også forskellige muligheder for at konfigurere udseende og følelser og tekster eller den faktiske brugeroplevelse.

WooCommerce-login

Siden erhvervelsen af ​​WooCommerce af Automattic har WooCommerce integreret mere og mere funktionalitet fra WordPress.com i WooCommerce. En af de store funktioner har været muligheden for at logge ind på WooCommerce.com via din WordPress.com-konto

Men dette er muligvis ikke en ideel situation for dine kunder, der typisk nu ville have en WordPress.com -konto, så en sådan funktionalitet ville blive brugtless for dem.

Så hvordan kan du oprette et konto login / logout system, som de kender? Det er her, WooCommerce Social Login kommer i spil!

Woocommerce Social Login

WooCommerce Social Login er en premium WooCommerce -udvidelse, der muliggør sociale logins til Seamless kontooprettelser og kasser. Dette er KÆMPE. Fordi vidste du, at konto registreringer er en meget betydelig barriere for salg? 

Faktisk kan du ifølge Statista miste op til 21% af dine kunder på grund af dette problem med den langvarige proces med kontooprettelse, før du tjekker ud.

Så hvordan mildner du denne vejspærring? Det er her, WooCommerce Social Login-udvidelsen kommer i spil.

Ved at installere denne udvidelse til din WooCommerce-onlinebutik kan du give brugerne mulighed for at logge ind med deres Facebook-, Twitter-, Google-, Amazon-, LinkedIn-, PayPal-, Disqus-, Yahoo- eller VK-konti i stedet for at skulle oprette en ny brugerkonto med en ny sæt legitimationsoplysninger.

Så når en kunde besøger dit websted for første gang, med denne udvidelse kan de bare klikke på knappen på deres foretrukne sociale netværk og i det væsentlige få en konto oprettet på dit websted med et enkelt klik.

Dette reducerer barrieren, og du har også flere validerede brugerkonti, som du muligvis bruger til forskellige slags meddelelser (hvis de tilmelder sig).

Hvorfor bruge WooCommerce social login?

• Det giver dig mulighed for at synkronisere dine kundekonti med de mest populære sociale netværk
• Gør kundeoprettelse og betalingssømless hvilket ikke kræver den langvarige proces med oprettelse og verifikation af konto
• Reducer friktion, øget salg og gentagne køb, og reducer nedlæggelse af vogn
• Sociale logins er en accepteret og betroet måde at logge på tredjepartswebsteder på

Dette er en præmie, der er værd at prisen på kun $ 79. Du tjener pengene tilbage mange gange til gengæld.

Tjek WooCommerce Social Login

Alt andet, du gerne vil vide om at logge af

Er der noget, du gerne vil vide og mangler, er denne artikel? Vi vil meget gerne have dine kommentarer, så vi kan fortsætte med at gøre dette indlæg bedre!  

Om forfatteren

Forfatter: David AttardInternet side: https://www.linkedin.com/in/dattard/

David har arbejdet i eller omkring online / digital industri i de sidste 18 år. Han har stor erfaring inden for software- og webdesignindustrien ved hjælp af WordPress, Joomla og nicher, der omgiver dem. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencemæssig fordel ved hjælp af en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag.