Kit de magasinage ultime : Comment ajouter des boutons de liste de souhaits aux grilles de produits Elementor

Vous avez créé une grille de produits avec Ultimate Store Kit, et elle est superbe. Les cartes ont des icônes au survol, des badges de promotion et un bouton Ajouter au panier rapide.

Mais un acheteur qui aime un produit et n'est pas prêt à acheter a deux choix : acheter maintenant ou partir. Ultimate Store Kit crée ses propres cartes de produits. Ainsi, les boutons de liste de souhaits qui dépendent des hooks de boutique de WooCommerce ne s'affichent jamais sur eux.

Le plugin gratuit SaveTo Wishlist Lite ajoute maintenant son bouton à ces cartes pour vous. Nous l'avons testé sur notre magasin de démonstration. Ci-dessous, je vais vous montrer comment le configurer, vérifier qu'il fonctionne et transformer les enregistrements en ventes.

Aller à :

---

Pourquoi vos grilles de produits WooCommerce ont besoin d'un bouton de liste de souhaits

Un bouton de liste de souhaits retient les acheteurs qui aiment un produit mais ne sont pas encore prêts à l'acheter. C'est particulièrement important sur une grille de produits WooCommerce. Les acheteurs utilisent les grilles sur votre page d'accueil, les pages de catégorie et les pages de destination pour parcourir de nombreux produits à la fois. Par conséquent, la grille est souvent l'endroit où ils repèrent pour la première fois un produit qu'ils désirent.

Ce groupe est plus important qu'il n'y paraît, et les recherches du Baymard Institute le confirment. 42 % des acheteurs en ligne américains ont abandonné un panier parce qu'ils « naviguaient juste » ou « n'étaient pas prêts à acheter ». Et ce ne sont là que les acheteurs qui sont allés jusqu'au panier.

C'est là qu'un bouton de liste de souhaits est utile : il leur offre un troisième choix. Ils enregistrent le produit en un clic et continuent leur navigation. Pendant ce temps, vous apprenez quels produits ils désirent, et c'est ce qui rend une liste de souhaits utile pour votre boutique.

Ainsi, le bouton mérite sa place là où les acheteurs naviguent le plus. Sur une boutique Ultimate Store Kit, ce sont les grilles et les carrousels de produits.

---

Ce que fait l'intégration du Kit de magasinage ultime

SaveTo Wishlist Lite 1.1.8 place un bouton de liste de souhaits sur chaque carte de produit Ultimate Store Kit, sans nécessiter l'ajout de widget.

Ultimate Store Kit par BdThemes est un module complémentaire Elementor avec plus de 3 000 installations actives sur WordPress.org. Il ajoute des widgets pour les grilles, carrousels, sliders et accordéons de produits WooCommerce.

Cependant, chacun de ces widgets exécute sa propre requête de produits et imprime chaque carte à partir de son propre modèle. Pour cette raison, ils ignorent les hooks standard de boutique WooCommerce auxquels les boutons de liste de souhaits s'attachent. L'intégration comble cette lacune. Voici ce qu'elle fait :

• Ajoute le bouton à chaque carte : Chaque carte reçoit un bouton Enregistrer dans la liste de souhaits à côté de son action Ajouter au panier. Il n'y a pas de widget à glisser dans chaque carte.
• Évite les doubles cœurs : Ultimate Store Kit a sa propre icône de liste de souhaits. Tant que le commutateur Liste de souhaits de la grille est activé, SaveTo Wishlist masque son bouton, de sorte qu'une carte n'affiche jamais deux cœurs.
• Correspond aux icônes de la carte : Le bouton s'affiche sous forme d'icône sans texte, il s'intègre donc à côté des autres icônes de la carte.
• Enregistre le bon produit : Chaque bouton contient le produit de sa propre carte, de sorte qu'un clic enregistre l'article que l'acheteur voit.
• Laisse les autres grilles intactes : Une boucle de produit WooCommerce classique sur la même page conserve son bouton unique normal.

Le bouton s'affiche sur les widgets Ultimate Store Kit qui ont leur propre action Ajouter au panier. Cela couvre les grilles et carrousels Glossy, Shiny et Florence. Il couvre également les sliders Heaven, Mentor et Showcase, ainsi que Product Accordion, Product Image Accordion et Image Hotspot.

---

Ce dont vous avez besoin avant de commencer

Vous avez besoin de trois plugins, et tous ont des versions gratuites :

• SaveTo Wishlist Lite, version 1.1.8 ou ultérieure : L'intégration est fournie dans le plugin gratuit. Si vous utilisez SaveTo Wishlist Pro, il fonctionne par-dessus Lite, vous l'obtenez donc aussi.
• Elementor : La version gratuite suffit.
• Ultimate Store Kit : Le plugin gratuit de WordPress.org inclut la grille Glossy que nous avons utilisée dans nos tests.

Nos développeurs ont vérifié l'intégration avec Elementor 4.2.4 et Ultimate Store Kit 3.1.4. De plus, nous l'avons testée sur notre boutique démo avec Ultimate Store Kit 4.0.0.

---

Comment ajouter des boutons de liste de souhaits aux grilles du Kit de magasinage ultime

L'intégration s'active d'elle-même lorsqu'elle détecte Ultimate Store Kit. Cependant, vous devez activer un interrupteur dans chaque grille avant que le bouton n'apparaisse. Voici les étapes.

Étape 1 : Installez ou mettez à jour les plugins

Allez dans Plugins > Plugins installés et mettez à jour SaveTo Wishlist Lite vers la version 1.1.8 ou ultérieure. Nouveau dans le plugin ? Notre guide de démarrage rapide couvre la première configuration. Assurez-vous ensuite qu'Elementor et Ultimate Store Kit sont installés et actifs.

Étape 2 : Ajouter ou ouvrir une grille du Kit de magasinage ultime

Ouvrez une page dans Elementor et recherchez dans le panneau des widgets une grille, telle que Glossy Grid. Faites-la glisser sur la page, puis choisissez vos produits et votre mise en page. Vous avez déjà une grille ? Cliquez dessus pour ouvrir ses paramètres.

Étape 3 : Désactivez l'interrupteur Wishlist de la grille

Cette étape détermine si le bouton apparaît ou non. Avec la grille sélectionnée, allez dans l'onglet Contenu et ouvrez la section Paramètres. Ouvrez ensuite l'onglet Bouton d'action :

• Désactivez l'interrupteur Wishlist. Cela masque le cœur d'Ultimate Store Kit et laisse passer le bouton SaveTo Wishlist.
• Laissez l'interrupteur Ajouter au panier activé. Le bouton se trouve à côté de l'action Ajouter au panier de la carte, donc sans elle, il n'y a pas d'endroit où placer le bouton.

Après cela, cliquez sur Publier ou Mettre à jour. Chaque grille a ses propres interrupteurs, alors répétez cette opération pour chaque grille où vous souhaitez le bouton SaveTo Wishlist.

Étape 4 : Choisir où se trouve le bouton

Allez dans SaveTo Wishlist > Paramètres > Placement et styles du bouton. Dans la section Page de la boutique, trouvez Placement du bouton. Les cartes Ultimate Store Kit lisent ce paramètre un peu différemment de votre page de boutique :

• En haut à droite ou en haut à gauche de l'image du produit : Le bouton rejoint les icônes de la carte sur l'image. Il déplace légèrement les icônes et les badges de promotion d'Ultimate Store Kit vers le bas, afin que rien ne soit couvert.
• Le titre et les options Ajouter au panier : Le bouton apparaît à côté de l'action Ajouter au panier de la carte. Cela couvre Au-dessus du titre du produit et En dessous du titre du produit. Il couvre également Au-dessus du bouton Ajouter au panier et En dessous du bouton Ajouter au panier. Ultimate Store Kit n'offre que cet unique emplacement, donc les options de titre ne peuvent pas le déplacer.
• Ne pas afficher : Masque le bouton sur votre page de boutique et dans vos grilles Ultimate Store Kit.

Comme il s'agit du paramètre de votre page de boutique, une modification ici déplace également le bouton sur vos pages de boutique et de catégorie. Vérifiez l'une de ces pages après avoir enregistré.

Étape 5 : Vérifiez l'icône et les couleurs du bouton

Également dans cet onglet, les paramètres de style de la page de boutique décident de la forme et des couleurs de l'icône. Dans les cartes Ultimate Store Kit, le bouton s'affiche toujours uniquement sous forme d'icône, et quelques règles s'appliquent :

• Taille de l'icône : Toute taille supérieure à 20 px s'affiche à 20 px, afin qu'elle s'intègre à côté des icônes de la carte.
• Icônes claires sur styles unis : Une icône blanche sur un bouton foncé (comme le Rouge Classique) prend la couleur du bouton. Cela la maintient visible sur la photo du produit.
• Mode Thème par défaut : Les cartes affichent le cœur rouge standard, car ce mode n'a pas ses propres paramètres d'icône.

Étape 6 : Décidez si les invités peuvent enregistrer

Enfin, allez dans SaveTo Wishlist > Paramètres > Options Invités. Si Désactiver la liste de souhaits Invités est activé, les acheteurs non connectés ne verront pas le bouton dans vos grilles. Je recommanderais de laisser l'enregistrement invité activé, et notre guide sur les listes de souhaits invités explique pourquoi.

Une fois ces six étapes terminées, vos grilles Ultimate Store Kit affichent le bouton comme vous le souhaitez.

---

Comment vérifier que l'intégration fonctionne

Ne testez pas à l'intérieur de l'éditeur Elementor. Là, le bouton peut ne pas s'afficher du tout, et s'il s'affiche, cliquer dessus ne fait rien. Ouvrez plutôt la page en direct dans une fenêtre privée et effectuez ces vérifications :

1. Regardez chaque carte. Chaque carte doit afficher exactement un bouton de liste de souhaits, et ce doit être celui de SaveTo Wishlist.
2. Survolez une carte. L'icône Ajouter au panier d'Ultimate Store Kit doit toujours être là et toujours ajouter le produit au panier.
3. Cliquez sur le bouton de liste de souhaits sur n'importe quelle carte, puis rechargez la page. Le bouton doit s'afficher comme sauvegardé.
4. Ouvrez votre page de liste de souhaits. Le produit de cette carte doit y figurer.

🔍️ Ce que nous avons vu : Ultimate Store Kit masque ses propres icônes d'action jusqu'à ce que l'acheteur survole. Le bouton SaveTo Wishlist reste visible. Avec une icône en forme de plus, il peut ressembler à une marque errante sur la photo. Une icône en forme de cœur se lit comme « sauvegarder » en un coup d'œil.

---

5 façons de transformer les enregistrements de grilles de produits en ventes

Une sauvegarde depuis une grille est un acheteur qui vous dit « J'aime ça, mais pas encore ». Ces cinq habitudes vous aident à agir en conséquence.

Utilisez un placement dans un coin sur les grilles axées sur l'image

Les cartes Ultimate Store Kit sont construites autour des photos de produits. Ainsi, un cœur dans le coin de l'image est un endroit familier et facile à repérer pour le bouton. Il reste également visible pendant que les icônes de survol sont masquées, de sorte que l'option de sauvegarde est toujours à portée de clic.

Utilisez le fondu pour que les clients continuent de naviguer

Allez dans SaveTo Wishlist > Paramètres > Général. Sous Action de la liste de souhaits, réglez Bouton Ajouter à la liste de souhaits sur Fondu. Le bouton confirme la sauvegarde, et l'acheteur reste dans la grille. En revanche, la redirection par défaut l'envoie à la page de liste de souhaits après chaque sauvegarde, il perd donc sa place.

Donnez un rôle à chaque grille

Étant donné que chaque grille a son propre interrupteur de liste de souhaits, vous décidez grille par grille. Par exemple, utilisez le bouton SaveTo Wishlist sur les grilles qui vendent, comme les nouveautés ou les best-sellers. Ainsi, chaque sauvegarde atterrit dans une seule liste de souhaits que vous pouvez suivre, au lieu d'être divisée entre deux systèmes.

Créez un carrousel « sauvegardez-le pour la vente »

Dans les semaines précédant une grande vente, ajoutez un carrousel des produits que vous prévoyez de réduire. Invitez les acheteurs à enregistrer leurs favoris à l'avance. Lorsque la vente commencera, vous saurez quels produits promouvoir en premier. Nos idées de listes de souhaits pour le Black Friday couvrent plus de façons d'utiliser les enregistrements pendant la vente.

Faites un suivi de ce que les acheteurs ont enregistré

En pratique, les enregistrements ne se transforment en ventes que lorsque vous assurez le suivi. Utilisez-les pour planifier des rappels de réapprovisionnement, des e-mails de baisse de prix ou un message amical « vous y réfléchissez encore ? ». Notre guide sur le marketing par e-mail de listes de souhaits explore les options.

Commencez par l'habitude qui convient à votre boutique aujourd'hui. Ajoutez ensuite les autres au fur et à mesure que les enregistrements arrivent.

---

Choses à savoir avant de l'activer

L'intégration a quelques limites. Les connaître maintenant vous évite un test confus plus tard :

• Le bouton Liste de souhaits est activé par défaut : Les nouvelles grilles affichent le cœur d'Ultimate Store Kit jusqu'à ce que vous le désactiviez.
• Pas d'ajout au panier, pas de bouton : Une grille dont le bouton d'ajout au panier est désactivé n'affiche pas de bouton de liste de souhaits.
• Certains widgets ne sont pas couverts : Les listes de produits, tableaux de produits, catégories de produits et sous-catégories n'affichent pas de bouton de liste de souhaits.
• Un seul emplacement par carte : Les emplacements de titre ne peuvent pas déplacer le bouton. Il s'affiche à côté de « Ajouter au panier » ou dans le coin de l'image.
• Icône uniquement : Le texte du bouton ne s'affiche pas dans ces cartes, même si votre page de boutique utilise un style de texte.
• Aucun widget requis : Les cartes Ultimate Store Kit ne peuvent pas contenir d'autres widgets Elementor. Le widget Enregistrer dans la liste de souhaits s'affiche toujours dans la section Ultimate Store Kit du panneau, pour une utilisation ailleurs.

---

Questions fréquemment posées

---

Prêt à ajouter des boutons de liste de souhaits à vos grilles du Kit de magasinage ultime ?

Les grilles de votre Ultimate Store Kit montrent déjà aux clients ce que vous vendez. Désormais, avec un bouton de liste de souhaits sur chaque carte, ils peuvent également suivre ce qu'ils veulent pour plus tard.

Vous utilisez un autre module complémentaire Elementor ? Notre guide Premium Addons for Elementor couvre les boutons de liste de souhaits dans ses grilles de produits.

• Mettez à jour SaveTo Wishlist Lite vers la version 1.1.8 ou une version ultérieure.
• Désactivez le commutateur Wishlist de chaque grille et conservez Ajouter au panier.
• Choisissez un emplacement dans le coin pour les grilles axées sur l'image.
• Suivez ce que les acheteurs enregistrent pour transformer l'intérêt en commandes.

Installez ou mettez à jour SaveTo Wishlist Lite, puis activez le commutateur Wishlist sur votre première grille.