Revu par Vous créez vos pages produit dans Elementor, et tout semble correct. Puis vous remarquez que le bouton de liste de souhaits Elementor est manquant. Pas mal placé. Disparu.
Les paramètres de votre plugin promettent un bouton. Votre page produit ne montre rien. Il n'y a même pas d'erreur à rechercher.
Ce silence a un coût. Un bouton de liste de souhaits que personne ne peut voir est un enregistrement qui n'a jamais lieu. Et un enregistrement qui n'a jamais lieu est un acheteur que vous ne pouvez pas ramener.
SaveTo Wishlist propose deux intégrations Elementor qui comblent le fossé. Nous allons vous expliquer comment configurer les deux, choisir la bonne et ce qu'il faut faire des enregistrements par la suite.
Aller à :
- Pourquoi le bouton de liste de souhaits disparaît sur les pages produit Elementor
- Ce que font réellement les deux intégrations Elementor
- Ce dont vous avez besoin avant de commencer
- Comment ajouter le bouton de liste de souhaits avec le widget Elementor
- Comment afficher le bouton de liste de souhaits dans Loop Grid et Loop Carousel
- Où placer le bouton pour que les acheteurs l'utilisent réellement
- Cinq façons d'utiliser les enregistrements de liste de souhaits Elementor
- Problèmes de liste de souhaits Elementor et comment les résoudre
- Questions fréquemment posées : Bouton de liste de souhaits Elementor
- Pour conclure
Pourquoi le bouton de liste de souhaits disparaît sur les pages produit Elementor
Le bouton nécessite une étape manuelle car Elementor s'appuie sur des widgets visuels personnalisés plutôt que sur les modèles PHP traditionnels de WooCommerce.
SaveTo Wishlist place son bouton en utilisant les hooks d'action WooCommerce. Un modèle de produit standard déclenche ces hooks à des points définis. Ainsi, le plugin sait toujours où injecter le bouton.
Cependant, un modèle Elementor est assemblé à partir de widgets Elementor à la place. Si le vôtre utilise un bouton d'ajout au panier personnalisé, ces hooks ne se déclenchent jamais. Par conséquent, le plugin n'a rien auquel s'accrocher.
Les pages d'archive sont confrontées aux mêmes limitations de hooks, mais à une échelle plus large. Une grille de boucles Elementor Pro ne rend pas du tout la boucle de boutique classique. Au lieu de cela, elle rend le modèle d'élément de boucle que vous avez conçu. Parce qu'elle utilise une mise en page personnalisée au lieu des hooks de boucle de boutique par défaut, le bouton nécessite un placement manuel.
Ce qui rend ce diagnostic délicat, c'est que cela se produit silencieusement. Aucune erreur n'apparaît. Aucun avertissement ne s'affiche dans votre administration. Et aucun paramètre du plugin ne le corrige.
Ce n'est pas non plus une configuration de niche. Selon W3Techs, Elementor est utilisé sur 12,8 % de tous les sites web.
🔍️ Ce que nous avons constaté : Les propriétaires de boutiques contactent souvent le support, craignant que le plugin ne fonctionne pas. La réalité est simplement une différence d'architecture. Le rendu du bouton fonctionne bien, mais il doit être placé explicitement dans le modèle Elementor.
Ce que font réellement les deux intégrations Elementor
SaveTo Wishlist couvre Elementor en deux parties distinctes. Celle dont vous avez besoin dépend de votre licence Elementor.
| Capacité | Ce qu'il fait | Elementor requis | Ajouté dans |
|---|---|---|---|
| Widget Enregistrer dans la liste de souhaits | Un widget Elementor natif que vous faites glisser dans n'importe quel modèle pour placer le bouton manuellement | Elementor gratuit ou Pro | 1.1.3 |
| Placement de la grille de boucles et du carrousel de boucles | Placement automatique du bouton sur chaque carte de produit, piloté par votre paramètre de page de boutique existant | Elementor Pro | 1.1.2 |
Les deux sont inclus dans SaveTo Wishlist Lite, le plugin gratuit, donc les détenteurs de licence Pro les héritent aussi. Mettez à jour vers la version 1.1.3 ou ultérieure et vous aurez les deux.
Votre approche dépend de votre licence. Si vous créez des pages de produits dans Elementor gratuit, le widget est votre option. La grille de boucles, le carrousel de boucles et le constructeur de thèmes sont toutes des fonctionnalités d'Elementor Pro.
En pratique, la plupart des boutiques Pro finissent par utiliser les deux. Le placement automatique gère les archives. Le widget gère le modèle de produit unique.
Une distinction évite beaucoup de confusion par la suite. Le widget Elementor place le bouton de liste de souhaits sur un produit. Il n'affiche pas la liste de souhaits elle-même. Pour cela, utilisez le bloc de liste de souhaits ou le shortcode [saveto_wishlist].
Ce dont vous avez besoin avant de commencer
Quatre éléments doivent être en place avant que le widget ne rende quoi que ce soit.
- Elementor, gratuit ou Pro : le widget fonctionne dans les deux cas. Loop Grid et Loop Carousel nécessitent Elementor Pro.
- SaveTo Wishlist Lite 1.1.3 ou ultérieur : les versions antérieures n'incluent pas le widget. Vérifiez votre version sous Plugins.
- WooCommerce avec un produit publié : le widget ne s'affiche que là où il y a un produit à traiter.
- Un modèle lié à un produit : un modèle de produit unique, un modèle d'élément de boucle ou une page consciente du produit.
Au-delà de cela, il n'y a pas d'étape de configuration distincte. Le widget lit vos paramètres de liste de souhaits existants. Ainsi, un widget placé tel quel rend le même bouton que votre boutique affiche déjà.
Comment ajouter le bouton de liste de souhaits avec le widget Elementor
L'ajout du widget prend quatre étapes. Sa mise en forme en prend trois de plus.
Faites glisser le widget sur votre modèle
- Ouvrez le modèle de produit ou la page que vous souhaitez modifier dans Elementor.
- Recherchez Save to Wishlist dans le panneau des widgets.
- Faites glisser le widget sur votre mise en page, là où vous souhaitez que le bouton soit placé.
- Cliquez sur Mettre à jour pour enregistrer.
Le widget est classé dans les catégories WooCommerce et Général. La navigation fonctionne donc aussi bien que la recherche. Taper wishlist, save, favorite ou favourite le fait également apparaître.
Il s'affiche immédiatement en utilisant vos paramètres de liste de souhaits actuels. Cela signifie que vous voyez le vrai bouton sur la toile, pas un espace réservé gris.
Choisissez le type de bouton
Le type de bouton se trouve dans la section Wishlist Button de l'onglet Content. C'est le seul paramètre là-bas.
Dix styles sont inclus avec le widget :
- Texte seul, Icône seule, et Icône et texte
- Icône et texte en pilule, Icône pleine, et Icône et texte pleins
- Icône et texte en pilule pleine, Icône minimale, et Icône et texte minimaux
- Icône et texte en pilule minimale
Les variantes en pilule utilisent des coins entièrement arrondis. Plein remplit la forme de l'icône, tandis que Minimal utilise un contour plus léger.
Le contrôle est défini par défaut sur votre style de bouton produit à partir des paramètres de la liste de souhaits. Le modifier ici affecte ce widget unique, pas l'ensemble de votre boutique.
Définir l'alignement
L'alignement se trouve dans l'onglet Style sous Layout. C'est là qu'Elementor conserve l'alignement pour ses propres widgets.
Ouvrez Layout, puis définissez l'alignement sur Gauche, Centre ou Droite. Il est par défaut à Gauche.
Changer les couleurs du bouton
La section Colors de l'onglet Style vous donne huit contrôles. Chacun a un état normal et un état au survol : Couleur du texte, Couleur de fond, Couleur de la bordure et Couleur de l'icône.
Chaque sélecteur commence avec la couleur déjà enregistrée dans vos paramètres de liste de souhaits. Ainsi, un widget non modifié correspond au reste de votre boutique.
En modifier un et cela remplace cette couleur pour ce widget uniquement. Cela aide lorsqu'un modèle unique se trouve sur une section sombre ou un fond photo.
Les couleurs sont la seule chose que le widget remplace. La taille, le remplissage, la largeur de la bordure et la forme de l'icône se trouvent ailleurs.
Vous les trouverez sous SaveTo Wishlist > Paramètres > Placement et styles des boutons. Ainsi, vous les retravaillez une fois et chaque bouton suit.
Une limitation est à connaître dès le départ. Les sélecteurs n'acceptent que les couleurs unies, sans curseur de transparence ni onglet de couleurs globales.
C'est parce que le bouton de liste de souhaits stocke des valeurs hexadécimales brutes. Une couleur globale s'afficherait correctement en aperçu, mais ne serait pas reportée sur la page en direct, l'option est donc désactivée pour garantir l'exactitude de vos paramètres.
Pour la même procédure pas à pas avec chaque écran capturé, consultez notre guide de la base de connaissances sur le widget Elementor.
Comment afficher le bouton de liste de souhaits dans Loop Grid et Loop Carousel
Avec Elementor Pro, vous avez deux voies d'accès aux cartes de produits. Elles conviennent à différents niveaux de contrôle.
Laissez le plugin le placer pour vous
Votre placement existant sur la page de la boutique s'applique déjà aux cartes Loop Grid et Loop Carousel.
Accédez à SaveTo Wishlist > Paramètres > Page de la boutique, choisissez un emplacement, puis enregistrez. Le bouton apparaît sur chaque carte sans que vous ayez à toucher au modèle.
En coulisses, l'intégration s'ancre à quatre widgets Elementor dans votre modèle d'élément de boucle :
- Image du produit : gère les placements ancrés sur l'image du produit.
- Titre du produit : gère les placements ancrés sur le titre.
- Ajouter au panier du produit : gère les placements au-dessus ou en dessous du bouton.
- Ajouter au panier : la deuxième variante d'ajout au panier d'Elementor, traitée de la même manière.
Votre modèle d'élément de boucle nécessite au moins l'un de ces quatre. Lorsqu'une carte est entièrement construite à partir de widgets personnalisés, le plugin vous demande simplement de placer le bouton manuellement.
Si un modèle contient les deux variantes d'ajout au panier, l'ancre se déclenche toujours une fois par carte. Le bouton n'est donc jamais doublé de cette façon.
Vous n'utilisez pas de grille ? Nous abordons le même bouton dans les tableaux de produits WooCommerce.
Placez le widget vous-même
Modifiez le modèle d'élément de boucle et déposez le widget Save to Wishlist dans la mise en page de la carte. Vous obtenez un contrôle exact sur l'emplacement du bouton sur chaque carte.
Il y a un comportement à prévoir ici. Dans un élément de boucle, le plugin traite votre widget comme un bouton par carte plutôt que comme un doublon. Votre placement de boutique continue de s'afficher à côté.
Choisissez donc l'une ou l'autre voie. Si vous placez le widget manuellement, réglez votre placement de page de boutique sur Ne pas afficher. Sinon, chaque carte se retrouve avec deux boutons.
🔍️ Ce que nous avons vu : la page produit unique fonctionne différemment, et cela surprend les gens. Placez le widget sur un modèle de produit Elementor, et le plugin désactive son propre placement de page produit pour vous. Les éléments de boucle font exception, ils nécessitent donc l'étape manuelle ci-dessus.
Où placer le bouton pour que les acheteurs l'utilisent réellement
Une fois que vous pouvez placer le bouton n'importe où, la question la plus difficile est de savoir où il génère le plus d'enregistrements.
Commencez par comprendre pourquoi les acheteurs abandonnent. Selon le Baymard Institute, le taux moyen documenté d'abandon de panier, sur 50 études, est de 70,22 %.
Plus révélateur encore, 42 % des acheteurs en ligne américains déclarent avoir abandonné parce qu'ils naviguaient simplement. Ces personnes ne rejettent pas votre produit. Le moment n'est pas le bon.
Advanced Coupons propose un guide sur la réduction des abandons de panier si vous souhaitez également aborder le côté paiement.
Une liste de souhaits est la seule chose sur la page conçue pour les retenir. Cela redéfinit l'objectif du bouton. C'est le deuxième appel à l'action pour tous ceux qui n'achètent pas aujourd'hui.
Trois règles de placement sont bien établies dans la plupart des magasins :
- Gardez-le dans la boîte d'achat : placez le bouton à côté du prix et de "Ajouter au panier". Un acheteur qui décide de partir regarde juste là.
- Donnez-lui moins de poids visuel qu'"Ajouter au panier" : les types Minimal et Icône uniquement existent à cet effet. Un bouton de liste de souhaits aussi visible que possible concurrence la vente que vous souhaitez aujourd'hui.
- Sur les cartes, privilégiez le coin de l'image ou sous le titre : l'espace sur les cartes est limité. Un bouton pleine largeur sous "Ajouter au panier" perturbe l'alignement de la grille sur les petits écrans.
Nous approfondissons ces deux surfaces dans nos guides sur les bonnes pratiques pour les pages produit et les bonnes pratiques pour les pages de boutique.
Placer le bouton sur les cartes Loop Grid est plus important qu'il n'y paraît. La plupart des abandons de navigation se produisent sur l'archive, avant qu'un acheteur n'ouvre une page produit.
Donc, si votre seul bouton se trouve sur le modèle de produit, vous attrapez les quelques personnes qui cliquent. Tous les autres vous échappent.
Cinq façons d'utiliser les enregistrements de liste de souhaits Elementor
Une sauvegarde vaut exactement autant que ce que vous en faites ensuite. Cinq actions transforment une liste de souhaits croissante en revenus.
- Déclenchez des alertes de baisse de prix : lorsque le prix d'un produit sauvegardé baisse, l'acheteur est informé d'un article qu'il désirait déjà. Voyez comment fonctionnent les alertes de baisse de prix de la liste de souhaits.
- Envoyez des notifications de réapprovisionnement : un produit épuisé dans une liste de souhaits est une commande en attente. Informer cet acheteur du retour en stock est plus efficace que d'espérer qu'il revienne.
- Interprétez les sauvegardes comme des données de demande : les produits souvent sauvegardés et rarement achetés vous renseignent sur le prix, la livraison ou la description. Les analyses de liste de souhaits rendent le schéma visible.
- Segmentez par intention : un acheteur avec cinq sauvegardes et aucune commande a besoin d'un e-mail différent de celui d'un acheteur régulier. L'activité de la liste de souhaits vous donne un segment que l'historique des commandes ne fournirait jamais.
- Planifiez des campagnes saisonnières autour des articles sauvegardés : les périodes de cadeaux récompensent les magasins qui savent ce que chaque client désire. Une liste de souhaits est cette liste, fournie volontairement plutôt que devinée.
Il est utile de préciser quelles parties sont gratuites. Tout ce qui précède concernant le placement du bouton de liste de souhaits Elementor est inclus dans le plugin Lite gratuit.
Les analyses, les alertes de baisse de prix, les e-mails de réapprovisionnement et les webhooks sont des fonctionnalités Pro. Elles commencent avec le plan Growth.
Quels que soient les jeux que vous exécutez, le taux de conversion de la liste de souhaits est le chiffre à surveiller. Il vous indique si les enregistrements se transforment en commandes.
Visser Labs couvre la lecture de vos rapports de magasin si vous souhaitez une vue d'ensemble.
Problèmes de liste de souhaits Elementor et comment les résoudre
Quatre problèmes expliquent la plupart de ce qui ne va pas ici. Chacun a une cause spécifique.
Le bouton n'apparaît pas du tout
Traitez ces éléments dans l'ordre.
- Aucun produit dans le contexte. Le widget ne s'affiche que là où WooCommerce a un produit avec lequel travailler. Une page simple ne lui donne rien, il reste donc vide. Déplacez-le vers un modèle de produit unique, un élément de boucle, ou une page qui définit un produit.
- Les listes de souhaits des invités sont désactivées. Si « Désactiver la liste de souhaits des invités » est activé et que vous êtes déconnecté, le bouton est intentionnellement masqué. Connectez-vous, ou réfléchissez à la pertinence d'autoriser les listes de souhaits des invités pour votre magasin.
- Le plugin est plus ancien que la version 1.1.3. Le widget n'existe pas dans les versions antérieures. Mettez à jour SaveTo Wishlist et il apparaîtra dans le panneau.
Deux boutons de liste de souhaits s'affichent sur la page produit
Celui-ci se résout généralement tout seul. Lorsque votre modèle de produit Elementor contient le widget, le plugin désenregistre son propre placement de produit unique.
Les produits liés, les ventes incitatives et les ventes croisées sont délibérément laissés de côté. Ces cartes s'affichent via votre placement de magasin à la place.
Donc, un deuxième bouton là-bas est le paramètre de la boutique qui fait son travail. Vous le modifiez dans SaveTo Wishlist > Paramètres > Placement et styles des boutons.
Les sélecteurs de couleur ne font rien
Deux paramètres désactivent les contrôles de couleur. Chacun affiche un message dans le panneau Elementor expliquant pourquoi.
Si le mode de bouton de votre produit est défini sur Thème par défaut, le bouton hérite du style de votre thème. Le plugin n'applique aucune couleur de sa propre initiative. Passez le mode à Prédéfini pour prendre le contrôle.
Si l'icône de votre liste de souhaits est une image téléchargée personnalisée, les deux contrôles de couleur de l'icône ne font rien. Une image téléchargée ne peut pas être teintée. Remplacez-la par une forme d'icône intégrée si le contrôle de couleur est plus important.
Une mise en page de blog apparaît à la place de la liste de souhaits
Si un lien de liste de souhaits ouvre la conception de votre archive de publications, une condition d'affichage d'Elementor Theme Builder s'applique probablement trop largement. Cela se produit lorsque la condition d'affichage de ce modèle cible l'archive des publications.
Cette condition correspond également aux vues individuelles de la liste de souhaits. Voici la solution :
- Ouvrez Templates > Theme Builder et sélectionnez votre modèle d'archive.
- Ouvrez ses Conditions d'affichage.
- Supprimez la condition qui cible l'archive des articles.
- Créez votre archive de publications comme une page autonome à la place.
Questions fréquemment posées : Bouton de liste de souhaits Elementor
Ai-je besoin d'Elementor Pro pour utiliser le widget de liste de souhaits ?
Non. Le widget Save to Wishlist fonctionne dans Elementor gratuit.
Elementor Pro n'est nécessaire que pour les modèles Loop Grid, Loop Carousel et Theme Builder. Sur Elementor gratuit, le widget est la façon dont vous placez le bouton.
Le widget remplacera-t-il mes paramètres de liste de souhaits ?
Seules les huit couleurs, et uniquement pour ce widget. Le type et l'alignement du bouton sont également par widget.
Tout le reste provient toujours des paramètres de votre liste de souhaits. Cela couvre la taille, le rembourrage, la largeur de la bordure et la forme de l'icône. Ainsi, un relooking à l'échelle du magasin reste une seule modification à un seul endroit.
Puis-je utiliser le widget et le placement automatique ensemble ?
Oui, bien que les deux surfaces se comportent différemment.
Sur un modèle de produit contenant le widget, le plugin désactive son propre placement sur la page produit. Vous obtenez un bouton.
Dans un modèle d'élément de boucle, le widget et votre placement de boutique s'affichent. Définissez le placement de la boutique sur Ne pas afficher si vous ne souhaitez que le widget.
Pourquoi n'y a-t-il pas de curseur de transparence sur les sélecteurs de couleur ?
Le bouton de liste de souhaits stocke uniquement les couleurs hexadécimales unies.
Une couleur transparente ou globale s'afficherait correctement en aperçu, puis se rabattrait sur la page en direct. Ces options sont désactivées plutôt que de vous induire en erreur.
De quelle version de SaveTo Wishlist ai-je besoin ?
La grille de boucles et le carrousel de boucles ont été pris en charge à partir de la version 1.1.2. Le widget Elementor est arrivé en 1.1.3.
Utiliser la version 1.1.3 ou ultérieure vous donne les deux. Les deux sont inclus dans le plugin Lite gratuit, donc aucun des deux n'a besoin d'une licence Pro.
Le widget affiche-t-il la liste de souhaits elle-même ?
Non. Le widget place le bouton Enregistrer sur la liste de souhaits sur un produit.
Pour afficher la liste de souhaits réelle d'un client sur une page, utilisez plutôt le bloc de liste de souhaits ou le shortcode [saveto_wishlist].
Pour conclure
L'affichage du bouton de liste de souhaits Elementor n'a jamais vraiment été une question de style. Il s'agissait de combler le fossé entre les hooks WordPress traditionnels et les constructeurs visuels personnalisés.
Les deux moitiés de ce fossé sont maintenant comblées, sur Elementor gratuit et sur Elementor Pro.
La configuration est la partie facile et prend quelques minutes. Le vrai travail consiste à décider où le bouton se trouve. Après cela, il faut décider ce qui se passe une fois qu'un acheteur l'utilise.
Voici ce qu'il faut faire ensuite :
- Mettez à jour vers la version 1.1.3 ou ultérieure, puis vérifiez quel chemin Elementor correspond à votre licence.
- Faites glisser le widget Enregistrer sur la liste de souhaits sur votre modèle de produit et choisissez un type de bouton.
- Activez les cartes Grille de boucles et Carrousel de boucles via le placement de votre page de boutique.
- Placez le bouton à l'intérieur de la boîte d'achat et sur vos cartes de produit, pas seulement sur l'un des deux.
- Mettez les sauvegardes au travail avec des alertes, des segments et des données de demande.
Prêt à placer un bouton de liste de souhaits Elementor sur chaque produit de votre boutique ? Commencez gratuitement avec SaveTo Wishlist Lite, ou découvrez ce que les plans Growth, Plus et Business ajoutent en plus.
