Vous pouvez maintenant personnaliser votre page de connexion WooCommerce sans code. Connexion personnalisée pour WooCommerce, nouveau de Visser Labs, offre aux clients fidèles une page de marque à l'adresse /login avec cinq modèles, votre logo et un panneau promotionnel à côté du formulaire.
La plupart des boutiques ne touchent jamais à leur écran de connexion. WooCommerce affiche un formulaire de nom d'utilisateur et de mot de passe basique sur la page Mon compte, stylisé par le thème que vous utilisez. Cela fonctionne, mais cela ressemble à une réflexion après coup, et c'est la seule page que vos clients fidèles voient à chaque fois qu'ils reviennent.
Connexion personnalisée pour WooCommerce résout ce problème. Ci-dessous, nous expliquons pourquoi la connexion par défaut est insuffisante, ce que fait le plugin, les cinq modèles, comment utiliser le panneau promotionnel et comment tout configurer en quelques minutes.
Table des matières
- Pourquoi la page de connexion WooCommerce par défaut est insuffisante
- Ce que fait Connexion personnalisée pour WooCommerce
- Cinq modèles pour votre page de connexion WooCommerce
- Transformez votre page de connexion en espace promotionnel
- Comment personnaliser votre page de connexion WooCommerce
- Comment fonctionnent les connexions et les redirections
- Pour les développeurs : Hooks et filtres
- Tarifs et prérequis
- Réservez un meilleur accueil aux clients fidèles
- Questions fréquemment posées
Pourquoi la page de connexion WooCommerce par défaut est insuffisante
La connexion WooCommerce par défaut est un formulaire fonctionnel sans branding ni message propre. Il se trouve dans le modèle Mon compte de votre thème, donc changer son apparence implique généralement de modifier les fichiers du thème ou d'écrire du CSS.
Les personnes qui se connectent sont vos clients existants, le groupe le plus susceptible d'acheter à nouveau. Notre guide sur les avantages de la fidélisation client explique pourquoi ce public mérite une attention particulière.
La connexion est aussi un point où les acheteurs abandonnent. Selon le Baymard Institute, les problèmes de réinitialisation de mot de passe ont amené certains utilisateurs de comptes existants à abandonner le processus de paiement sur des sites de vente au détail lors de leurs tests. Une page de connexion ciblée avec un lien visible « Mot de passe perdu ? » offre à ces clients un moyen clair de revenir.
Un autre problème est le gaspillage d'espace. Une page de connexion reçoit un trafic constant de personnes qui vous font déjà confiance, et le formulaire par défaut n'en utilise aucune partie pour leur parler d'une promotion, d'un nouveau produit ou d'une offre de fidélité. Si vous avez lu nos stratégies pour réduire l'abandon de panier, vous savez à quel point chaque petite étape du parcours d'achat compte.
Ce que fait Connexion personnalisée pour WooCommerce
Custom Login for WooCommerce crée une page de connexion autonome à l'adresse /login et y redirige les acheteurs déconnectés depuis Mon Compte. Vous contrôlez la mise en page, le logo, les couleurs, le texte et un panneau promotionnel à partir d'un seul écran de configuration sous WooCommerce.
Voici ce qui est inclus dans la version 1.0.3 :
- Page /login automatique : L'activation du plugin crée une page de connexion à l'adresse /login si votre site n'en a pas déjà une.
- Redirection Mon Compte : Les visiteurs déconnectés qui ouvrent Mon Compte sont redirigés vers /login, puis reviennent à Mon Compte après s'être connectés.
- Cinq modèles : Classique Divisé, Carte Centrée, Moderne Dégradé, Mode Sombre et Organique Chaud.
- Contrôles de marque : Ajoutez votre logo, modifiez le titre et définissez les couleurs des panneaux, des boutons, des liens et des champs de saisie.
- Étiquettes de formulaire modifiables : Renommez les étiquettes d'e-mail et de mot de passe, le texte « Se souvenir de moi », le bouton de connexion et le lien « Mot de passe perdu ».
- Panneau promotionnel : Affichez un titre, un court message et un bouton d'appel à l'action à côté du formulaire de connexion.
- Contenu rotatif : Ajoutez plusieurs messages promotionnels et affichez-en un aléatoire à chaque visite.
- Contrôle mobile : Masquez le panneau promotionnel sur les téléphones ou empilez-le sous le formulaire de connexion.
Il déclare également la compatibilité avec High-Performance Order Storage. WooCommerce décrit HPOS comme une structure de base de données conçue spécifiquement pour les données de commande de commerce électronique, selon la documentation WooCommerce HPOS. Les boutiques qui sont passées à cette solution ne verront pas d'avertissement de compatibilité pour Custom Login for WooCommerce.
Cinq modèles pour votre page de connexion WooCommerce
Chaque modèle est une conception complète de page de connexion, et vous basculez entre eux en un clic sur l'onglet Modèle. Votre logo, votre titre et vos étiquettes sont conservés, donc essayer un look différent prend quelques secondes. Carte Centrée affiche le formulaire de connexion seul, sans le panneau promotionnel, alors choisissez l'un des quatre autres si vous souhaitez afficher une offre.
| Modèle | Ce à quoi il ressemble |
|---|---|
| Classique Divisé | Formulaire de connexion blanc épuré d'un côté, section promotionnelle colorée de l'autre |
| Carte Centrée | Une seule carte de connexion sur fond sombre, sans le panneau promotionnel |
| Moderne Dégradé | Un fond dégradé lumineux avec une carte blanche flottante |
| Mode Sombre | Un thème sombre avec des couleurs d'accentuation |
| Organique Chaud | Tons chauds et formes arrondies pour une sensation conviviale |
Classic Split est la mise en page que nous utilisons sur la boutique Visser Labs. Certains modèles conservent davantage leur propre palette de couleurs que d'autres, alors prévisualisez les couleurs de votre onglet Design sur le modèle que vous choisissez. Si vous souhaitez que votre page de connexion corresponde exactement aux couleurs de votre marque, Classic Split est un bon point de départ.
Voici à quoi ressemble chaque modèle avec une image de marque de magasin d'exemple. Nous avons créé ces cinq exemples de magasins sur notre site de test, un par modèle, afin que vous puissiez voir la gamme avant de choisir.
Transformez votre page de connexion en espace promotionnel
Le panneau promotionnel présente une offre à chaque client qui se connecte. Il affiche un titre, un court message et un bouton qui renvoie où vous le souhaitez, juste à côté du formulaire de connexion que vos clients regardent déjà.
Vous le configurez dans l'onglet Contenu. Activez Activer la section promo, puis remplissez quatre champs :
- Titre de la promo : Le titre du panneau.
- Contenu de la promo : Une ou deux phrases de texte de support.
- Texte du bouton : L'étiquette du bouton d'appel à l'action.
- URL du bouton : Où le bouton mène. Il s'ouvre dans un nouvel onglet, donc la page de connexion du client reste ouverte.
Afficher un message différent à chaque visite
Le contenu rotatif vous permet de lancer plusieurs promotions à la fois. Activez Activer la rotation, cliquez sur Ajouter un élément, et donnez à chaque élément son propre Titre, Contenu, Texte du bouton, URL du bouton et URL de l'image. Custom Login for WooCommerce choisit ensuite un élément au hasard à chaque chargement de la page.
Cela fonctionne bien pour les magasins qui ont plus d'une chose à dire. Un élément peut promouvoir une vente saisonnière, un autre une nouvelle gamme de produits, et un troisième votre inscription à la newsletter.
Ce que nous avons vu : Sur notre propre page de connexion Visser Labs, le panneau promotionnel ne fait pas du tout de publicité pour un plugin Visser. Il fait tourner des offres pour nos plugins sœurs, tels que SaveTo Wishlist et Advanced Coupons, et l'offre SaveTo Wishlist contient un lien suivi afin que nous puissions voir ses clics. Une page de connexion est un bon endroit pour vendre quelque chose de connexe, car les personnes qui la lisent ont déjà un compte chez vous. Notre article sur l'augmentation des ventes avec SaveTo Wishlist Pro explique pourquoi une offre de liste de souhaits convient aux clients fidèles.
Choisir l'apparence de la promotion sur mobile
Les téléphones n’ont pas la place pour deux panneaux côte à côte, donc l’onglet Design a un paramètre Mobile Promo Display avec deux choix. Hide on mobile affiche uniquement le formulaire de connexion sur les petits écrans, et c’est le réglage par défaut. Stack below login form maintient la promotion visible en dessous.
Choisissez Stack below login form si votre promotion contient une offre réelle. Gardez le réglage par défaut si le panneau est principalement décoratif.
Comment personnaliser votre page de connexion WooCommerce
Pour personnaliser votre page de connexion WooCommerce, vous travaillez via quatre onglets et un bouton Enregistrer. Tout se trouve sous WooCommerce > Custom Login.
- Installez et activez le plugin. Téléchargez Custom Login for WooCommerce depuis Plugins > Ajouter, puis activez-le. Votre page /login est créée automatiquement.
- Activez votre licence. Ouvrez l’onglet License, entrez votre License Key et l’Activation Email que vous avez utilisé lors de l’achat, puis activez. Une licence active vous donne les mises à jour du plugin et le support.
- Choisissez un modèle. Dans l’onglet Template, cliquez sur le design que vous souhaitez.
- Personnalisez-le. Dans l’onglet Design, collez l’adresse de votre logo dans Logo URL (SVG, PNG et JPG sont supportés, et 200x60px est recommandé), puis définissez votre Login Heading.
- Définissez les couleurs et les étiquettes. Toujours dans l’onglet Design, ajustez les Couleurs du panneau, les Couleurs des boutons, les Couleurs des boutons de promotion, les Couleurs des liens et les Couleurs des champs, puis renommez les Étiquettes du formulaire que vous souhaitez modifier.
- Ajoutez votre promotion. Dans l’onglet Content, remplissez le panneau de promotion ou activez le contenu rotatif.
- Enregistrez. Cliquez sur Save Settings en haut de l’écran des paramètres, puis ouvrez votresite.com/login dans une fenêtre de navigateur privée pour vérifier le résultat.
Utilisez une fenêtre privée pour cette dernière vérification. Les utilisateurs connectés qui visitent /login sont directement redirigés vers Mon Compte, vous ne verrez donc pas la page de connexion lorsque vous êtes connecté en tant qu’administrateur.
Comment fonctionnent les connexions et les redirections
Custom Login for WooCommerce utilise le propre flux de connexion de WooCommerce, donc les comptes, mots de passe et l’historique des commandes de vos clients restent les mêmes. Seule la page sur laquelle ils se connectent est nouvelle.
Quelques détails méritent d’être connus :
- Connectez-vous avec nom d’utilisateur ou e-mail : Le champ de connexion accepte l’un ou l’autre, tout comme WordPress standard.
- Retour à l’origine : Lorsqu’un client est envoyé de Mon Compte vers /login, il revient à Mon Compte après s’être connecté.
- La réinitialisation du mot de passe fonctionne toujours : Le lien « Mot de passe oublié ? » mène à la page de récupération de mot de passe normale de WooCommerce, et cette page n’est jamais redirigée.
- La déconnexion mène à /login : Après la déconnexion, les clients reviennent à votre page de connexion avec un message de confirmation.
- Un seul message d’erreur : Un mot de passe incorrect et un nom d’utilisateur inconnu affichent le même message, « Nom d’utilisateur inconnu ou mot de passe incorrect. » Cela empêche quiconque d’utiliser le formulaire pour vérifier quels comptes existent.
Le formulaire de connexion exécute également les crochets standard du formulaire de connexion de WooCommerce. Les extensions qui ajoutent des champs au formulaire de connexion WooCommerce, tels que les plugins CAPTCHA, peuvent également les ajouter à votre nouvelle page. Si les robots posent problème pour votre boutique, notre guide sur comment prévenir les fausses commandes dans WooCommerce couvre le tableau d'ensemble.
Pour les développeurs : Hooks et filtres
Les développeurs peuvent modifier le comportement de Custom Login for WooCommerce avec deux filtres et trois actions. Ce sont les moyens pris en charge pour le personnaliser sans modifier les fichiers du plugin.
clwc_login_redirect: Modifiez la destination d'un client après une connexion réussie. Il reçoit l'URL de redirection et l'utilisateur.clwc_logout_redirect: Modifiez la destination d'un client après la déconnexion.clwc_after_login_form: S'exécute après le formulaire de connexion, pour des liens ou des avis supplémentaires.clwc_login_footer: S'exécute dans le pied de page de la page de connexion.clwc_login_enqueue_scripts: Mettez en file d'attente les scripts ou les styles pour la page de connexion. La page n'appelle paswp_enqueue_scripts, utilisez donc cette action à la place.
La redirection après la connexion passe également par le filtre woocommerce_login_redirect de WooCommerce, de sorte que le code de redirection existant continue de fonctionner.
Tarifs et prérequis
Custom Login for WooCommerce est vendu sous licence annuelle ; consultez la page du plugin pour les prix actuels. Cela inclut les mises à jour automatiques et le support, et il est couvert par la garantie de remboursement de 14 jours de Visser Labs.
Votre boutique a besoin de :
- WordPress 5.8 ou supérieur
- PHP 7.4 ou supérieur
- WooCommerce 6.0 ou supérieur
Réservez un meilleur accueil aux clients fidèles
Votre page de connexion est l'une des rares pages que les gens visitent à dessein, encore et encore. Lorsque vous personnalisez votre page de connexion WooCommerce, cette visite devient un moment de marque, et le panneau promotionnel vous donne un endroit pour montrer aux clients fidèles ce qui est nouveau.
- Découvrez pourquoi la connexion par défaut est insuffisante pour votre boutique
- Choisissez l'un des cinq modèles qui conviennent à votre marque
- Configurez le panneau promotionnel avec une offre pour les clients fidèles
- Suivez les étapes de configuration et testez dans une fenêtre privée
Prêt à personnaliser votre page de connexion WooCommerce ? Obtenez Custom Login for WooCommerce et offrez à vos clients fidèles une page de connexion qui ressemble à votre boutique.
Questions fréquemment posées
Qu'est-ce qu'une page de connexion personnalisée WooCommerce ?
Une page de connexion personnalisée WooCommerce est une page de connexion dédiée avec votre propre design, au lieu du formulaire par défaut sur la page Mon compte. Connexion personnalisée pour WooCommerce en crée une à l'adresse /login avec le choix de cinq modèles, votre logo, des couleurs personnalisées et un panneau promotionnel optionnel.
Mes clients auront-ils besoin de nouveaux mots de passe ?
Non. Connexion personnalisée pour WooCommerce utilise la connexion standard de WordPress et WooCommerce, donc tous les comptes existants, mots de passe et historique des commandes restent tels quels. Les clients se connectent avec les mêmes identifiants sur la nouvelle page.
Custom Login pour WooCommerce modifie-t-il la connexion à l’administration WordPress ?
Non. Il gère la connexion client à /login et la redirection depuis Mon compte. Votre écran de connexion wp-admin n'est pas modifié.
Puis-je afficher différentes promotions sur ma page de connexion ?
Oui. Activez le contenu rotatif dans l'onglet Contenu et ajoutez autant d'éléments que vous le souhaitez. Chaque élément a son propre titre, texte, bouton et image, et Connexion personnalisée pour WooCommerce en affiche un au hasard à chaque visite.
Est-ce que cela fonctionne avec HPOS ?
Oui. La version 1.0.3 déclare la compatibilité avec WooCommerce High-Performance Order Storage, donc les boutiques utilisant HPOS ne verront pas d'avertissement de compatibilité.
Que se passe-t-il si un client connecté visite /login ?
Ils sont envoyés directement à leur page Mon compte. Le formulaire de connexion n'apparaît qu'aux visiteurs qui ne sont pas connectés.
