Créer des popups Elementor dans WooCommerce

Nous sommes tous de grands fans de WooCommerce. Il est simple à configurer et à personnaliser. Des fonctionnalités qui simplifient la création et la gestion d’une boutique de commerce électronique dynamique et puissante sont incluses dans le package.

Cependant, la création d’une page de commerce électronique réussie ne se limite pas à simplement ajouter des produits populaires. Toutes les pages doivent également être visuellement attrayantes. Plus votre site Web est visuellement attrayant et convivial, plus vous avez de chances d’attirer plus de clients.

• Configuration de la fenêtre popup
• Vous pouvez également créer des popups à l'aide du générateur visuel dans Elementor
• Préférences de publication

Bien que WooCommerce crée le panier et la page de paiement pour vous lorsque vous créez votre site, Elementor les rend plus attrayants en les personnalisant.

Vous avez la possibilité de les repenser ou de recommencer depuis le début. Vous pouvez répéter le processus pour toutes les autres pages de votre site Web.

En créant une page de remerciement chaleureuse et en mettant à jour vos pages Mon compte et Conditions d'utilisation, vous pouvez conquérir le cœur et l'esprit de vos clients.

La fonctionnalité glisser-déposer d'Elementor, combinée à ce didacticiel, vous garantira une expérience sans problème lors de la création de vos pages.

Après avoir configuré votre boutique wooCommerce, vous souhaiterez peut-être la rendre plus attrayante pour vos visiteurs et clients. L'ajout de popups donne à l'utilisateur une autre impression et une nouvelle envie de rester sur votre boutique.

 Pour créer une popup, accédez à Modèles > Popups dans la barre de menu. Une liste de toutes vos fenêtres contextuelles s'affichera, et si vous n'en avez pas encore créé une, vous verrez quelque chose de similaire à ce qui suit :

Une fois que vous avez cliqué sur AJOUTER UN NOUVEAU POPUP (ce qui est assez explicite), il vous sera demandé de lui donner un nom, puis de sélectionner un modèle parmi les amp prédéfinis affichés. Divers modèles sont disponibles à des fins multiples ; certains conviennent aux annonces, d'autres à la promotion d'une réduction, d'autres encore sont idéaux pour encourager les utilisateurs à s'inscrire à quelque chose. Il existe même amp pour avertir les utilisateurs de l'utilisation de cookies ou d'autres notifications RGPD. Dès que vous avez trouvé quelque chose que vous aimez, cliquez dessus pour voir un aperçu plus grand, puis appuyez sur le bouton Insérer.

Vous serez redirigé vers le générateur de fenêtres contextuelles dans le backend WordPress après avoir cliqué sur ce bouton.

Si vous avez déjà travaillé avec Elementor, vous vous sentirez comme chez vous avec l'interface, les options et la façon dont tout est présenté pour vous. C'est essentiellement le même processus que la création de modèles de pages Elementor dans WordPress.

Sur le côté droit de l'écran se trouve le canevas principal, qui affiche un aperçu de ce sur quoi vous travaillez actuellement. Vous pouvez modifier et personnaliser chaque élément individuellement en le sélectionnant et en sélectionnant Modifier > Modifier les éléments. Lorsque vous avez terminé, vous verrez les commandes et les préférences affichées dans la barre latérale à gauche, ainsi que l'option permettant de publier votre travail.

Configuration de la fenêtre popup

 C'est à ce moment-là que vous devriez voir un aperçu de votre popup – soit une ardoise vierge, soit le modèle que vous avez choisi.

Les paramètres contextuels, toujours ouverts par défaut, vous permettent de personnaliser le fonctionnement du canevas contextuel lui-même. Ils sont les suivants :

• C'est là que vous voudrez passer le plus de temps car c'est là que vous pourrez créer différents types de popups. Autrement dit, en ajustant ces paramètres, vous pourrez réaliser les effets suivants :

• Les popups modaux sont un type de fenêtre modale.
• Slide-ins, barres de notification, etc.

De plus, vous pouvez personnaliser plusieurs autres paramètres importants.

Les options suivantes sont disponibles dans l' Paramètres :

• Modifiez la hauteur et la largeur de l'image.
• Changer l'orientation verticale ou horizontale de l'objet (par amp , vous pouvez le fixer en haut ou en bas pour créer une barre de notification)
• Décidez d'utiliser ou non une superposition (cela vous permet, par amp , de griser l'arrière-plan lorsque le popup est actif)
• Désactivez le bouton de fermeture de votre navigateur.
• Incluez une animation pour l’entrée.

Vous pouvez effectuer les opérations suivantes dans l' onglet Style 

• Vous pouvez modifier la couleur d’arrière-plan, en faire un dégradé ou utiliser une image comme arrière-plan.
• Si la superposition est activée, configurez-la.
• Si le bouton de fermeture est activé, vous devez le configurer.

Enfin, l'onglet Avancé contient divers paramètres d'importation qui vous permettent d'effectuer des opérations telles que les suivantes :

• Affichez le bouton de fermeture ou faites en sorte que la fenêtre contextuelle se ferme automatiquement après un certain temps.
• En cliquant sur la superposition ou en appuyant sur la touche d'échappement, vous pouvez empêcher la fermeture de la fenêtre.

• Désactivez la possibilité de faire défiler la page.
• Évitez les popups multiples (si vous avez ciblé plusieurs popups sur la même page, cela évitera à vos visiteurs d'être ennuyés).

Pour vous donner une idée de la façon dont ces paramètres affecteront votre popup, voici à quoi cela ressemble lorsque vous modifiez la Position dans le coin inférieur droit de la fenêtre :

Jetez un œil à la façon dont la fenêtre contextuelle est désormais fixée de manière permanente dans le coin inférieur droit. En utilisant un déclencheur de défilement en conjonction avec une animation d’entrée, vous pouvez obtenir un effet slide-in agréable et discret.

Vous pouvez également créer des popups à l'aide du générateur visuel dans Elementor

Dès que vous avez terminé les paramètres de base des popups, vous pouvez commencer à concevoir le contenu réel de votre popup en faisant glisser et en déposant des éléments dans l'interface visuelle glisser-déposer.

Vous pouvez utiliser n'importe quel widget Elementor de votre choix, ce qui vous donne un grand contrôle sur la conception finale. Le widget Formulaire est la seule chose que vous devez absolument inclure car c'est le seul qui vous permet de créer votre formulaire d'inscription par courrier électronique.

Avec le widget Formulaire, vous avez un contrôle total sur les champs que vous souhaitez proposer, ainsi que sur le texte et l'apparence du bouton de soumission. Par amp :

Au-delà de cela, je vous conseille fortement de vous familiariser avec tous les widgets et options de conception d'Elementor.

Comme indiqué précédemment, vous avez un grand contrôle sur l’apparence de votre site Web et vous avez également accès à des widgets utiles qui peuvent vous aider à augmenter votre taux de conversion.

Préférences de publication

Lorsque vous serez satisfait de ce que vous avez créé, vous aurez envie de le partager avec le monde. Après avoir appuyé sur le bouton PUBLIER, une série de questions vous sera présentée. Pour illustrer:

Est-il possible de préciser les conditions dans lesquelles vous souhaitez que le popup apparaisse ? Vous pouvez choisir les pages à inclure ou à exclure de vos résultats de recherche. Vous pouvez avoir autant de conditions que vous le souhaitez.

Quel est alors l’événement qui provoque l’apparition de la fenêtre contextuelle ? Vous pouvez choisir d'afficher ou non la fenêtre contextuelle immédiatement lors du chargement de la page, lors du défilement ou lorsque l'utilisateur fait défiler vers un élément spécifique, entre autres possibilités. Toutes ces options ont leurs paramètres, permettant une personnalisation complète.

Enfin et surtout, vous verrez certaines règles avancées, telles que l'affichage de la fenêtre contextuelle uniquement aux visiteurs qui reviennent, l'affichage de la fenêtre contextuelle uniquement un nombre de fois défini, ou peut-être l'affichage de la fenêtre contextuelle uniquement lorsqu'un visiteur est référé à votre site Web à partir d'un emplacement spécifique. URL. Il y en a quelques autres également. Ces options peuvent améliorer considérablement l'expérience utilisateur de votre popup, vous permettant de la concevoir avec une véritable intégrité et considération pour vos utilisateurs.

Complétez les paramètres comme vous le souhaitez, puis cliquez sur ENREGISTRER ET FERMER. Vous serez redirigé vers un amp de ce à quoi ressemblera votre popup après avoir cliqué sur ce bouton.

Les fenêtres contextuelles peuvent être personnalisées et du contenu dynamique peut y être ajouté.

Amener les choses au niveau supérieur, d'accord ? Jusqu'à présent, nous avons sélectionné un modèle et peaufiné une ou deux séances, et c'est tout. Considérez le scénario dans lequel nous souhaitons personnaliser davantage notre popup.

Nous sommes de retour à l'étape AJOUTER UN NOUVEAU POPUP du processus, où nous pouvons spécifier un titre et choisir à nouveau un modèle.

Après cela, nous pouvons le sélectionner, apporter les modifications nécessaires aux paramètres de base et appuyer à nouveau sur PUBLIER.

D'accord, c'est là que les choses commencent à devenir intéressantes. Nous pouvons utiliser Elementor pour récupérer des données dynamiques de notre installation WordPress et les insérer dans la popup elle-même dans notre popup. Nous pouvons inclure des informations telles que le nom de l'utilisateur, le titre de la page, etc.

Considérez le scénario suivant : nous utilisons WooCommerce et nous souhaitons informer un utilisateur qu'une remise est disponible sur le produit spécifique qu'il consulte actuellement. Pour commencer, sélectionnez une section de texte dans le modèle, puis cliquez sur Dynamique dans la barre latérale :

Nous avons le choix entre une grande variété d'options, notamment les informations de la publication elle-même, les informations du site dans son ensemble, les informations sur les médias, les informations sur l'auteur et même les informations sur WooCommerce. Nous sélectionnerons un titre de produit et il sera ajouté à notre bloc de contenu texte à la suite de notre sélection.

Supposons que les détails de la base de données ne soient pas correctement récupérés. Dans ce cas, il est possible d'en spécifier avant le texte, d'autres après le texte et un texte de secours (si les détails de la base de données ne sont pas correctement récupérés).

Dupliquons donc ce processus pour le bouton, qui affichera le prix du produit. Nous pouvons formuler le texte précédent comme ACHETER MAINTENANT POUR pour nous fournir un appel à l'action convaincant :

Nous pouvons même aller plus loin et utiliser l'image du produit comme arrière-plan de la fenêtre contextuelle elle-même.

Lorsque nous appuyons sur PUBLIER, les paramètres de publication nous sont à nouveau présentés, nous permettant de spécifier que nous souhaitons uniquement que la fenêtre contextuelle apparaisse sur les pages WooCommerce. Nous réglerons la minuterie sur 15 secondes d'inactivité pour être le déclencheur. Voici comment cela s’est finalement passé :

Bien que le design puisse être amélioré, vous pouvez voir que nous affichons le nom du produit, son prix et une image du produit comme arrière-plan de la popup. Brillant!