Comment créer des formulaires WooCommerce Lucky Wheel Optin avec Divi

Chaque semaine, nous vous proposons de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l'un des packs de mise en page, nous partageons également un cas d'utilisation qui vous aidera à faire passer votre site Web au niveau supérieur.

Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment créer des formulaires d'option de roue chanceux WooCommerce avec Divi et le plugin WP Optin Wheel. Ce tutoriel vous aidera, espérons-le, à augmenter les taux de conversion des formulaires optin. La fonction de gamification du formulaire Lucky Wheel optin vous permettra d'interagir avec les visiteurs et de les récompenser avec un code de réduction qu'ils pourront utiliser sur leurs achats en ligne.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Installer WooCommerce

Rechercher un plug-in et installer

La première chose que vous devrez faire si vous ne l'avez pas déjà fait est d'installer WooCommerce sur votre site WordPress. Nous supposons également que vous avez configuré le pack de disposition de quincaillerie sur le site Web Divi sur lequel vous travaillez.

Accédez à vos plugins et recherchez WooCommerce. Une fois que vous l'avez trouvé, cliquez sur le bouton « Installer maintenant ».

Activer

Assurez-vous d'activer le plugin WooCommerce immédiatement.

Configurer WooCommerce

Ensuite, WooCommerce vous redirigera automatiquement vers son formulaire de configuration. Ici, vous devrez remplir tous les détails pour préparer votre magasin à être mis en ligne. Une fois ce processus terminé, toutes les pages WooCommerce nécessaires seront automatiquement ajoutées à votre site Web.

Installer le plugin WP Optin Wheel

Rechercher un plug-in et installer

Pour créer le formulaire Lucky Wheel optin, nous allons utiliser un plugin de gamification gratuit appelé WP Optin Wheel. Revenez à vos plugins et recherchez le plugin WP Optin Wheel. Ensuite, cliquez sur le bouton « Installer maintenant ».

Activer

Continuez en activant le plugin.

Ajouter des produits à WooCommerce

Ajouter un nouveau produit

Si vous exploitez déjà un site Web de commerce électronique, vous pouvez ignorer cette partie. Cependant, si vous essayez simplement des choses, nous vous recommandons d'ajouter des produits à votre plugin WooCommerce. Cela vous aidera à tester le formulaire d'option de roue chanceux par la suite. Pour ajouter un nouveau produit, accédez à Produits > Ajouter un nouveau .

Ajouter des détails sur le produit

Remplissez tous les détails du produit. Cela inclut, mais sans s'y limiter, un nom de produit, une description, une image vedette, un prix et une catégorie. Publiez la page du produit une fois que vous avez terminé d'ajouter ces détails.

Répétez pour chaque produit

Répétez la même étape pour chacun des produits que vous souhaitez ajouter à votre site Web.

Ajouter des coupons à WooCommerce

Aller à Coupons

Il est maintenant temps d'ajouter des coupons. Plus tard dans cet article, nous utiliserons les coupons que nous créons dans le formulaire d'option de la roue chanceuse. Accédez à votre tableau de bord WordPress > WooCommerce > Coupons . Une fois que vous y êtes, allez-y et commencez à créer votre premier coupon.

Ajouter le coupon n°1 : 5 % de réduction

Général

Dans la roue porte-bonheur de 12 tranches, vous pouvez décider combien de tranches comprennent un prix. Vous pouvez, par exemple, offrir 4 prix, et créer un coupon différent pour chacun d'eux. Vous pouvez également utiliser un coupon pour plusieurs emplacements sur la roue. Une fois que vous avez créé votre premier coupon, allez-y et entrez le code du coupon en haut de la page. Ensuite, modifiez les paramètres généraux :

• Type de remise : Remise en pourcentage
• Montant du coupon : 5
• Date d'expiration du coupon : saisissez la date de votre choix

Restrictions d'utilisation

Continuez en basculant vers les onglets de restriction d'utilisation. Ici, vous pouvez décider s'il y a des dépenses minimales et maximales liées au coupon. Vous pouvez également cocher les cases suivantes :

• Cochez cette case si le coupon ne peut pas être utilisé avec d'autres coupons.
• Cochez cette case si le coupon ne doit pas s'appliquer aux articles en solde. Les coupons par article ne fonctionneront que si l'article n'est pas en vente. Les coupons par panier ne fonctionneront que s'il y a des articles dans le panier qui ne sont pas en vente.

Répétez les étapes pour 3 autres coupons

Créez autant de coupons que vous le souhaitez en suivant les mêmes étapes que celles mentionnées ci-dessus. Vous n'êtes pas limité à offrir un pourcentage de remise. Vous pouvez également créer un coupon qui offre un panier fixe ou une remise sur un produit et l'inclure dans la roue porte-bonheur.

Créer un formulaire Lucky Wheel Optin

Allez dans les paramètres du plugin

Maintenant que nous avons suivi toutes les étapes nécessaires pour faire fonctionner le formulaire d'option de roue chanceuse, nous pouvons commencer à en créer un ! Accédez à votre tableau de bord WordPress > WP Optin Wheel .

Ajouter une clé API MailChimp

Avant de pouvoir commencer à créer une roue porte-bonheur, vous devrez ajouter votre clé API MailChimp. La version gratuite du plugin WP Wheel Optin n'offre qu'une intégration avec MailChimp. Si vous souhaitez lier la roue porte-bonheur à un autre fournisseur, vous devrez passer à la version premium.

Créer une nouvelle roue

Choisissez le thème

Commençons à créer la roue ! Choisissez une palette de couleurs de votre choix. Pour ce tutoriel, nous choisissons l'orange car il va bien avec la palette de couleurs du Hardware Store Layout Pack.

Chances d'installation

La prochaine étape dans la création de votre formulaire d'option de roue chanceuse consiste à choisir un pourcentage de changement gagnant. Ce pourcentage indique à quelle fréquence les gens gagnent quelque chose en faisant tourner la roue. Dans ce cas, chaque visiteur qui fait tourner la roue a 70% de chances de gagner un code promo.

Configurer les tranches

Continuez en mettant en place les 12 tranches différentes. Vous pouvez dédier chacune des tranches à l'une des trois options suivantes :

• Pas de prix : le visiteur ne gagne rien
• Code promo : le visiteur gagne un code promo
• Lien : les visiteurs gagnent un ebook, par exemple

Dans cet exemple, nous utilisons 4 des 12 tranches pour ajouter un code promo. Nous définissons également les chances pour chacune de ces tranches individuellement.

Générateur de formulaires de configuration

L'étape suivante vous aide à créer le formulaire optin lui-même. Vous remarquerez qu'il y a déjà un champ e-mail là-bas. Le seul autre type de champ que vous pouvez ajouter au formulaire d'adhésion est une case à cocher. Ils ont spécifiquement ajouté ce type de champ pour rendre le formulaire conforme au RGPD.

Paramètres de contenu

En continuant, vous pourrez configurer le contenu écrit du formulaire d'option de la roue chanceuse. Allez-y et modifiez tout le contenu pour le faire correspondre à votre site Web.

Paramètres de conception

Ouvrez ensuite les paramètres de conception et choisissez « Aucun motif » pour l'option de motif d'arrière-plan.

Paramètres de comportement

Vous pouvez également choisir quand le formulaire d'option de roue chanceuse apparaît dans les paramètres de comportement.

RGPD

Enfin, vous pouvez vous assurer que les données que les visiteurs partagent ne sont pas enregistrées à moins qu'ils n'aient coché les différentes cases de votre formulaire d'adhésion et que vous ayez terminé ! Enregistrez le formulaire d'option de la roue chanceuse et accédez à votre site Web pour le tester.

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Dernières pensées

Ce tutoriel fait partie de notre initiative de conception Divi en cours où nous essayons de mettre quelque chose de plus dans votre boîte à outils chaque semaine. Nous espérons que ce didacticiel vous aidera à créer vos listes de diffusion plus rapidement et de manière interactive. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!