[Comment] Ajouter des liens de connexion / déconnexion pour une expérience utilisateur améliorée de WooCommerce

WooCommerce

WooCommerce est le plugin de commerce électronique le plus populaire dans l'écosystème WordPress. Cependant, il a un problème de convivialité tenace. Par défaut, WooCommerce ne montre pas si un utilisateur est connecté ou non à votre site de commerce électronique.

Contenu[Afficher]

Ajouter un lien de déconnexion de connexion Woocommerce au menu Woocommerce

Parfois, cela peut être déroutant pour vos clients. Étant donné que la plupart des magasins de commerce électronique populaires (par exemple, ebay ou Amazon) affichent un bouton de connexion dans leur menu, les clients peuvent s'attendre à la même chose dans vos boutiques e-commerce aussi.

Cependant, dans le cas d'un magasin alimenté par WooCommerce, un utilisateur devra visiter la page `` mon compte '' pour créer un compte ou vérifier s'il est connecté ou non.

woocommerce mon compte - lien de déconnexion

Dans ce tutoriel, nous vous expliquerons comment ajouter l'option Connexion / Déconnexion au menu supérieur de votre WooCommerce site boutique. C'est l'un des trucs et astuces les plus populaires de CollectiveRay.com - alors restez à l'écoute si vous voulez en savoir plus de trucs et astuces !

Créer un menu principal principal

Étape 1: Avant de continuer, assurez-vous d'avoir ajouté un menu en tant que menu principal de votre thème. Assurez-vous également d'avoir fait un sauvegarde complète de WordPress au cas où quelque chose ne va pas

Si vous n'avez pas ajouté de menu en tant que menu principal, connectez-vous à votre administrateur WordPress, accédez à Apparence >> Menu. Dans les paramètres du menu, créez un menu et cochez la case «Menu principal supérieur».

menu woocommerce

Le meilleur conseil: Si vous n'êtes pas à l'aise avec les changements de code, vous voudrez peut-être envisager de faire appel à un développeur WordPress. Cliquez ici pour savoir comment embaucher le développeur WordPress idéal: https://www.collectiveray.com/wordpress-developers-for-hire

Étape 2: Ajoutez le code ci-dessous au fichier functions.php de votre thème.

add_filter ('wp_nav_menu_items', 'add_loginout_link', 10, 2);
function add_loginout_link ($ items, $ args) {
  if (is_user_logged_in () && $ args-> theme_location == 'primaire') {
    $ items. = ' Se déconnecter ';
  } elseif (! is_user_logged_in () && $ args-> theme_location == 'primaire') {
    $ items. = ' Connexion ';
  } return $ items;
}

MISE À JOUR: Nous venons d'être informés par un lecteur / commentateur utile du site Web qui a déclaré que wc_get_page_id devrait maintenant être utilisé à la place de woocommerce_get_page_id

Si vous n'êtes pas à l'aise avec les changements de code vous-même, vous pouvez consulter certains de ces concerts Fiver très appréciés, mais bon marché.

Vérifiez le lien de connexion / déconnexion de Woocommerce

Une fois que vous avez modifié le functions.php pour ajouter les liens de connexion / déconnexion de Woocommerce, il est temps de voir le résultat de vos modifications. Si vous avez correctement effectué les modifications, vous verrez le résultat ci-dessous.

liens de connexion / déconnexion woocommerce

Vous avez terminé! Vous pouvez maintenant voir que l'option Connexion / Déconnexion est affichée dans le menu supérieur de votre boutique. Cette astuce est particulièrement utile si vous avez mis en place une entreprise basée sur une boîte d'abonnement que nous avons détaillée ici.

Maintenant que nous vous avons montré comment faire cela pour WooCommerce, il est peut-être temps de faire la même chose et de créer un lien de déconnexion WordPress. C'est souvent le cas si vous avez décidé de désactiver la barre d'administration, mais que vous souhaitez tout de même avoir la possibilité de vous déconnecter, juste pour être en sécurité.

Si vous cherchez simplement un moyen de mettre fin à vos sessions de connexion, visitez simplement ce qui suit sur votre site Web.

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

Vous obtiendrez un petit écran de confirmation vous demandant "Voulez-vous vraiment vous déconnecter?" - une fois que vous aurez cliqué sur le lien, vous serez déconnecté.

Écran de déconnexion WordPress

Comme toujours, il existe plusieurs façons de procéder. 

L'URL de déconnexion WordPress est quelque chose que vous pouvez réellement utiliser dans votre menu, si vous souhaitez créer un bouton de déconnexion WordPress. Liez simplement l'URL ci-dessus, et bien sûr, cela permettra à votre utilisateur de mettre fin à toutes les sessions en cours.

Menu de déconnexion

 

Si cela ne fonctionne pas pour une raison quelconque, vous devrez peut-être modifier votre functions.php pour activer cette fonctionnalité. 

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

 

A Noter: cette méthode ci-dessus fonctionne et est activée si vous utilisez des menus personnalisés WordPress, c'est-à-dire la fonction de menu disponible dans la section admin sous Apparence> Menus.)

Shortcode de déconnexion WordPress

Tout comme avec la plupart des fonctions, vous constaterez qu'il existe également un plug-in qui peut être utilisé pour générer un shortcode de déconnexion WordPress. Outre les différentes configurations que vous pouvez effectuer, ce plugin vous donne la possibilité d'utiliser les codes courts suivants dans vos articles et pages.

[déconnexion] - Un lien de déconnexion standard, où l'utilisateur reste sur l'écran de connexion après avoir été déconnecté. [logout_to_home] - Un lien qui déconnecte l'utilisateur et le redirige vers votre page d'accueil. [logout_to_current] - Un lien qui déconnecte l'utilisateur et le redirige vers la page / URL actuelle.

Le plugin dispose également de diverses options pour configurer l'apparence et les textes, ou l'expérience utilisateur réelle.

Connexion WooCommerce

Depuis l'acquisition de WooCommerce par Automattic, WooCommerce intègre de plus en plus de fonctionnalités de WordPress.com dans WooCommerce. L'une des grandes fonctionnalités a été la possibilité de se connecter à WooCommerce.com via votre compte WordPress.com

Mais ce n'est peut-être pas une situation idéale pour vos clients qui auraient généralement maintenant un compte WordPress.com, donc une telle fonctionnalité serait utiliséeless pour eux.

Alors, comment pouvez-vous créer un système de connexion / déconnexion de compte avec lequel ils sont familiers? C'est là que la connexion sociale WooCommerce entre en jeu!

Connexion sociale Woocommerce

La connexion sociale WooCommerce est une extension WooCommerce premium qui permet les connexions sociales pour Seamless créations de comptes et de caisses. C'est énorme. Car saviez-vous que les inscriptions de compte sont un frein très important à la vente ? 

En fait, selon Statista, vous pouvez perdre jusqu'à 21% de vos clients à cause de ce problème du long processus de création de compte avant de passer à la caisse.

Alors, comment atténuez-vous ce barrage routier? C'est là que l'extension de connexion sociale WooCommerce entre en jeu.

En installant cette extension sur votre boutique en ligne WooCommerce, vous pouvez permettre aux utilisateurs de se connecter en utilisant leurs comptes Facebook, Twitter, Google, Amazon, LinkedIn, PayPal, Disqus, Yahoo ou VK au lieu d'avoir à créer un nouveau compte utilisateur avec un nouveau ensemble d'informations d'identification.

paiement de connexion sociale woocommerce

Ainsi, lorsqu'un client visite votre site pour la première fois, avec cette extension, il peut simplement cliquer sur le bouton de son réseau social préféré, et essentiellement créer un compte sur votre site en un seul clic.

Cela réduit la barrière et vous avez également plus de comptes d'utilisateurs validés que vous pourriez éventuellement utiliser pour différents types de messagerie (s'ils acceptent).

 

Pourquoi utiliser la connexion sociale WooCommerce?

  • Il vous donne la possibilité de synchroniser vos comptes clients avec les réseaux sociaux les plus populaires
  • Fait la création de client et la couture de caisseless qui ne nécessite pas le long processus de création et de vérification de compte
  • Réduisez les frictions, augmentez les ventes et les achats répétés, et réduisez l'abandon de panier
  • Les connexions sociales sont un moyen accepté et fiable de se connecter à des sites tiers

C'est une prime qui vaut bien son prix de seulement 79 $. Vous gagnerez de l'argent plusieurs fois en retour.

Découvrez la connexion sociale WooCommerce

 

Tout ce que vous aimeriez savoir sur la déconnexion

Y a-t-il quelque chose que vous aimeriez savoir et qui manque cet article? Nous serions ravis de recevoir vos commentaires afin que nous puissions continuer à améliorer cet article!  

Téléchargez la liste des 101 astuces WordPress que tout blogueur devrait connaître

101 astuces WordPress

Cliquez ici pour télécharger maintenant
À propos de l’auteure
David Attard
Auteur: David AttardSite Web : https://www.linkedin.com/in/dattard/
David travaille dans ou autour de l'industrie en ligne / numérique depuis 18 ans. Il possède une vaste expérience dans les industries du logiciel et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. En tant que consultant numérique, son objectif est d'aider les entreprises à obtenir un avantage concurrentiel en utilisant une combinaison de leur site Web et des plates-formes numériques disponibles aujourd'hui.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Si vous voulez, vous pouvez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!

Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...