[Hoe] Aanmeldings- / uitloglinks toevoegen voor een verbeterde WooCommerce-gebruikerservaring

WooCommerce

WooCommerce is de meest populaire e-commerce plug-in in het WordPress-ecosysteem. Het heeft echter een beetje een zeurend probleem met de bruikbaarheid. WooCommerce laat standaard niet zien of een gebruiker is ingelogd of niet op uw eCommerce-site.

Inhoud[Zichtbaar]

Voeg een Woocommerce login logout link toe aan het Woocommerce menu

Dit kan soms verwarrend zijn voor uw klanten. Aangezien de meeste populaire e-commerce winkels (bijvoorbeeld ebay of Amazon) een Login-knop in hun menu tonen, kunnen klanten hetzelfde verwachten in ook uw e-commerce winkels.

In het geval van een WooCommerce-aangedreven winkel, moet een gebruiker echter de pagina 'mijn account' bezoeken om een ​​account aan te maken of te controleren of hij is ingelogd of niet.

woocommerce mijn account - uitloglink

In deze tutorial leggen we uit hoe je de Login/Logout-optie toevoegt aan het bovenste menu van je WooCommerce van de op te slaan. Dit is een van de meer populaire tips en trucs van CollectiveRay.com - dus blijf op de hoogte als je meer tips en trucs wilt leren!

Maak een hoofdmenu bovenaan

Stap 1: Voordat u verder gaat, moet u ervoor zorgen dat u een menu heeft toegevoegd als primair menu van uw thema. Zorg er ook voor dat je een volledige WordPress-back-up hebt gemaakt voor het geval er iets misgaat

Als je geen menu als primair menu hebt toegevoegd, log dan in op je WordPress-beheerder, ga naar Uiterlijk >> Menu. Maak onder de menu-instellingen een menu en vink het vakje "Top primair menu" aan.

woocommerce-menu

Top Tip: Als u zich niet op uw gemak voelt bij het wijzigen van de code, kunt u overwegen een WordPress-ontwikkelaar in te huren. Klik hier om te leren hoe u de ideale WordPress-ontwikkelaar inhuurt: https://www.collectiveray.com/wordpress-developers-for-hire

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

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

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

Als je het niet prettig vindt om zelf codewijzigingen uit te voeren, kun je enkele van deze hooggewaardeerde, maar goedkope Fiver-optredens bekijken.

Verifieer de Woocommerce login / logout link

Zodra je de functions.php hebt gewijzigd om de Woocommerce login / logout-links toe te voegen, is het tijd om het resultaat van je wijzigingen te zien. Als je de wijzigingen correct hebt doorgevoerd, zie je het resultaat hieronder.

woocommerce login / uitlog links

U bent klaar! Nu kunt u zien dat de optie Inloggen/Uitloggen wordt weergegeven in het hoofdmenu van uw winkel. Deze truc is vooral handig als je een bedrijf op basis van abonnementen hebt opgezet dat we hebben beschreven hier.

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

Als je gewoon op zoek bent naar een manier om je ingelogde sessies te beëindigen, ga dan naar het volgende op je website.

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

U krijgt een klein bevestigingsscherm met de vraag "Wilt u echt uitloggen?" - zodra u op de link klikt, wordt u uitgelogd.

WordPress uitlogscherm

Zoals altijd zijn er meerdere manieren om dit te doen. 

De WordPress Logout-URL is iets dat u daadwerkelijk in uw menu kunt gebruiken als u een WordPress-uitlogknop wilt maken. Koppel gewoon de bovenstaande URL en natuurlijk kan uw gebruiker hiermee alle huidige sessies beëindigen.

Uitlogmenu

 

Als dit om de een of andere reden niet werkt, moet u mogelijk uw functions.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, dwz de menufunctie die beschikbaar is in het beheerdersgedeelte onder Uiterlijk> Menu's.)

WordPress Afmelden Shortcode

Net als bij de meeste functies, zul je merken dat er ook een inpluggen die kan worden gebruikt om een ​​WordPress Logout Shortcode te genereren. Naast de verschillende configuraties die u kunt uitvoeren, geeft deze plug-in u de mogelijkheid om de volgende shortcodes in uw berichten en pagina's te gebruiken.

[logout] - Een standaard uitloglink, waarbij de gebruiker op het inlogscherm blijft nadat hij is uitgelogd. [logout_to_home] - Een link die de gebruiker uitlogt en doorverwijst naar uw startpagina. [logout_to_current] - Een link die de gebruiker uitlogt en terugleidt naar de huidige pagina/URL.

De plug-in heeft ook verschillende opties om de look en feel en teksten te configureren, of de daadwerkelijke gebruikerservaring.

WooCommerce Inloggen

Sinds de overname van WooCommerce door Automattic, heeft WooCommerce steeds meer functionaliteit van WordPress.com geïntegreerd in WooCommerce. Een van de grote functies was de mogelijkheid om in te loggen op WooCommerce.com via uw WordPress.com-account

Maar dit is misschien niet de ideale situatie voor uw klanten die normaal gesproken nu een WordPress.com-account zouden hebben, dus dergelijke functionaliteit zou worden gebruiktless voor hen.

Dus hoe maak je een account login / logout systeem waarmee ze bekend zijn? Dit is waar de WooCommerce Social Login in het spel komt!

Woocommerce sociale login

De WooCommerce Social Login is een premium WooCommerce-extensie die sociale logins voor Seam mogelijk maaktless account creaties en kassa's. Dit is ENORM. Want wist u dat accountregistraties een zeer belangrijke barrière zijn voor verkoop? 

Volgens Statista kunt u zelfs tot 21% van uw klanten verliezen vanwege dit probleem van het omslachtige proces van het aanmaken van een account voordat u afrekent.

Dus hoe verklein je deze wegversperring? Dit is waar de WooCommerce Social Login-extensie in het spel komt.

Door deze extensie in uw WooCommerce online winkel te installeren, kunt u gebruikers toestaan ​​in te loggen met hun Facebook-, Twitter-, Google-, Amazon-, LinkedIn-, PayPal-, Disqus-, Yahoo- of VK-accounts in plaats van een nieuw gebruikersaccount aan te maken met een nieuwe reeks geloofsbrieven. De gebruiker kan dan gewoon op het netwerklogo van zijn voorkeur klikken en daarmee inloggen op uw site. Trouwens, als je geïnteresseerd bent in uw eigen aangepaste logo maken met een gratis app, bekijk dan ons artikel.

woocommerce social login afrekenen

Dus wanneer een klant uw site voor de eerste keer bezoekt, kunnen ze met deze extensie gewoon op de knop van hun favoriete sociale netwerk klikken en in feite met een enkele klik een account op uw site aanmaken.

Dit verkleint de drempel en je hebt ook meer gevalideerde gebruikersaccounts die je uiteindelijk zou kunnen gebruiken voor verschillende soorten berichten (als ze daarvoor kiezen).

Waarom WooCommerce Social Login gebruiken?

  • Het geeft je de mogelijkheid om je klantaccounts te synchroniseren met de meest populaire sociale netwerken
  • Maakt het creëren van klanten en het afrekenen naadless wat niet het omslachtige proces van het maken en verifiëren van een account vereist
  • Verminder wrijving, verhoog de verkoop en herhaalaankopen en verminder het verlaten van de winkelwagen
  • Social logins zijn een geaccepteerde en vertrouwde manier om in te loggen op sites van derden

Dit is een premium die zijn prijs van slechts $ 79 zeker waard is. Je krijgt het geld vaak terug.

Bekijk WooCommerce Social Login

Nog iets dat je wilt weten over uitloggen

Is er iets dat je graag zou willen weten en ontbreekt in dit artikel? We zouden graag uw opmerkingen ontvangen, zodat we dit bericht kunnen blijven verbeteren!  

IMH

Wil je een snelle website?

Wie ben ik voor de gek aan het houden? Doen we dat niet allemaal?

Dus waarom worstelen zovelen van ons?

De grootste uitdaging is meestal het vinden van een snel, betrouwbaar hostingbedrijf.

We hebben allemaal de nachtmerries meegemaakt - ondersteuning duurt een eeuwigheid of lost ons probleem niet op, altijd iets aan jouw kant de schuld geven... 

Maar het grootste minpunt is dat de website altijd traag aanvoelt.

At CollectiveRay we hosten met InMotion-hosting en onze website is stom snel. We draaien op een custom stack van LightSpeed ​​server setup op MariaDB met een PHP7.4 engine en via Cloudflare. 

Gecombineerd met onze front-end optimalisaties bedienen we elke dag betrouwbaar 6000 gebruikers, met pieken van 50+ gelijktijdige gebruikers. 

Wil je een snelle installatie zoals de onze? Breng uw site gratis over naar InMotion-hosting en ontvang onze 50% KORTING op de huidige prijzen.

Probeer InMotion Hosting met 50% KORTING voor CollectiveRay bezoekers ALLEEN in mei 2024!

InMotion-hosting 50% KORTING voor CollectiveRay bezoekers

Over de auteur
David Attard
David heeft de afgelopen 21 jaar in of rond de online en digitale industrie gewerkt. Hij heeft ruime ervaring in de software- en webontwerpindustrie met behulp van WordPress, Joomla en de niches eromheen. Hij heeft gewerkt met softwareontwikkelingsbureaus, internationale softwarebedrijven, lokale marketingbureaus en is nu hoofd Marketing Operations bij Aphex Media - een SEO-bureau. Als digitale consultant ligt zijn focus op het helpen van bedrijven om een ​​concurrentievoordeel te behalen door gebruik te maken van een combinatie van hun website en digitale platforms die vandaag de dag beschikbaar zijn. Zijn mix van technologische expertise gecombineerd met een sterk zakelijk inzicht geeft zijn geschriften een concurrentievoordeel.

Nog een ding... Wist je dat mensen die nuttige dingen zoals dit bericht delen er ook GEWELDIG uitzien? ​
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!

Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.

Auteur (s) Uitgelicht op:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   en nog veel meer ...