Comment personnaliser les formulaires de connexion et d'inscription WooCommerce

Prêt à l'emploi, WooCommerce offre des options de personnalisation limitées pour les formulaires de connexion et d'inscription. Il est donc difficile pour les propriétaires de magasins d'offrir une bonne expérience utilisateur aux clients.

En plus de cela, vous êtes limité aux champs de paiement par défaut, ce qui signifie que vous ne pouvez pas recueillir d'informations supplémentaires auprès du client lors du paiement. Ce n'est pas idéal pour les magasins qui souhaitent donner aux clients la possibilité de sélectionner des dates de réservation, de saisir plusieurs adresses e-mail ou d'offrir des options d'emballage cadeau.

Une façon de surmonter cela consiste à utiliser un plugin robuste tel que ProfilePress qui vous permet de tout gérer en un seul endroit. Dans cet article, nous verrons comment vous pouvez personnaliser les formulaires de connexion et d'inscription WooCommerce à l'aide de ProfilePress.

Pourquoi personnaliser les formulaires de connexion et d'inscription WooCommerce ?

La personnalisation des formulaires de connexion et d'inscription à WooCommerce peut contribuer à rendre votre site Web plus convivial et à augmenter les conversions.

Les propriétaires de magasins peuvent avoir besoin de personnaliser les formulaires de connexion et d'inscription WooCommerce par défaut pour offrir une expérience personnalisée aux clients. En créant un formulaire de connexion et d'inscription exclusif, vous pouvez améliorer l'expérience client sur votre site et maximiser les inscriptions.

Vous pouvez également ajouter des champs personnalisés à la page de paiement de votre site WooCommerce afin de recueillir des informations supplémentaires auprès du client avant son paiement. Par exemple, vous pouvez laisser les clients ajouter leurs comptes de médias sociaux, leurs noms d'utilisateur ou afficher des informations supplémentaires sur les produits dans leur panier. Cela vous aide à offrir une expérience d'achat plus personnalisée à vos clients.

Remplacer la page par défaut "Mon compte" dans WooCommerce par une page personnalisée est un excellent moyen de faire ressortir votre boutique. Vous pouvez permettre aux clients de se connecter facilement à leurs comptes et de gérer leurs informations depuis un emplacement centralisé. Par exemple, ils peuvent se connecter, s'inscrire et personnaliser leurs comptes d'utilisateurs en téléchargeant des photos de profil, en modifiant des surnoms ou en ajoutant une biographie.

La personnalisation des formulaires de connexion et d'inscription à WooCommerce peut vous aider à offrir une expérience utilisateur améliorée sur votre boutique en ligne.

Personnalisation des formulaires de connexion et d'inscription à WooCommerce

En utilisant ProfilePress, il est facile de personnaliser les formulaires de connexion et d'inscription WooCommerce et de leur donner exactement l'apparence que vous souhaitez.

ProfilePress offre une solution tout-en-un pour créer des sites WordPress attrayants et propose des outils complets qui vous aident à contrôler qui a accès à votre contenu. Vous pouvez créer des profils utilisateur intuitifs ainsi que des formulaires d'inscription et de connexion attrayants à l'aide d'un générateur de glisser-déposer.

Pour cela, nous aurons besoin d'un site WordPress fonctionnel avec le plugin WooCommerce installé. Nous aurons également besoin du plugin ProfilePress pour créer des formulaires de connexion et d'inscription personnalisés.

Étape 1 : Installez et activez ProfilePress

Commencez par obtenir le plugin ProfilePress et installez-le sur votre site WordPress. Accédez à Plugins → Ajouter nouveau à l'aide du panneau d'administration WordPress et cliquez sur le bouton Ajouter nouveau . Téléchargez le fichier zip et installez le plugin sur votre site WordPress.

Étape 2 : Personnalisez les formulaires de connexion et d'inscription

La première chose que nous devons faire est de commencer à créer notre formulaire de connexion personnalisé à l'aide de ProfilePress. Pour ce faire, accédez à ProfilePress → Formulaires et profils et cliquez sur le bouton Ajouter un nouveau sous la section Connexion . Cliquez sur le Drag & Drop Builder et sélectionnez un modèle. Pour les besoins de cette démonstration, nous avons sélectionné le modèle Bash .

Une fois le modèle sélectionné, vous serez automatiquement redirigé vers la page Modifier le formulaire . Vous pouvez ajouter et déposer des champs dans l'ordre que vous préférez et modifier également les étiquettes de champ .

Vous pouvez également modifier les paramètres du formulaire et personnaliser l'apparence et les étiquettes des boutons sur le formulaire de connexion. Une fois que vous avez terminé, cliquez sur le bouton Enregistrer les modifications pour continuer. Nous devons maintenant créer une nouvelle page WordPress et ajouter le formulaire de connexion personnalisé à cette page en utilisant le shortcode personnalisé.

Accédez à Pages → Ajouter nouveau pour créer une nouvelle page et ajoutez le code abrégé du formulaire de connexion à la page. Cliquez sur le bouton Publier pour continuer.

Nous allons maintenant créer le formulaire d'inscription et l'ajouter à une nouvelle page WordPress. Pour ce faire, accédez à ProfilePress → Formulaires et profils et cliquez sur le bouton Ajouter un nouveau sous la section Inscription .

Donnez un titre à votre formulaire d'inscription et sélectionnez un modèle pour commencer à le personnaliser. Nous avons sélectionné le modèle Tulip . Vous serez automatiquement redirigé vers la page d' édition du formulaire .

Ici, vous pouvez ajouter ou supprimer des champs de votre formulaire d'inscription et modifier leur apparence sur le front-end. Une fois que vous avez terminé de personnaliser le formulaire d'inscription, cliquez sur le bouton Enregistrer les modifications pour continuer.

Pour créer une nouvelle page d'inscription WordPress, allez dans Pages → Ajouter nouveau et collez le shortcode du formulaire d'inscription. Cliquez sur le bouton Publier pour continuer.

Étape 3 : Affichez les formulaires de connexion et d'inscription sur le front-end

Rendez-vous sur ProfilePress → Paramètres et cliquez sur l'onglet Général . Ajoutez les pages de connexion et d'inscription personnalisées nouvellement créées à votre boutique à l'aide des menus déroulants et cliquez sur le bouton Enregistrer les modifications pour continuer.

Cela remplacera la page de connexion WordPress par défaut et tous les liens de connexion et d'inscription de WooCommerce par ceux de ProfilePress . Voici à quoi cela ressemble sur le front-end de votre site.

Étape #3.5 : Remplacer les formulaires de connexion et d'inscription WooCommerce

Pour remplacer les formulaires d'inscription et de connexion affichés sur la page Mon compte WooCommerce, accédez à Paramètres >> WooCommerce et sélectionnez les formulaires de connexion et d'inscription ProfilePress pour les remplacer.

Les utilisateurs pourront créer un compte sur votre site WooCommerce en utilisant le formulaire d'inscription personnalisé attrayant. Les utilisateurs déjà enregistrés peuvent se connecter à leur compte en utilisant le formulaire de connexion personnalisé que nous avons créé précédemment :

Étape 4 : Ajoutez des champs personnalisés à la page de paiement

Vous pouvez également ajouter des champs personnalisés à la page de paiement de votre boutique WooCommerce. Pour ce faire, accédez simplement à ProfilePress → Paramètres et cliquez sur l'onglet Champs personnalisés .

Cliquez sur le bouton Ajouter nouveau et définissez une étiquette de champ pour votre champ personnalisé. Après avoir défini la clé de champ et la description du champ, vous pouvez définir le type de champ en fonction de vos besoins.

Vous pouvez créer du texte, des mots de passe, un e-mail, un téléphone, des champs cachés, un numéro, une date, un pays, un téléchargement de fichier, des boutons radio, une case à cocher, des champs de zone de texte et les afficher sur la page de paiement de votre boutique WooCommerce.

Une fois que vous êtes prêt, cliquez sur le bouton Enregistrer les modifications pour continuer.

Ensuite, allez dans ProfilePress → Paramètres et cliquez sur l'onglet WooCommerce . Ajoutez les champs personnalisés dans la méta-boîte Champs d'inscription requis et cliquez sur le bouton Enregistrer les modifications pour continuer.

Les utilisateurs pourront voir les champs personnalisés sur la page d'inscription à la caisse lorsqu'ils passeront à la caisse de votre boutique en ligne

.

De plus, nous souhaitons également afficher le formulaire de connexion personnalisé sur la page de paiement et remplacer celui par défaut. Pour ce faire, accédez simplement à ProfilePress → Paramètres et cliquez sur l'onglet WooCommerce .

Sélectionnez le formulaire de connexion personnalisé à l'aide du menu déroulant à côté de Formulaire de connexion à la caisse et cliquez sur le bouton Enregistrer les modifications pour continuer. Cela remplacera le formulaire de connexion par défaut sur la page de paiement de votre site WooCommerce.

Bonus : Créez une page personnalisée WooCommerce « Mon compte »

La page "Mon compte" de WooCommerce permet aux visiteurs du site d'accéder à leur compte d'utilisateur directement depuis le front-end.

ProfilePress vous permet de créer une page "Mon compte" WooCommerce entièrement personnalisée où les utilisateurs peuvent facilement afficher leurs comptes d'utilisateurs et les modifier, le tout à partir d'une seule page. Pour ce faire, accédez à Profile Press → Forms & Profiles et cliquez sur le bouton Add New .

Donnez un nouveau nom à votre formulaire Modifier le profil et sélectionnez un modèle pour commencer la personnalisation. Nous avons sélectionné le modèle Pinnacle . Une fois que vous avez cliqué sur le bouton Sélectionner votre modèle , il vous redirigera automatiquement vers la page d' édition du formulaire .

Vous pouvez ajouter des champs et personnaliser l'apparence de votre formulaire sur le frontend de votre site WooCommerce. Une fois que vous avez terminé de personnaliser le formulaire « Mon compte », cliquez sur le bouton Enregistrer les modifications pour continuer.

Maintenant que nous avons créé le formulaire « Mon compte », nous devons créer une page WordPress pour pouvoir l'afficher sur votre site Web. Allez dans Pages → Ajouter nouveau et collez le shortcode Modifier le profil . Cliquez sur le bouton Publier une fois que vous avez terminé.

Et ci-dessous, un aperçu du formulaire de profil de modification personnalisé.

Ou vous pouvez simplement ignorer tout le processus et utiliser à la place le code abrégé ProfilePress My Account sur la page créée ci-dessus.

Les utilisateurs pourront modifier les informations de leur compte et cliquer sur le bouton Mettre à jour le profil pour apporter des modifications à leurs comptes d'utilisateurs directement depuis le front-end. La page servirait de nouvelle page Mon compte.

Vous pouvez également permettre aux utilisateurs de voir leurs commandes, téléchargements, abonnements et leur adhésion en accédant à ProfilePress → Paramètres. Cliquez sur l'onglet WooCommerce et sélectionnez les onglets à afficher dans le paramètre Onglets de mon compte.

Conclusion

La personnalisation des formulaires de connexion et d'inscription WooCommerce sur votre site Web est un excellent moyen d'améliorer l'expérience client et d'encourager davantage d'utilisateurs à s'inscrire auprès de vous.

Bien que WordPress offre par défaut des fonctionnalités de personnalisation limitées pour les pages de connexion et d'inscription, vous pouvez utiliser un plug-in robuste, tel que ProfilePress, pour créer des pages personnalisées et améliorer l'expérience utilisateur de votre boutique en ligne.

Prêt à personnaliser les formulaires de connexion et d'inscription WooCommerce sur votre site Web ? Obtenez ProfilePress aujourd'hui !