Comment ajouter un popup sur WooCommerce
Publié: 2021-12-22Ce guide couvre tout ce que vous devez savoir pour créer des popups WooCommerce sur votre boutique, même sans expérience préalable.
Outre la configuration, vous trouverez des conseils liés à la conversion pour vous aider à obtenir plus de prospects et de ventes avec les popups WooCommerce.
Dans cet article, nous couvrons :
- Avantages des popups WooCommerce
- Étapes pour créer un popup WooCommerce
Pourquoi utiliser les popups WooCommerce ?
Vous avez vu des popups sur de nombreuses boutiques en ligne. Vous êtes-vous déjà demandé pourquoi les entreprises les utilisent malgré leur réputation de distraction ?
La raison est simple : les popups convertissent le trafic du site Web en ventes.
Ils peuvent être une source stable de nouveaux prospects dans votre liste de diffusion. En outre, les popups peuvent promouvoir efficacement les ventes, recueillir les commentaires des clients et générer du trafic vers des pages spécifiques de votre site Web.
Et si vous les concevez de la bonne manière, vos visiteurs les apprécieront réellement .
Mais ne vous contentez pas de me croire sur parole -
Ben, dont l'histoire à succès avec les popups , a beaucoup de précieux plats à emporter, avait ceci à dire à leur sujet.

Faguo, une autre entreprise qui aime les popups, capture plus de 5 000 nouveaux e-mails avec des campagnes popup.
Je peux continuer mais -
Ajoutons plutôt une fenêtre contextuelle WooCommerce à votre boutique.
Comment créer une fenêtre contextuelle WooCommerce
Prêt? Suivez simplement ces étapes pour ajouter des popups à votre site Web WooCommerce.
Étape 1 : Obtenez un compte Wisepops gratuit
Pour créer un popup WooCommerce, nous avons besoin d'une application.
Notre choix de prédilection est évidemment Wisepops . La première étape : créez un compte Wisepops et connectez-le à votre boutique WooCommerce.
Créez un compte Wisepops gratuit en utilisant la connexion Google ou l'option de connexion traditionnelle. Suivez les étapes simples de la courte vidéo ci-dessous pour vous inscrire à un essai gratuit.
Ne vous inquiétez pas, vous n'aurez pas besoin d'ajouter les détails de votre carte de crédit. Vous essayez Wisepops 100 % gratuitement et sans engagement ; nous voulons que tout le monde fasse l'expérience de la valeur de notre produit.
| Vous préférez les plugins pour l'installation d'applications ? Essayez le plugin Wisepops sur WooCommerce. ● Facile à utiliser ● Mises à jour régulières ● Note 5 étoiles des utilisateurs | ![]() |
Étape 2 : Ajoutez le code de configuration à votre boutique
Il est maintenant temps de connecter votre boutique WooCommerce et Wisepops.
C'est facile.
Cliquez sur le bouton Obtenir mon code de configuration en haut du tableau de bord.

Le bouton affichera le code à copier.
Cliquez sur le bouton Copier et ajoutez le code de configuration conformément aux instructions. La seule exigence - placez le code à la fin du code HTML de la page de votre site Web, juste avant la balise </body>.

| Pour obtenir de l'aide sur l'ajout du code, consultez cet article : Intégrer le code de configuration Wisepops [Centre d'aide Wisepops] |
Une fois l'inscription effectuée, Wisepops vous amènera à votre tableau de bord. C'est là que vous gérerez les campagnes. Un centre d'opérations, si vous voulez.
Étape 3 : Créer une campagne popup
Maintenant, créons votre premier popup WooCommerce.
Je recommande de créer une fenêtre contextuelle de coupon de réduction. Les remises sont une motivation majeure pour les clients à acheter, nous pouvons donc essayer de réaliser des ventes rapides tout en développant notre audience.
Pour commencer à créer une campagne –
Cliquez sur Nouvelle campagne dans le tableau de bord.

À partir de là, Wisepops vous demandera de choisir la manière de construire la campagne.
Allons-y avec Campaign Assistant - c'est une option conviviale pour les débutants.

Étape 4 : Sélectionnez votre objectif
Ensuite, Wisepops vous demandera pourquoi vous souhaitez utiliser cette fenêtre contextuelle WooCommerce.
Vous pouvez choisir parmi plusieurs options, mais allons-y avec Développer votre audience . Nous allons créer une fenêtre contextuelle avec un coupon pour créer une liste de diffusion et générer des ventes.

Ensuite, choisissez Coupon dans le menu qui apparaît.

| Noter: Découvrez les nombreux objectifs de ce menu : inscriptions sur les réseaux sociaux, cadeaux, inscriptions à la newsletter, rappels, invitations à des webinaires... Nous ne choisissons qu'une seule option, mais vous devriez explorer les nombreuses autres options et modèles une fois que vous êtes confiant. |
Étape 5 : Choisissez un modèle
Maintenant, nous choisissons un modèle pour votre popup WooCommerce.
Et Wisepops a beaucoup de choix.
J'opterai pour le deuxième modèle - ce popup est conçu pour attirer l'attention des visiteurs sur notre offre généreuse. C'est ici.

| Choisir le meilleur format de popup WooCommerce ? Utilisez notre outil de prévisualisation des popups pour voir à quoi ressembleront les popups sur votre boutique WooCommerce en quelques secondes. |
Étape 6 : Personnalisez le modèle
Nos clients adorent Wisepops car il leur permet de modifier chaque élément de leurs popups. Ce faisant, ils créent des popups incroyables qui ressemblent à des extensions naturelles de leurs sites Web.
Voici une citation d'un client satisfait, Martin de Faguo.


En effet, les expériences de génération de leads peuvent être extrêmement utiles (reprenez Martin – ses expériences ont généré un CTR impressionnant de 15 % ), il est donc indispensable de savoir comment personnaliser vos popups.
C'est exactement ce que nous allons apprendre maintenant.
Une fois que vous avez choisi le modèle, Wisepops vous redirigera vers l'éditeur de campagne. Là, vous verrez le modèle, prêt à jouer avec.
Voici à quoi ressemble sa version originale.

À l'intérieur de l'éditeur de campagne, vous verrez le menu principal avec cinq sections : Popup, Blocks, Tab, JS et Display . Nous allons personnaliser notre popup WooCommerce en cliquant sur les éléments que nous voulons modifier - c'est super facile.

Faisons ces personnalisations :
- Remplacez le titre par "Que diriez-vous de 20 $ de réduction ?"
- Le texte principal à "Obtenez 20 $ de réduction sur votre commande si vous vous inscrivez maintenant."
- Changer la couleur du bouton CTA du rouge au noir
- Augmentez la taille de la police du titre à 40 pixels
- Ajouter une image originale
Je vais commencer par cliquer sur le titre. Ensuite, je clique sur le bouton Modifier qui apparaît immédiatement. Le texte du titre sera automatiquement sélectionné comme ceci, donc je peux commencer à taper la nouvelle version.

Donc, je vais faire la même chose pour le texte principal, aussi.
Pour augmenter la police, j'irai dans le sélecteur de taille qui apparaît au-dessus du modèle une fois que j'aurai cliqué sur un élément textuel.

Ensuite, pour ajouter une image originale, cliquez sur celle par défaut. Wisepops ouvrira automatiquement les paramètres d'image à votre gauche.
Cliquez sur le bouton Remplacer et choisissez une image sur votre ordinateur (j'utilise une photo d'Arno Senoner téléchargée sur Unsplash).

Et la dernière personnalisation :
Cliquez sur le bouton CTA pour révéler les paramètres de personnalisation. Dans la partie supérieure de l'éditeur, localisez les paramètres de couleur (juste après le sélecteur de taille).
Choisissez le noir dans Couleur de fond .

Une fois que j'ai terminé, le modèle ressemblera à ceci. C'est mieux, d'accord ?

Une seule grande question demeure :
Que se passe-t-il lorsque les visiteurs cliquent sur Obtenir mon coupon ?
Dans ce cas, Wisepops affichera une fenêtre contextuelle de remerciement avec le code de coupon. Cliquez sur MERCI pour voir cette fenêtre contextuelle.

Nous pouvons laisser le texte tel quel. Mais assurez-vous de changer le coupon lui-même - il indique FIVEOFF par défaut.
Nous pouvons faire d'autres personnalisations intéressantes pour votre popup WooCommerce. Mais laissons la conception pour l'instant et passons à l'étape suivante.
N'oubliez pas que vous pouvez tout modifier - il vous suffit de cliquer sur un élément individuel pour effectuer des ajustements.
| Voici quelques inspirations de conception pour vos popups WooCommerce : Exemples de pop-up d'e-mail Superbes exemples de conception de popup Exit-Intent Popup Exemples [+Conseils de conception] |
Étape 7 : Choisissez quand afficher la fenêtre contextuelle
Faisons-en une fenêtre contextuelle d'intention de sortie .
Cela signifie que la campagne sera affichée lorsque les visiteurs sont sur le point de quitter votre magasin. J'ai choisi celui-ci car il surpasse de 5% les popups "traditionnels".
Pour configurer le timing -
Accédez à la section Déclencheur dans l'option Afficher le menu principal.
Là, choisissez À la sortie .

La campagne est presque terminée.
Enregistrez votre campagne en cliquant sur Enregistrer dans le coin supérieur droit de votre écran.

| En savoir plus sur les fenêtres contextuelles d'intention de sortie : Guide simple pour les fenêtres contextuelles d'intention de sortie Option contextuelle à la sortie [Centre d'aide Wisepops] |
Étape 8 : Activez votre campagne
Nous y sommes presque.
Cliquez sur le logo Wisepops dans le coin supérieur gauche pour accéder au tableau de bord. Là, assurez-vous que vous êtes dans l'onglet Campagnes .

Ensuite, activez l'interrupteur à bascule pour activer votre première campagne contextuelle WooCommerce.
Vous êtes prêt !

| Vous souhaitez collecter des numéros de téléphone au lieu d'e-mails ? Consultez ce guide : 12 exemples de fenêtres contextuelles SMS [+ Comment les créer] |
Prochaines étapes
Avoir une fenêtre contextuelle WooCommerce sur votre boutique est un excellent moyen de collecter des e-mails et de générer des ventes. Nos clients ont même signalé des taux de clics atteignant 17 %, ce qui signifie que plusieurs milliers de nouveaux prospects ont été ajoutés à la liste de diffusion chaque mois.
Maintenant que nous avons appris à créer une fenêtre contextuelle WooCommerce, il ne vous reste plus qu'à suivre et à améliorer votre campagne. Mais ne vous arrêtez pas là, expérimentez les différentes façons de convertir votre trafic (coupons, livraison gratuite, accès anticipé aux soldes, etc.).
Nous avons des guides pour vous aider dans chaque scénario :
- Comment utiliser les popups pour B manque Friday Marketing
- Meilleures pratiques de popup pour générer plus de prospects et de ventes
- Comment augmenter l'engagement des visiteurs pour les magasins de commerce électronique
Si vous avez besoin d'aide avec vos popups, consultez le centre d'aide Wisepops ou envoyez un message à l'équipe du service client à l'aide de la fonction de chat de l'application.

