Comment personnaliser les pages de connexion WooCommerce (3 méthodes)

Si vous souhaitez offrir une expérience plus fluide à vos clients dans votre boutique WooCommerce, la création d'une page de connexion personnalisée est un excellent point de départ.

La page de connexion WordPress par défaut est simple et ne correspond pas à l'image de marque de votre boutique. En la personnalisant, vous pouvez rendre le processus de connexion plus professionnel et conforme à votre marque.

Chez WPBeginner, nous avons aidé de nombreux utilisateurs à configurer des pages de connexion personnalisées, et la méthode la plus simple consiste à utiliser un constructeur de pages comme SeedProd ou un plugin de formulaire comme WPForms.

Dans ce tutoriel, je vais vous montrer comment concevoir une page de connexion WooCommerce entièrement personnalisée et partager un outil puissant que vous pouvez également utiliser pour personnaliser la page de connexion de la caisse.

Pourquoi créer une page de connexion client WooCommerce personnalisée ?

La personnalisation des pages de connexion WooCommerce vous permet d'ajouter votre logo et de modifier le design pour qu'il corresponde à votre site Web. Cela rend votre site plus professionnel et offre une meilleure expérience utilisateur.

Cela vous permet également d'ajouter plus de champs de formulaire, et même de promouvoir des produits spécifiques ou d'afficher des offres spéciales aux clients.

Sinon, lorsque les clients se connectent à votre boutique WooCommerce, ils verront la page de connexion WordPress par défaut avec uniquement le logo et la marque WordPress.

Cette page convient si vous souhaitez simplement accéder au tableau de bord de votre site. Cependant, les clients peuvent être rebutés par le design simple et trouver suspect que la page de connexion ne corresponde pas à l'apparence de votre site Web.

Cela dit, voyons comment vous pouvez créer une page de connexion client personnalisée dans WooCommerce.

Vous pouvez utiliser les liens rapides ci-dessous pour accéder aux différentes méthodes de notre tutoriel :

• Méthode 1 : Créer une page de connexion WooCommerce entièrement personnalisée avec SeedProd
• Méthode 2 : Personnaliser le formulaire de connexion client WooCommerce avec WPForms
• Astuce bonus : Personnaliser la page de connexion de la commande WooCommerce
• Foire aux questions sur les pages de connexion WooCommerce

Méthode 1 : Créer une page de connexion WooCommerce entièrement personnalisée avec SeedProd

La meilleure façon de créer une page de connexion client WooCommerce personnalisée est d'utiliser SeedProd. C'est le meilleur constructeur de pages de destination et de thèmes WordPress pour WordPress, et il est incroyablement facile à utiliser.

Vous pouvez utiliser le constructeur par glisser-déposer de SeedProd pour personnaliser la conception et la mise en page d'une page ou de votre thème WordPress sans toucher une seule ligne de code.

Pour en savoir plus, consultez notre avis détaillé sur SeedProd.

Tout d'abord, vous devrez installer et activer le plugin SeedProd. Si vous avez besoin d'aide, veuillez consulter notre guide sur comment installer un plugin WordPress.

Après activation, vous verrez l'écran de bienvenue SeedProd.

Entrez votre clé de licence et cliquez sur le bouton « Vérifier la clé ». Vous pouvez trouver la clé de licence dans la zone de compte SeedProd.

Ensuite, vous pouvez créer une page de connexion personnalisée pour votre boutique WooCommerce.

Allez simplement dans SeedProd » Landing Pages depuis votre tableau de bord WordPress et cliquez sur le bouton « Configurer une page de connexion ».

Après cela, SeedProd vous montrera plusieurs modèles. Vous pouvez rapidement en sélectionner un et le personnaliser selon vos besoins. Cela permet de gagner du temps, et vous pouvez utiliser un design existant pour créer votre propre page de connexion WooCommerce.

Le plugin vous permet également de créer une page de connexion à partir de zéro en utilisant un modèle vierge.

Une fois que vous sélectionnez un modèle, une fenêtre contextuelle s'ouvrira.

Entrez un nom pour votre page et cliquez sur le bouton « Enregistrer et commencer à modifier la page ».

Ensuite, vous verrez le constructeur de page par glisser-déposer.

Vous pouvez maintenant personnaliser la page de connexion en ajoutant de nouveaux blocs au modèle depuis le menu de votre gauche.

SeedProd propose des blocs standard pour les titres, les textes, les images, les boutons, et plus encore.

En plus de ceux-ci, vous pouvez ajouter des blocs avancés comme un concours, un formulaire de contact, des boutons de partage social, un formulaire d'inscription, et plus encore.

Il existe également des blocs WooCommerce comme les produits récents, les produits en vedette et les produits les plus vendus que vous pouvez ajouter à votre modèle de page de connexion.

En utilisant les blocs WooCommerce, vous pouvez facilement recommander vos meilleurs produits et promouvoir des offres de réduction pour obtenir plus de conversions.

En dehors de cela, SeedProd vous permet également de personnaliser davantage n'importe quelle section de la page de connexion. Cliquez simplement sur la section, et vous verrez plus d'options comme la modification de l'étiquette, de la couleur, de la police et de l'espacement.

Une fois que vous avez terminé de personnaliser la page de connexion WooCommerce, n'oubliez pas de cliquer sur le bouton « Enregistrer » en haut.

Après cela, vous pouvez aller à l'onglet « Paramètres de la page » et cliquer sur le commutateur « Statut de la page » pour le faire passer de Brouillon à Publié. Ensuite, vous pouvez continuer et cliquer sur le bouton « Enregistrer » et fermer le constructeur de page.

À partir de là, il ne vous reste plus qu'à faire apparaître votre nouvelle page de connexion WooCommerce personnalisée pour les utilisateurs. Pour ce faire, allez dans SeedProd » Pages de destination dans votre tableau de bord WordPress.

Cliquez simplement sur le commutateur sous « Page de connexion » pour qu'il soit vert et indique « Actif ».

Une fois activé, votre nouvelle page de connexion apparaîtra sur votre site Web WordPress !

Vous pouvez visiter votre boutique e-commerce pour la voir en action.

Méthode 2 : Personnaliser le formulaire de connexion client WooCommerce avec WPForms

Voulez-vous créer un formulaire de connexion qui correspond également à votre thème de site Web et offre plus de champs de formulaire ?

Le formulaire de connexion WordPress par défaut ne permet aux utilisateurs que de saisir leur adresse e-mail ou leur nom d'utilisateur ainsi qu'un mot de passe.

Le principal avantage de l'utilisation d'un plugin de formulaire est la flexibilité. Il vous permet de placer votre formulaire de connexion n'importe où sur votre boutique en ligne, comme dans une barre latérale ou sur une page produit, ce qui est pratique pour les clients.

La meilleure façon de faire cela est d'utiliser WPForms. C'est le meilleur constructeur de formulaires WordPress, facile à utiliser pour les débutants. Plus de 6 millions de sites Web utilisent WPForms pour créer des formulaires plus intelligents.

Chez WPBeginner, nous l'avons utilisé pour créer des formulaires de contact et des enquêtes annuelles, et nous l'adorons. Pour en savoir plus, consultez notre avis complet sur WPForms.

Vous pouvez facilement créer un formulaire de connexion WooCommerce personnalisé et l'afficher n'importe où sur votre boutique en ligne, comme dans la barre latérale ou sur la page produit.

Tout d'abord, vous devrez installer et activer le plugin WPForms. Si vous avez besoin d'aide, veuillez consulter notre guide sur comment installer un plugin WordPress.

Une fois activé, vous pouvez accéder à WPForms » Paramètres depuis votre tableau de bord WordPress et saisir la clé de licence. Vous trouverez la clé de licence dans l'espace compte WPForms.

Ensuite, vous devrez vous rendre dans WPForms » Extensions dans le panneau d'administration WordPress.

Après cela, faites défiler jusqu'à l'extension « User Registration Addon » et cliquez sur le bouton « Installer l'extension ».

Vous êtes maintenant prêt à créer un formulaire de connexion personnalisé pour WooCommerce. Allez simplement dans WPForms » Ajouter pour lancer le constructeur de formulaires.

Sur l'écran suivant, vous pouvez saisir un nom pour votre formulaire en haut. Ensuite, recherchez le modèle « Formulaire de connexion utilisateur » et cliquez sur le bouton « Utiliser le modèle ».

Après cela, vous pouvez personnaliser votre modèle de formulaire de connexion utilisateur à l'aide du constructeur par glisser-déposer. WPForms facilite grandement l'ajout de différents champs au formulaire ou la réorganisation des champs existants sur le modèle.

Par exemple, vous pouvez ajouter des champs avancés comme des numéros de téléphone en les faisant glisser depuis le menu de gauche et en les déposant sur le modèle.

Vous pouvez personnaliser davantage chaque champ de formulaire dans le modèle. Cliquez simplement sur n'importe quel champ et modifiez son libellé, ajoutez une description et faites-en un champ obligatoire dans le formulaire.

Après cela, vous pouvez vous rendre dans l'onglet « Paramètres » du constructeur de formulaires. Sous les paramètres généraux, vous pouvez modifier le « Texte du bouton de soumission » en « Connexion ».

Ensuite, vous pouvez aller dans l'onglet « Confirmations » pour changer ce qui se passera lorsqu'un utilisateur se connectera avec succès.

Cliquez simplement sur le menu déroulant « Type de confirmation » et sélectionnez une option. Vous pouvez afficher un message aux clients, afficher une page ou les rediriger vers une URL spécifique.

Par exemple, vous pouvez ajouter votre formulaire de connexion WooCommerce à une page produit et permettre aux clients de se connecter rapidement pour acheter votre produit.

Lorsque vous avez terminé, cliquez simplement sur le bouton « Enregistrer » en haut.

Ensuite, vous devrez ajouter le formulaire de connexion client WooCommerce à une page de votre site.

Cliquez simplement sur le bouton « Intégrer » en haut du constructeur. Vous pouvez ensuite choisir si vous souhaitez placer le formulaire sur une page existante ou en créer une nouvelle.

Choisissons l'option « Créer une nouvelle page » pour l'instant.

Ensuite, vous devrez entrer un nom pour votre page et cliquer sur le bouton « C'est parti ! ».

Après cela, vous verrez le formulaire de connexion WPForms dans la zone de contenu WordPress.

À partir d'ici, vous pouvez personnaliser et styliser votre formulaire de connexion en ouvrant le panneau de blocs sur le côté droit de l'écran. Dans la section « Thèmes », vous pouvez choisir parmi plus de 40 thèmes préconçus pour donner à votre formulaire de connexion un aspect unique.

Vous pouvez également modifier le style et la taille des champs de formulaire, des libellés, des boutons, etc.

Une fois que vous êtes satisfait de la conception, vous pouvez prévisualiser votre formulaire, publier la nouvelle page et afficher le formulaire de connexion WooCommerce personnalisé pour vos clients.

Vous pouvez également ajouter votre formulaire de connexion WooCommerce à la barre latérale de votre boutique. De cette façon, votre formulaire apparaîtra sur chaque page produit et permettra aux clients de se connecter rapidement.

Dirigez-vous simplement vers Apparence » Widgets depuis votre tableau de bord WordPress. Ensuite, cliquez sur le bouton « + » et ajoutez un bloc de widget WPForms.

Après cela, vous pouvez choisir votre formulaire de connexion dans le menu déroulant et entrer un titre.

Lorsque vous avez terminé, cliquez sur le bouton « Mettre à jour ».

Vous pouvez maintenant visiter votre boutique en ligne pour voir le formulaire de connexion dans la barre latérale.

Pour plus de façons de créer une page de connexion client WooCommerce personnalisée, vous pouvez consulter notre guide sur comment créer une page de connexion WordPress personnalisée.

De plus, vous pouvez également consulter notre tutoriel sur comment ajouter un menu de navigation dans WordPress afin de pouvoir ajouter votre page de connexion WooCommerce à la navigation de votre site Web.

Astuce bonus : Personnaliser la page de connexion de la commande WooCommerce

WooCommerce permet aux visiteurs récurrents de se connecter lors de la page de paiement. Cependant, un formulaire de connexion générique ou peu pratique sur la page de paiement peut interrompre le processus d'achat et entraîner des ventes perdues.

En créant une expérience de connexion transparente et personnalisée à cette étape critique, vous pouvez réduire l'abandon de panier et renforcer la confiance avec vos clients.

La meilleure façon d'y parvenir est d'utiliser un puissant plugin de création d'entonnoir comme FunnelKit.

Il est livré avec des modèles conçus par des professionnels qui remplacent la page de paiement par défaut, offrant aux clients récurrents une expérience de connexion bien meilleure et plus facile. Cela permet de réduire les frictions et augmente la probabilité qu'ils terminent leurs achats.

Vous avez également la possibilité de tester A/B les multiples tunnels de vente, pages de vente et offres de vente additionnelle.

FunnelKit vous fournit des analyses détaillées sur chaque étape de votre tunnel de vente WooCommerce.

Il est également livré avec un puissant module complémentaire d'automatisation marketing, FunnelKit Automations.

Il vous permet de personnaliser les e-mails WooCommerce, d'envoyer des notifications par e-mail en cascade dans WooCommerce pour l'abandon de panier, les séries de bienvenue, et plus encore.

Si vous êtes sérieux quant à la croissance de votre boutique WooCommerce, alors c'est l'un des outils indispensables que nous recommandons.

Foire aux questions sur les pages de connexion WooCommerce

Voici quelques questions que nos lecteurs se posent fréquemment sur la création de pages de connexion WooCommerce dans WordPress :

Puis-je utiliser ces pages de connexion personnalisées pour les utilisateurs WordPress réguliers également ?

Oui, absolument. La méthode utilisant SeedProd remplace la page de connexion WordPress par défaut pour tous les utilisateurs, y compris les administrateurs et les éditeurs. La méthode WPForms vous permet de placer un formulaire de connexion n'importe où, ce qui peut également être utilisé par n'importe quel rôle d'utilisateur.

Ai-je besoin de savoir coder pour personnaliser ma page de connexion ?

Pas du tout. SeedProd et WPForms sont conçus pour être conviviaux avec des constructeurs par glisser-déposer. Vous pouvez créer une page de connexion d'aspect professionnel sans toucher une seule ligne de code.

Est-il gratuit de créer une page de connexion WooCommerce personnalisée ?

Les deux plugins proposent des versions gratuites pour commencer. Cependant, pour accéder aux modèles de page de connexion spécifiques et aux fonctionnalités avancées présentées dans ce tutoriel, vous aurez besoin des versions Pro de SeedProd ou de WPForms.

Quelle méthode est la meilleure pour mon magasin, SeedProd ou WPForms ?

Cela dépend de vos besoins spécifiques. SeedProd est idéal si vous souhaitez créer une page de connexion entièrement séparée et entièrement conçue qui correspond parfaitement à votre marque.

D'autre part, WPForms est mieux si vous souhaitez un formulaire de connexion flexible que vous pouvez ajouter à divers endroits de votre site, comme une barre latérale ou une page de paiement.

Nous espérons que cet article vous a aidé à apprendre comment créer une page de connexion client WooCommerce personnalisée. Vous pouvez également consulter notre sélection d'experts des meilleurs plugins WooCommerce et notre guide sur comment limiter les tentatives de connexion dans WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.