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

WooCommerce

WooCommerce er mest populære e-handels plugin i WordPress-økosystemet. Det har dog et lidt irriterende brugervenlighedsproblem. Som standard viser WooCommerce ikke, om en bruger er logget ind eller ej på din e-handelsside.

Indhold[show]

Tilføj et Woocommerce-login-logout-link til Woocommerce-menuen

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.

woocommerce min konto - logout link

I denne vejledning forklarer vi, hvordan du tilføjer mulighed for login / logout til topmenuen i din WooCommerce hjemmeside 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 går videre, skal du sørge for, at du har tilføjet en menu som en primær menu for 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".

woocommerce-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

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.

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.

woocommerce login / logout links

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 link..

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.

WordPress-logoutskærm

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.

Logout-menu

 

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 socialt 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 tillade brugere 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. Brugeren kan så bare klikke på deres foretrukne netværkslogo og logge ind på dit websted ved hjælp af det. I øvrigt, hvis du er interesseret i skabe dit eget brugerdefinerede logo med en gratis app, tjek vores artikel.

woocommerce social login checkout

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!  

IMH

Vil du have en hurtig hjemmeside?

Hvem laver jeg sjov? Gør vi ikke alle sammen?

Så hvorfor kæmper så mange af os?

Den største udfordring er normalt at finde et hurtigt, pålideligt hostingfirma.

Vi har alle været igennem mareridtene - støtte tager evigheder eller løser ikke vores problem altid skylden noget på din side... 

Men den største bummer er, at hjemmesiden altid føles langsom.

At CollectiveRay vi hoster med InMotion hosting og vores hjemmeside er dum hurtig. Vi kører på en brugerdefineret stak af LightSpeed-serveropsætning på MariaDB med en PHP7.4-motor og frontet gennem Cloudflare. 

Kombineret med vores frontend-optimeringer serverer vi pålideligt 6000 brugere hver eneste dag, med peaks på 50+ samtidige brugere. 

Vil du have en hurtig opsætning som vores? Overfør dit websted gratis til InMotion-hosting og få vores 50% rabat på nuværende priser.

Prøv InMotion Hosting med 50 % rabat for CollectiveRay KUN besøgende i marts 2024!

InMotion hosting 50% RABAT for CollectiveRay besøgende

Om forfatteren
David Attard
David har arbejdet i eller omkring online- og digitalindustrien i de sidste 21 år. Han har stor erfaring i software- og webdesignindustrien ved at bruge WordPress, Joomla og nicher omkring dem. Han har arbejdet med softwareudviklingsbureauer, internationale softwarevirksomheder, lokale marketingbureauer og er nu Head of Marketing Operations hos Aphex Media - et SEO-bureau. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencefordel ved at bruge en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag. Hans blanding af teknologisk ekspertise kombineret med et stærkt forretningssans giver hans forfatterskab en konkurrencefordel.

En ting mere... Vidste du, at folk, der deler nyttige ting som dette indlæg, også ser FANTASTISKE ud? ;-)
Vær venlig at forlade a nyttigt kommenter med dine tanker, så del dette på din Facebook-gruppe (r), der ville finde det nyttigt, og lad os høste fordelene sammen. Tak fordi du delte og var god!

Afsløring: Denne side kan indeholde links til eksterne websteder for produkter, som vi elsker og helhjertet anbefaler. Hvis du køber produkter, vi foreslår, tjener vi muligvis et henvisningsgebyr. Sådanne gebyrer påvirker ikke vores anbefalinger, og vi accepterer ikke betalinger for positive anmeldelser.

Forfatter (e) Fremhævet den:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot logo   WPMU DEV-logo   og mange flere ...