[Hoe] Aanmeld-/afmeldlinks toevoegen voor een verbeterde WooCommerce-gebruikerservaring

WooCommerce is de meest populaire e-commerce plugin in het WordPress-ecosysteem. Het heeft echter een vervelend probleem met de bruikbaarheid. WooCommerce laat standaard niet zien of een gebruiker is ingelogd op je e-commercesite.

Soms kan dit verwarrend zijn voor uw klanten. Aangezien de meeste populaire webwinkels (zoals eBay of Amazon) een inlogknop in hun menu hebben, verwachten klanten mogelijk hetzelfde in hun winkel. uw e-commerce winkels ook.

Bij een WooCommerce-winkel moet een gebruiker echter naar de pagina 'Mijn account' gaan om een ​​account aan te maken en te controleren of hij wel is ingelogd.

In deze tutorial leggen we uit hoe je de optie Inloggen/Uitloggen toevoegt aan het bovenste menu van je WooCommerce website winkel. Dit is een van de populairste tips en trucs van CollectiveRay.com - blijf op de hoogte als je meer tips en trucs wilt weten!

Maak een primair hoofdmenu

Stap 1: Voordat je verdergaat, zorg ervoor dat je een menu hebt toegevoegd als primair menu van je thema. Zorg er ook voor dat je een volledige WordPress-back-up hebt gemaakt voor het geval er iets misgaat.

Als je nog geen menu als primair menu hebt toegevoegd, log dan in op je WordPress-beheer en ga naar Weergave >> Menu. Maak onder Menu-instellingen een menu aan en vink het vakje 'Bovenste primaire menu' aan.

Top Tip: Als je je niet op je gemak voelt bij het aanbrengen van codewijzigingen, kun je overwegen een WordPress-ontwikkelaar in te huren. Klik hier om te leren hoe je de ideale WordPress-ontwikkelaar inhuurt: https://www.collectiveray.com/wordpress-developers-for-hire

Wijzig de functies.php om een ​​Woocommerce-uitloglink en inloglink te maken

Stap 2: Voeg de onderstaande code toe aan het bestand functions.php van uw thema.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
functie add_loginout_link( $items, $args ) {
  als (is_user_logged_in() && $args->theme_location == 'primair') {
    $items .= ' Uitloggen ';
  } elseif (!is_user_logged_in() && $args->theme_location == 'primair') {
    $items .= ' Inloggen ';
  } retourneer $items;
}

UPDATE:We zijn zojuist door een behulpzame lezer/commentator van de website geadviseerd dat wc_get_page_id nu gebruikt zou moeten worden in plaats van de (nu verouderde) woocommerce_get_page_id

Als je het niet prettig vindt om zelf wijzigingen in de code aan te brengen, kun je eens kijken naar een van deze goed beoordeelde, maar goedkope klusjes op Fiver.

Klik hier om goedkope Fiverr-optredens te vinden die u kunnen helpen dit probleem op te lossen

Controleer de Woocommerce login/logout link

Nadat je de functies.php hebt aangepast om de Woocommerce in- en uitloglinks toe te voegen, is het tijd om het resultaat van je wijzigingen te bekijken. Als je de wijzigingen correct hebt doorgevoerd, zie je het onderstaande resultaat.

Klaar! Nu zie je dat de optie Inloggen/Uitloggen wordt weergegeven in het bovenste menu van je winkel. Deze truc is vooral handig als je een abonnementenbox hebt opgezet, zoals we eerder hebben uitgelegd. hier.

WordPress-uitloglink/URL

Nu we je hebben laten zien hoe je dit voor WooCommerce kunt doen, is het misschien tijd om hetzelfde te doen en een WordPress-uitloglink te maken. Dit is vaak het geval als je hebt besloten de admin-balk uit te schakelen, maar toch de mogelijkheid wilt hebben om uit te loggen, voor de zekerheid.

Als u alleen op zoek bent naar een manier om uw ingelogde sessies te beëindigen, gaat u naar het volgende adres op uw website.

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

Er verschijnt een klein bevestigingsscherm met de vraag: "Wilt u zich echt afmelden?". Zodra u op de link klikt, wordt u afgemeld.

Zoals altijd zijn er meerdere manieren om dit te doen. 

De WordPress-URL voor uitloggen kun je gebruiken in je menu als je een WordPress-uitlogknop wilt maken. Koppel de URL hierboven en je gebruiker kan hiermee natuurlijk alle huidige sessies beëindigen.

Als dit om een ​​of andere reden niet werkt, moet u mogelijk uw functies.php aanpassen om deze functionaliteit in te schakelen. 

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

Opmerking: Deze bovenstaande methode werkt en is ingeschakeld als u aangepaste WordPress-menu's gebruikt, d.w.z. de menufunctie die beschikbaar is in het beheerdersgedeelte onder Uiterlijk> Menu's.)

WordPress-uitlogshortcode

Net als bij de meeste functies zul je merken dat er ook een inpluggen die gebruikt kan worden om een ​​WordPress-shortcode voor uitloggen te genereren. Naast de verschillende configuraties die je kunt uitvoeren, biedt deze plugin je de mogelijkheid om de volgende shortcodes in je berichten en pagina's te gebruiken.

[logout] - Een standaardlink om af te melden, waarmee de gebruiker op het inlogscherm blijft nadat hij is afgemeld. [logout_to_home] - Een link waarmee de gebruiker wordt afgemeld en doorgestuurd naar uw startpagina. [logout_to_current] - Een link waarmee de gebruiker wordt afgemeld en teruggestuurd naar de huidige pagina/URL.

De plugin biedt daarnaast diverse opties om het uiterlijk, de teksten en de daadwerkelijke gebruikerservaring te configureren.

WooCommerce-inlog

Sinds de overname van WooCommerce door Automattic integreert WooCommerce steeds meer functionaliteit van WordPress.com in WooCommerce. Een van de belangrijkste functies is de mogelijkheid om via je WordPress.com-account in te loggen op WooCommerce.com.

Maar dit is wellicht niet de ideale situatie voor uw klanten die nu doorgaans een WordPress.com-account hebben, waardoor deze functionaliteit voor hen nutteloos is.

Hoe creëer je een systeem voor het in- en uitloggen van accounts waar ze bekend mee zijn? Hier komt de WooCommerce Social Login om de hoek kijken!

Woocommerce Social Login

WooCommerce Social Login is een premium WooCommerce-extensie die social logins mogelijk maakt voor het naadloos aanmaken van accounts en afrekenen. Dit is GEWELDIG. Wist je dat accountregistraties een zeer belangrijke verkoopbarrière vormen? 

Volgens Statista kun je maar liefst 21% van je klanten verliezen vanwege het langdurige proces van het aanmaken van een account voordat je afrekent.

Hoe kun je dit obstakel omzeilen? Hier komt de WooCommerce Social Login-extensie om de hoek kijken.

Door deze extensie in uw WooCommerce-webshop te installeren, kunt u gebruikers toestaan ​​in te loggen met hun Facebook-, Twitter-, Google-, Amazon-, LinkedIn-, PayPal-, Disqus-, Yahoo- of VK-account, in plaats van een nieuw gebruikersaccount met een nieuwe set inloggegevens aan te maken. De gebruiker kan vervolgens eenvoudig op het logo van het gewenste netwerk klikken en daarmee inloggen op uw site. Mocht u overigens interesse hebben in uw eigen logo maken met een gratis app, bekijk dan ons artikel.

Wanneer een klant uw site voor de eerste keer bezoekt, kan hij met deze extensie gewoon op de knop van zijn favoriete sociale netwerk klikken. Met één klik op de knop wordt er een account op uw site aangemaakt.

Hiermee verlaagt u de drempel en beschikt u over meer gevalideerde gebruikersaccounts die u uiteindelijk voor verschillende soorten berichten kunt gebruiken (als ze zich daarvoor aanmelden).

Waarom WooCommerce Social Login gebruiken?

• Het geeft u de mogelijkheid om uw klantaccounts te synchroniseren met de meest populaire sociale netwerken
• Zorgt ervoor dat het aanmaken en afrekenen van klanten naadloos verloopt, zonder dat het tijdrovende proces van het aanmaken en verifiëren van een account nodig is
• Verminder de wrijving, verhoog de verkoop en herhaalaankopen en verminder het aantal verlaten winkelwagentjes.
• Sociale logins zijn een geaccepteerde en vertrouwde manier om in te loggen op websites van derden

Dit is een premium die zijn prijs van slechts $ 79 meer dan waard is. Je verdient het geld dubbel en dwars terug.

Bekijk WooCommerce Social Login

Is er nog iets anders dat u wilt weten over uitloggen?

Is er iets dat je graag wilt weten en wat er nog ontbreekt in dit artikel? We horen graag je reacties, zodat we dit bericht kunnen blijven verbeteren!