Comment créer un formulaire d'inscription WooCommerce personnalisé

Publié: 2022-02-15

Vous souhaitez améliorer le processus d'enregistrement des clients de votre site WordPress ? Créer un formulaire d'inscription WooCommerce personnalisé est un pas dans la bonne direction.

Le plugin WooCommerce par défaut a un formulaire d'inscription mais ne collecte que des informations de base. Mais avec l'aide d'un plugin appelé ProfilePress, vous pouvez collecter plus d'informations auprès de l'utilisateur et réorganiser le formulaire pour le rendre convivial. Les informations recueillies via le formulaire peuvent être utilisées entre autres pour vos campagnes d'email marketing.

Dans cet article, nous allons vous montrer comment créer un formulaire d'inscription personnalisé et le remplacer par votre formulaire WooCommerce par défaut. Plongeons dedans.

Création d'un formulaire d'inscription WooCommerce personnalisé

Pour créer un formulaire d'inscription WooCommerce personnalisé, vous avez besoin d'un plugin appelé ProfilePress. Ci-dessous, nous vous montrerons comment configurer le plugin.

Étape 1 : Installer ProfilePress

Inscrivez-vous à ProfilePress et vous recevrez un reçu avec un lien pour télécharger le plugin ainsi qu'une clé de licence. Téléchargez et installez le plugin sur votre site WordPress. Entrez la clé de licence pour activer le plugin.

Étape 1.5 : Activer l'enregistrement WooCommerce

Allez dans WooCommerce->Paramètres de votre tableau de bord. Cliquez sur la section Confidentialité et comptes et cochez l'option Autoriser les clients à créer un compte sur la page "Mon compte" .

Étape 2 : Création d'un formulaire personnalisé avec ProfilePress

Vient maintenant la partie amusante. Sur votre tableau de bord WordPress, accédez à ProfilePress > Forms & Profiles > Registration > Add New .

Vous avez deux options pour créer un formulaire d'inscription personnalisé. Vous pouvez soit utiliser un modèle prédéfini, soit créer un formulaire à partir de zéro. Si vous ne savez pas comment coder et/ou ne voulez pas investir du temps dans la création d'un formulaire à partir de zéro, nous vous recommandons de choisir un modèle.

Sélectionnez le générateur de glisser-déposer.

Donnez un nom au formulaire, puis choisissez l'un des modèles prédéfinis. Pour les besoins de ce tutoriel, nous avons choisi Tulip . Sur la page suivante, vous pouvez personnaliser le formulaire selon vos besoins.

Ajout de champs personnalisés

Vous pouvez ajouter les champs personnalisés suivants au formulaire, y compris les champs de facturation et d'expédition WooCommerce à votre formulaire d'inscription.

  • Nom d'utilisateur
  • Adresse e-mail
  • Confirmez votre email
  • Mot de passe
  • Confirmez le mot de passe
  • Fiabilité du mot de passe
  • Pseudonyme du site Web
  • Afficher un nom
  • Prénom
  • Nom de famille
  • Télécharger une photo de profil
  • Télécharger la photo de couverture
  • Biographie
  • Sélectionnez un rôle
  • HTML personnalisé
  • reCAPTCHA

Voici un aperçu des champs personnalisés que nous choisissons pour notre formulaire d'inscription :

Générateur de formulaire d'inscription woocommerce personnalisé

Modification des paramètres de formulaire

ProfilePress vous permet de modifier l'apparence du formulaire, y compris. Cela signifie que vous pouvez créer un formulaire qui complète votre image de marque et votre style. Nous vous recommandons de passer quelques minutes à modifier l'apparence de votre formulaire.

Et avant de passer à l'étape suivante, assurez-vous d'aller dans Paramètres d'enregistrement et de choisir Client comme nouveau rôle d'utilisateur. Toute personne s'inscrivant à l'aide de ce formulaire personnalisé sera considérée comme un client.

Lorsque le formulaire est prêt, enregistrez les modifications. Il est maintenant temps d'afficher le nouveau formulaire d'inscription personnalisé sur votre site Web.

Étape 3 : Remplacer le formulaire d'inscription WooCommerce

Dans cette section, vous apprendrez à remplacer le formulaire d'inscription WooCommerce par défaut par le nouveau formulaire d'inscription personnalisé.

Accédez à ProfilePress > Paramètres > WooCommerce . Vous devriez voir une option appelée Formulaire d'inscription à mon compte . Dans le menu déroulant, sélectionnez le nouveau formulaire d'inscription que vous venez de créer et enregistrez le paramètre.

Si vous le souhaitez, vous pouvez utiliser ce formulaire comme page d'inscription par défaut pour votre site Web. Tout ce que vous avez à faire est d'aller dans ProfilePress > Paramètres > Général > Global . Ensuite, à partir de l'option Page d'inscription , sélectionnez la nouvelle page d'inscription personnalisée .

Il convient de noter que si jamais vous choisissez de créer une nouvelle page d'inscription, copiez le shortcode du formulaire, créez une nouvelle page, ajoutez le shortcode et publiez la page. Oui, c'est aussi simple que ça !

C'est tout, les amis ! C'est ainsi que vous créez un formulaire d'inscription WooCommerce personnalisé ! Lorsque vous prévisualisez votre page Mon compte WooCommerce, vous devriez voir le formulaire d'inscription s'afficher.

Formulaire d'inscription personnalisé WooCommerce

Maintenant que vous avez le formulaire d'inscription personnalisé, certains d'entre vous se demandent si vous pouvez également créer un formulaire de connexion personnalisé. Le processus de création d'un formulaire de connexion WooCommerce personnalisé est identique au processus de création d'un formulaire d'inscription personnalisé. Nous vous montrerons rapidement les étapes dans la section suivante.

Comment créer un formulaire de connexion WooCommerce personnalisé

Pour créer un formulaire de connexion WooCommerce personnalisé, accédez à ProfilePress > Forms & Profiles > Login > Add New .

Sélectionnez le générateur glisser-déposer . Donnez un nom au formulaire, puis choisissez l'un des modèles prédéfinis .

Ensuite, ajoutez des champs personnalisés et modifiez l'apparence du formulaire selon vos besoins.

Et enfin, pour remplacer le formulaire de connexion WooCommerce par défaut par le nouveau formulaire personnalisé, accédez à ProfilePress > Paramètres > WooCommerce > Formulaire de connexion à mon compte et sélectionnez le nouveau formulaire de connexion .

Si vous souhaitez faire du nouveau formulaire de connexion votre formulaire de connexion par défaut pour l'ensemble de votre site Web, accédez à ProfilePress > Paramètres > Général > Global . Ensuite, à partir de l'option Page de connexion , sélectionnez le nouveau formulaire de connexion personnalisé .

Voici à quoi ressemblera la page de connexion personnalisée sur notre site Web :

Connexion personnalisée WooCommerce

Avec cela, vous savez maintenant comment créer un formulaire de connexion WooCommerce personnalisé.

Si vous remplacez les formulaires d'inscription et de connexion par défaut dans la page Mon compte par des formulaires personnalisés de ProfilePress, voici à quoi cela pourrait ressembler sur votre site.

Dans n'importe quel magasin WooCommerce, outre le formulaire d'inscription et de connexion, il existe un autre formulaire important que les visiteurs utilisent souvent - le formulaire de paiement. Dans la suite, nous verrons pourquoi vous devriez envisager de personnaliser le formulaire de paiement et quelles sont exactement les étapes à suivre.

Ajout de champs d'inscription personnalisés à WooCommerce Checkout

L'ajout de champs personnalisés à la page de paiement est un excellent moyen de recueillir des informations supplémentaires auprès du client. Par exemple, vous pouvez laisser les clients ajouter leurs comptes de médias sociaux pour faciliter le processus d'inscription. Cela permet d'offrir une meilleure expérience client et de booster vos ventes.

Accédez à WooCommerce > Paramètres > Comptes et confidentialité et sélectionnez Autoriser les clients à créer un compte lors du paiement .

Ensuite, accédez à ProfilePress > Paramètres > Champs personnalisés . Vous devriez trouver un ou deux champs personnalisés disponibles sur cette page. Pour ajouter d'autres champs personnalisés, sélectionnez Ajouter nouveau .

ProfilePress prend en charge les types de champs personnalisés suivants :

  • Texte
  • Mot de passe
  • E-mail
  • Téléphone
  • Champ caché
  • Numéro
  • Date
  • Pays
  • Zone de texte
  • Case à cocher unique
  • Téléchargement de fichiers
  • Sélectionnez la liste déroulante
  • Boutons radio
  • Case à cocher

Lorsque vous avez créé tous les champs dont vous avez besoin, enregistrez les paramètres , puis accédez à ProfilePress > Paramètres > WooCommerce > Champs d'inscription à la caisse . Ajoutez les champs d'inscription que vous venez de créer.

Si vous souhaitez rendre les champs obligatoires, alors dans les Champs d'inscription requis , ajoutez les champs qui, selon vous, devraient être obligatoires.

N'oubliez pas d'enregistrer les modifications.

C'est ça. Vous avez maintenant un formulaire d'inscription à la caisse personnalisé.

Conclusion

La collecte d'informations sur les utilisateurs via une inscription ou un formulaire WooCommerce personnalisé peut vous aider à augmenter vos ventes. WooCommerce n'offre pas d'options pour ajouter des champs ou effectuer tout type de personnalisation à ses formulaires, vous avez donc besoin d'un plugin comme ProfilePress pour modifier les formulaires WooCommerce.

Cela dit, ProfilePress est plus qu'un simple générateur de formulaires. Il peut vous aider à gérer les profils des utilisateurs et les répertoires des membres. Cela peut vous aider à restreindre l'accès au contenu de votre site Web, entre autres. Essayez ProfilePress !

Si vous avez aimé notre guide, certains de nos autres guides WooCommerce pourraient vous être utiles. Jetez un œil à notre blog.