Dernière mise à jour – 11 mai 2022
WooCommerce est, sans aucun doute, l’un des systèmes de commerce électronique open-source les plus populaires disponibles aujourd’hui. Il présente toutefois quelques restrictions et inconvénients, comme tout autre logiciel.
Si vous êtes un utilisateur de WooCommerce, vous avez probablement pensé au processus fastidieux de la page de connexion et d’enregistrement de WordPress, ainsi qu’à la page qui est assez terne. De ce fait, il est tout à fait possible que votre site de commerce électronique ne paraisse pas professionnel.
Dans cet article, je vous montrerai comment concevoir et créer rapidement et sans trop d’efforts des pages de connexion et d’enregistrement qui fonctionnent à la fois avec le commerce électronique et WordPress standard.
Vue d’ensemble
- Facteurs qui prescrivent la nécessité de personnaliser le formulaire de connexion de WooCommerce
- Personnalisation avec le plugin User Registration
- Personnalisation de la page de connexion à l’aide d’Elementor
- Plugins supplémentaires pour personnaliser la page de connexion
Facteurs qui prescrivent la nécessité de personnaliser le formulaire de connexion WooCommerce
Voici quelques raisons pour lesquelles vous devriez modifier votre page de connexion et d’enregistrement WooCommerce :
Options de champ limitées : Le formulaire d’enregistrement de connexion WooCommerce se présente sous la forme d’un formulaire standard avec suffisamment de champs pour vous permettre de créer un compte. Cependant, si vous souhaitez ajouter des champs supplémentaires, tels que des cases à cocher, des menus déroulants, des adresses de facturation et d’expédition, etc, vous ne pourrez pas le faire par défaut. Ces champs ne pourront pas être affichés en cas de besoin ou de demande.
Pages de connexion et d’inscription séparées : Il s’agit d’une fonctionnalité par défaut, dans laquelle les formulaires de connexion et d’enregistrement de WooCommerce sont affichés sur la même page. De plus, des pages spécifiques pour les formulaires de connexion et d’enregistrement ne peuvent pas être construites, même si elles sont très utiles. Une façon de contourner ce problème est d’utiliser du code ou un plugin.
Limitations en matière de conception : WooCommerce ne vous permet pas de modifier l’apparence visuelle des formulaires de connexion et d’inscription par défaut, même si elle est terne, monotone et peu attrayante. De ce fait, il n’est pas possible d’utiliser plusieurs couleurs, types de police ou bordures sur le formulaire, même par défaut.
Quelle est la solution ? Nous allons vous montrer ici trois façons de personnaliser la page de connexion.
Personnalisation avec le plugin User Registration
Un plugin WordPress est la méthode la plus simple pour personnaliser votre page de connexion WooCommerce.
Nous comprenons combien il est difficile de trouver le plugin idéal, à la fois simple à utiliser et personnalisable, pour votre page Mon compte WooCommerce
À cet effet, nous vous suggérons le plugin User Registration, un plugin WordPress qui se concentre sur l’amélioration de l’efficacité des formulaires de connexion et d’inscription de votre site Web. Il inclut une interface simple de type glisser-déposer qui permet même à un novice, sans expérience de codage, de pouvoir le personnaliser.
Commencez par installer et activer le plugin. Allez dans votre tableau de bord WordPress et cliquez sur Plugin > Add New > recherchez User Registration dans le panneau de recherche. Cliquez sur Installer et ensuite Activer une fois que vous avez trouvé le plugin.
Cela ouvre un assistant d’installation pour le plugin qui vous guide tout au long du processus. Vous pouvez soit sauter les étapes, soit les suivre
Il crée et installe toutes les pages nécessaires, et les autres étapes vous permettent de personnaliser le style et les champs de la page de connexion.
Une fois que vous avez terminé ce processus, vous pouvez accéder au plugin en allant dans le tableau de bord et en cliquant sur « User Registration ». Cela ouvre une fenêtre dans laquelle vous pouvez personnaliser tous les aspects de votre page de connexion et d’enregistrement.
Maintenant que nous avons tout configuré, regardons rapidement le plugin en action.
Sur le formulaire, deux champs par défaut ont déjà été ajoutés
- Email de l’utilisateur
- Mot de passe de l’utilisateur
Vous pouvez les conserver ou vous en débarrasser. Cliquez sur le bouton Ajouter nouveau pour créer un nouveau champ. Ensuite, dans le panneau de gauche, faites glisser et déposez les champs WooCommerce que vous souhaitez sur le côté droit. Vous pouvez générer autant de champs que vous le souhaitez. N’oubliez pas de donner un nom à votre formulaire.
Si vous le souhaitez, vous pouvez facilement supprimer les champs. Déplacez simplement votre curseur sur le champ et choisissez « Trash ». Une fenêtre pop-up s’ouvre ; choisissez Supprimer. Vous pouvez cloner le champ de la même manière.
Champs du formulaire et paramètres du formulaire
Maintenant que vous avez ajouté les informations essentielles, configurons les champs et les paramètres du formulaire. L’onglet Champs du formulaire est situé à côté de l’onglet Champs. Vous pouvez personnaliser les paramètres suivants.
Paramètres généraux
-
- Label :
Ajoutez du texte à l’étiquette du champ de formulaire.
-
- Description :
Ajoute une description aux champs du formulaire.
-
- Nom du champ :
Ajoute un nom de champ à la liste.
-
- Espace réservé :
Remplissez le texte de remplacement pour le champ.
-
- Masquer l’étiquette :
Cette option sera masquée si elle est activée.
- Obligatoire :
Si tous les champs obligatoires ne sont pas remplis, l’utilisateur ne pourra pas soumettre le formulaire.
Comme pour les champs du formulaire, les paramètres du formulaire vous offrent des fonctionnalités étendues. Les paramètres sont faciles à comprendre. Une fois que vous avez terminé la personnalisation, cliquez sur le bouton Créer un formulaire en haut à droite
Une fois que vous avez créé le formulaire, copiez le code court. Créez une nouvelle page Mon compte, collez le code court sur cette page et publiez. Faites-en la page Mon compte par défaut.
Allez maintenant dans l’onglet Avancé sous WooCommerce > Paramètres. Dans l’option Page Mon compte, sélectionnez la nouvelle page Mon compte et enregistrez les modifications.
Remplacer le login WooCommerce par défaut
Vous devrez remplacer votre nouveau formulaire de connexion et d’inscription WooCommerce par le formulaire WooCommerce par défaut après l’avoir généré et modifié. Tout ce que vous avez à faire est d’aller dans WooCommerce > Paramètres et d’apporter les modifications nécessaires.
Sélectionnez Comptes et confidentialité dans le menu déroulant. Cochez l’option « Autoriser les clients à créer un compte » sur la page « Mon compte » sous la colonne Création de compte, puis enregistrez les modifications.
Sélectionnez maintenant l’onglet WooCommerce dans l’option Enregistrement des utilisateurs > Paramètres. Dans le menu déroulant, choisissez le formulaire d’inscription que nous avons créé précédemment. D’autres champs s’affichent ci-dessous lorsque vous choisissez le formulaire. Activez l’option « Cliquez sur cette option pour remplacer la page d’enregistrement » dans le menu. Lorsque vous activez cette option, elle remplacera les formulaires d’inscription et de connexion par défaut de WooCommerce. Enfin, cliquez sur le bouton Enregistrer les modifications.
Passons maintenant à la personnalisation de la page de connexion
Le plugin User Registration propose des modules complémentaires pour des fonctionnalités étendues, comme le Style Customizer, mais cela nécessite une mise à niveau vers User Registration Pro. Pour le bien des nouveaux utilisateurs qui ne sont pas sûrs de dépenser tout de suite, nous allons continuer à utiliser Elementor.
Personnalisation de la page de connexion à l’aide d’Elementor
Commencez par installer et activer Elementor sur votre WordPress. Une fois que vous l’avez activé, allez dans votre tableau de bord WordPress > Pages et sélectionnez la page de connexion que nous avons créée dans les étapes précédentes avec le shortcode du formulaire de connexion/d’enregistrement et cliquez sur » Modifier avec Elementor « .
Le constructeur de pages Elementor s’ouvrira, vous permettant de personnaliser la page de connexion/mon compte. Puisque nous avons déjà personnalisé le formulaire de connexion/d’inscription, vous devez personnaliser l’arrière-plan de cette page à votre convenance.
Cette section dépend de la créativité de l’utilisateur, car les changements d’arrière-plan, ainsi que tout autre changement, dépendent de l’esthétique de votre site Web. Avoir Elementor pro vous donnera une longueur d’avance car il vous fournira des outils supplémentaires à utiliser. Vous pouvez ajouter une tonne de personnalisations à votre page de connexion/enregistrement nouvellement créée, telles que
- Ajouter un nouvel arrière-plan.
- Modifier la couleur de l’arrière-plan, des textes et des boutons.
- Ajouter de nouvelles images et des bordures pour les images, ainsi que la couleur des bordures.
- Personnalisez la taille des images, des textes et des boutons.
- Ajoutez de nouveaux boutons sous forme de widgets à glisser-déposer.
- Personnalisez l’animation des boutons, des textes et des images.
- Personnalisez le format de la page et bien plus encore.
Pour comprendre en détail comment utiliser Elementor à son plein potentiel, consultez le tutoriel complet sur le constructeur de pages Elementor (avec vidéo).
Plugins supplémentaires pour personnaliser la page de connexion
La possibilité de modifier et de configurer à la fois les pages de connexion et d’enregistrement est l’une des demandes les plus populaires des utilisateurs de WooCommerce. De nombreux utilisateurs voudraient avoir la possibilité de diviser ces pages plutôt que de les avoir toutes sur une seule page. Une autre question est celle de la connexion sociale, qui est un aspect très important dans le monde actuel de l’Internet. La connexion sociale est une fonction qui permet à un site Web d’utiliser des informations de connexion telles que des identifiants de messagerie pour remplir automatiquement des données sur un autre site Web.
Indépendamment des problèmes liés à la personnalisation de la page de connexion, il existe des plugins qui peuvent aider à résoudre ces problèmes. Le fait que nous devions dépendre de plugins est dû au fait que WooCommerce en lui-même ne vous permet pas de personnaliser la page de connexion/mon compte.
Vous trouverez ci-dessous une liste de plugins supplémentaires qui peuvent vous aider à résoudre ce problème :
Le plugin WooCommerce Login / Signup Lite est une option gratuite, avec une version premium disponible. Cependant, pour nos besoins, la version gratuite devrait être suffisante. Il est assez simple à utiliser. Vous serez en mesure de développer des shortcodes qui correspondent au type de formulaire dont vous avez besoin après son installation. Ensuite, vous pouvez coller le code court sur la page de votre choix.
Au lieu de formulaires sur la page, le plugin vous permet de générer des formulaires de connexion popup qui peuvent être activés par un lien ou un bouton sur votre site Web. Les fenêtres contextuelles sont utiles car elles conservent de l’espace sur la page et permettent aux utilisateurs de se connecter à partir de n’importe quel endroit du site sans être redirigés vers une page de connexion ou d’inscription distincte.
- WooCommerce Social login :
Ce plugin permet à vos clients de se connecter à votre site en utilisant n’importe lequel de leurs comptes de réseaux sociaux populaires, tels que Twitter, Facebook, LinkedIn, Google, Amazon, etc. Toutes les plateformes de médias sociaux sont prises en charge par ce plugin. De plus, vos consommateurs peuvent facilement utiliser leurs identifiants de connexion existants sur ces plateformes plutôt que d’établir de nouveaux identifiants. En outre, vos clients existants seront en mesure de lier leurs profils de médias sociaux à leurs comptes sans trop de problèmes
Nextend est un plugin gratuit qui vous permet d’ajouter une connexion aux réseaux sociaux sur votre site WordPress. Pour le faire fonctionner avec votre boutique WooCommerce, vous devrez utiliser le module complémentaire. Les clients seront en mesure de se connecter à votre boutique WooCommerce en utilisant leurs différents comptes de réseaux sociaux.
Conclusion
WooCommerce ne vous permet pas de modifier le formulaire de connexion par défaut de WordPress, ce qui pourrait entrer en conflit avec le style de votre site Web. Avec une interface personnalisée permettant aux clients de se connecter à leur compte WooCommerce, cela peut être une aide considérable pour attirer de nombreux clients sur votre site. De petites nuances comme celles-ci sont essentielles pour que votre boutique en ligne réussisse à attirer et à fidéliser les clients.
