Table des matières
Vous souhaitez personnaliser votre page de connexion client WooCommerce ?
La page de connexion par défaut de WordPress est simple et ne correspond pas à l'image de votre magasin. Personnaliser la page de connexion de votre client WooCommerce vous permet d'offrir une meilleure expérience à l'utilisateur.
Dans cet article, nous vous montrerons comment créer une page de connexion WooCommerce entièrement personnalisée et nous vous donnerons également des conseils pour personnaliser la page de connexion de la caisse.
Pourquoi créer une page de connexion personnalisée pour les clients de WooCommerce ?
Lorsque les clients se connectent à votre boutique WooCommerce, ils voient la page de connexion par défaut de WordPress avec seulement le logo et la marque de WordPress.
Cette page convient parfaitement si vous souhaitez simplement accéder au tableau de bord de votre site. Cependant, les clients peuvent être déconcertés par le design sobre et trouver suspect que la page de connexion ne corresponde pas à l'apparence de votre site web.
La personnalisation des pages de connexion de WooCommerce vous permet d'ajouter votre logo et de modifier le design pour qu'il corresponde à votre site web, ce qui donne un aspect plus professionnel à votre site et améliore l'expérience des utilisateurs.
Il vous permet également d'ajouter des champs de formulaire supplémentaires et même de promouvoir des produits spécifiques ou de présenter des offres spéciales aux clients.
Ceci étant dit, voyons comment vous pouvez créer une page de connexion client personnalisée dans WooCommerce.
Créer une page de connexion WooCommerce complètement personnalisée en utilisant 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 d'atterrissage et de thèmes pour WordPress, et il est incroyablement facile à utiliser.
Vous pouvez utiliser le constructeur par glisser-déposer de SeedProd pour personnaliser le design et la mise en page d'une page ou de votre thème WordPress sans toucher à une seule ligne de code.
Pour ce tutoriel, nous utiliserons la licence SeedProd Pro car elle inclut le modèle de page de connexion et d'autres options de personnalisation avancées. Il existe également une version SeedProd Lite que vous pouvez utiliser gratuitement.
Tout d'abord, vous devez installer et activer le plugin SeedProd. Si vous avez besoin d'aide, consultez notre guide sur l'installation d'un plugin WordPress.
Lors de l'activation, vous verrez apparaître l'icône 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 du compte SeedProd.
Ensuite, vous pouvez créer une page de connexion personnalisée pour votre boutique WooCommerce.
Il suffit de se rendre sur SeedProd " Pages d'atterrissage dans votre tableau de bord WordPress et cliquez sur le bouton "Créer 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 avez sélectionné un modèle, une fenêtre contextuelle s'ouvre.
Saisissez un nom pour votre page et cliquez sur le bouton "Enregistrer et commencer à modifier la page".
Ensuite, vous verrez le constructeur de pages par glisser-déposer.
Vous pouvez désormais personnaliser la page de connexion en ajoutant de nouveaux blocs au modèle à partir du menu de gauche.
SeedProd propose des blocs standards comme le titre, le texte, l'image, le bouton, et plus encore.
Voir également: 9 meilleurs endroits pour obtenir un logo personnalisé pour votre site web WordPress
En outre, vous pouvez ajouter des blocs avancés comme un cadeau, un formulaire de contact, des boutons de partage social, un formulaire d'optin, et plus encore. Il y a aussi des blocs WooCommerce comme les produits récents, les produits vedettes, 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.
De plus, SeedProd vous permet de personnaliser n'importe quelle section de la page de connexion. Cliquez simplement sur la section et vous verrez d'autres options comme l'édition du libellé, de la couleur, de la police et de l'espacement.
Une fois que vous avez fini de personnaliser la page de connexion de WooCommerce, n'oubliez pas de cliquer sur le bouton "Enregistrer" en haut de la page.
Ensuite, vous pouvez vous rendre dans l'onglet "Paramètres de la page" et cliquer sur le bouton "Statut de la page" pour passer de "Brouillon" à "Publier". Ensuite, vous pouvez cliquer sur le bouton "Enregistrer" et fermer le constructeur de pages.
A partir de là, il ne reste plus qu'à faire en sorte que votre nouvelle page de connexion WooCommerce personnalisée s'affiche pour les utilisateurs. Pour ce faire, allez sur SeedProd " Pages d'atterrissage dans votre tableau de bord WordPress.
Il suffit de cliquer sur le bouton situé sous "Page de connexion" pour qu'il devienne vert et indique "Actif".
Une fois cette option activée, votre nouvelle page de connexion apparaîtra sur votre site !
Vous pouvez visiter votre boutique de commerce électronique pour la voir à l'œuvre.
Personnaliser le formulaire de connexion des clients de WooCommerce en utilisant WPForms
Vous souhaitez créer un formulaire de connexion qui s'harmonise avec le thème de votre site web et qui offre davantage de champs de formulaire ?
Le formulaire de connexion par défaut de WordPress ne permet aux utilisateurs que de saisir leur adresse e-mail ou leur nom d'utilisateur ainsi qu'un mot de passe. Avec un formulaire de connexion personnalisé, vous pouvez ajouter plus de champs et permettre aux clients de se connecter avec leur nom ou leur numéro de téléphone.
La meilleure façon de le faire est d'utiliser WPForms. C'est le meilleur constructeur de formulaires WordPress, facile à utiliser pour les débutants. Plus de 5 millions de sites web utilisent WPForms pour construire des formulaires plus intelligents.
Vous pouvez facilement créer un formulaire de connexion WooCommerce personnalisé et l'afficher n'importe où sur votre boutique en ligne, comme la barre latérale ou la page produit.
Pour ce tutoriel, nous utiliserons la version Pro de WPForms car elle inclut l'addon User Registration. Vous pouvez également essayer la version gratuite de WPForms pour commencer.
Tout d'abord, vous devez installer et activer le plugin WPForms. Si vous avez besoin d'aide, consultez notre guide sur l'installation d'un plugin WordPress.
Après l'activation, vous pouvez vous rendre à l'adresse suivante WPForms " Paramètres depuis votre tableau de bord WordPress et entrez la clé de licence. Vous pouvez trouver la clé de licence dans la zone de compte WPForms.
Ensuite, vous devez vous rendre sur le site WPForms " Addons dans le panneau d'administration de WordPress.
Ensuite, faites défiler vers le bas jusqu'à 'User Registration Addon' et cliquez sur le bouton 'Install Addon'.
Vous êtes maintenant prêt à créer un formulaire de connexion personnalisé pour WooCommerce. Il vous suffit de vous rendre sur WPForms " Ajouter un nouveau pour lancer le générateur de formulaires.
Sur l'écran suivant, vous pouvez saisir un nom pour votre formulaire en haut de la page. Ensuite, recherchez le modèle "Formulaire de connexion de l'utilisateur" et cliquez sur le bouton "Utiliser le modèle".
Après cela, vous pouvez personnaliser votre modèle de formulaire de connexion en utilisant le constructeur par glisser-déposer. WPForms rend très facile 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 tels que 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.
Il vous suffit de cliquer sur un champ pour modifier son intitulé, ajouter une description et en faire un champ obligatoire dans le formulaire.
Ensuite, vous pouvez vous rendre dans l'onglet "Paramètres" du générateur de formulaires. Dans les paramètres généraux, vous pouvez remplacer le "Texte du bouton de soumission" par "Connexion".
Ensuite, vous pouvez aller dans l'onglet "Confirmations" pour modifier ce qui se passera lorsqu'un utilisateur se connectera avec succès.
Il vous suffit de cliquer sur le menu déroulant "Type de confirmation" et de sélectionner une option. Vous pouvez afficher un message, une page ou rediriger les clients vers une URL spécifique.
Par exemple, vous pouvez ajouter votre formulaire de connexion WooCommerce sur une page produit et permettre aux clients de s'identifier rapidement pour acheter votre produit.
Lorsque vous avez terminé, cliquez simplement sur le bouton "Enregistrer" en haut de la page.
Ensuite, vous devez ajouter le formulaire de connexion client de WooCommerce à une page de votre site.
Il vous suffit de cliquer sur le bouton "Intégrer" en haut du générateur. Vous pouvez alors choisir de placer le formulaire sur une page existante ou d'en créer une nouvelle.
Choisissons pour l'instant l'option "Créer une nouvelle page".
Ensuite, vous devez donner un nom à votre page et cliquer sur le bouton "Let's Go !
Après cela, vous verrez le formulaire de connexion WPForms à l'intérieur de la zone de contenu de WordPress.
Vous pouvez maintenant prévisualiser votre formulaire, publier la nouvelle page et afficher le login WooCommerce personnalisé pour vos clients.
D'autre part, 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.
Il suffit de se rendre sur le site Apparence " Widgets Ensuite, cliquez sur le bouton '+' et ajoutez un bloc de widgets WPForms.
Ensuite, vous pouvez choisir votre formulaire de connexion dans le menu déroulant et saisir un titre.
Voir également: 6 meilleurs plugins WordPress de calendrier comparés (2023)
Lorsque vous avez terminé, cliquez sur le bouton "Mettre à jour".
Vous pouvez maintenant visiter votre boutique en ligne et voir le formulaire de connexion dans la barre latérale.
Pour plus d'informations sur la création d'une page de connexion personnalisée pour WooCommerce, vous pouvez consulter notre guide sur la création d'une page de connexion personnalisée pour WordPress.
De plus, vous pouvez également consulter notre tutoriel sur l'ajout d'un menu de navigation dans WordPress afin d'ajouter votre page de connexion WooCommerce à la navigation de votre site web.
Bonus : Personnaliser la page de connexion de WooCommerce Checkout
Si vous souhaitez personnaliser la page de connexion de WooCommerce, la meilleure façon de le faire est d'utiliser un puissant plugin de construction d'entonnoir comme FunnelKit, anciennement WooFunnels.
FunnelKit vous permet de personnaliser votre page de paiement WooCommerce, d'ajouter un paiement en plusieurs étapes, d'ajouter des ventes incitatives en un clic, et bien plus encore.
Vous pouvez choisir parmi des dizaines de modèles de caisse pré-fabriqués qui sont hautement optimisés pour les conversions, et la meilleure partie est que vous pouvez les personnaliser en utilisant n'importe lequel des constructeurs de pages WordPress les plus populaires.
Vous avez la possibilité d'effectuer des tests A/B sur les différents entonnoirs, pages de vente et offres de vente incitative.
FunnelKit vous fournit des analyses détaillées sur chaque étape de votre entonnoir WooCommerce.
Il est également livré avec un puissant addon d'automatisation du marketing, FunnelKit Automations, qui vous permet de personnaliser les emails de WooCommerce, d'envoyer des notifications par email dans WooCommerce en cas d'abandon de panier, de créer des séries de bienvenue, et bien plus encore.
Si vous voulez vraiment développer votre boutique WooCommerce, c'est l'un des outils indispensables que nous vous recommandons.
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 des meilleurs plugins WooCommerce, et notre guide ultime sur la façon de résoudre le problème de WordPress qui n'envoie pas d'email.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
