Vous construisez vos pages produit dans Elementor et le bouton de liste de souhaits ne se place pas où vous le souhaitez ? SaveTo Wishlist fournit un widget Elementor natif, vous pouvez donc faire glisser le bouton exactement là où il doit être au lieu de vous fier au placement automatique du plugin. Ce guide couvre l'ajout du widget, sa personnalisation, son utilisation dans les grilles de produits et la résolution des problèmes les plus fréquents.
Ce dont vous aurez besoin
- Elementor, gratuit ou Pro.
- SaveTo Wishlist version Lite 1.1.3 ou ultérieure. Les versions antérieures n'incluent pas le widget.
- WooCommerce, avec au moins un produit publié.
- Un modèle ou une page contenant un produit, tel qu'un modèle de produit unique ou une boucle de produits.
Le widget lit vos paramètres de liste de souhaits existants, il n'y a donc rien à configurer au préalable. Déposez-le sur un modèle et il rendra le même bouton que votre boutique affiche déjà.
Ajouter le widget à un modèle de produit
- Ouvrez le modèle de produit ou la page que vous souhaitez modifier dans Elementor.
- Dans le panneau des widgets, recherchez Enregistrer dans la liste de souhaits.
- Faites glisser le widget sur votre mise en page où vous souhaitez que le bouton apparaisse.
- Cliquez sur Mettre à jour pour enregistrer.
Le widget apparaît sous les catégories WooCommerce et Général dans le panneau, donc l'une ou l'autre fonctionne si vous préférez parcourir plutôt que rechercher.
Le bouton s'affiche immédiatement en utilisant vos paramètres de liste de souhaits actuels. Si rien n'apparaît, consultez la section de dépannage ci-dessous.
Choisissez le type de bouton
Ouvrez la section Bouton de liste de souhaits dans l'onglet Contenu. Elle contient un seul paramètre.
- Définissez le Type de bouton sur le style que vous souhaitez.
- Par défaut, il utilise le style de bouton de produit que vous avez défini dans les paramètres de la liste de souhaits.
- Le modifier ici n'affecte que ce widget, pas le reste de votre boutique.
Dix styles sont disponibles :
- Texte seul
- Icône seule
- Icône et texte
- Icône et texte en pilule
- Icône pleine
- Icône pleine et texte
- Icône pleine et texte en pilule
- Icône minimale
- Icône minimale et texte
- Icône et texte en pilule minimale
Les variantes Pill utilisent des coins entièrement arrondis. Solid remplit la forme de l'icône, et Minimal utilise un contour plus léger.
Définir l'alignement
L'alignement se trouve dans l'onglet Style, où Elementor conserve l'alignement de ses propres widgets.
- Ouvrez la section Mise en page dans l'onglet Style.
- Définissez l'Alignement sur Gauche, Centre ou Droite.
L'alignement est défini par défaut sur Gauche.
Changer les couleurs du bouton
Ouvrez la section Couleurs dans l'onglet Style. Vous disposez de huit contrôles de couleur, chacun avec un état normal et un état au survol :
- Couleur du texte et Couleur du texte (au survol)
- Couleur de l'arrière-plan et Couleur de l'arrière-plan (au survol)
- Couleur de la bordure et Couleur de la bordure (au survol)
- Couleur de l'icône et Couleur de l'icône (au survol)
Chacun commence avec la couleur déjà enregistrée dans les paramètres de votre liste de souhaits, de sorte qu'un widget non modifié ressemble exactement au reste de votre boutique. Modifiez-en un et cela remplace cette couleur pour ce widget uniquement.
Les couleurs sont la seule chose que le widget remplace. La taille du bouton, le remplissage, la largeur de la bordure et la forme de l'icône proviennent toujours de vos paramètres de liste de souhaits. Modifiez-les donc dans SaveTo Wishlist > Paramètres > Placement et styles des boutons.
Les sélecteurs de couleur n'acceptent que les couleurs unies. Il n'y a pas de curseur de transparence ni d'onglet de couleurs globales, car le bouton de liste de souhaits stocke des couleurs hexadécimales simples.
Afficher le bouton dans la grille en boucle et le carrousel en boucle
Si vous utilisez Elementor Pro, le bouton de liste de souhaits fonctionne également à l'intérieur des widgets Grille en boucle et Carrousel en boucle. Vous avez deux façons de l'y intégrer.
Laissez faire le plugin. Le placement du bouton de votre page de boutique s'applique déjà aux cartes en boucle, de sorte que le bouton apparaît sur chaque carte sans que vous ayez à ajouter quoi que ce soit.
Placez-le vous-même. Modifiez le modèle d'élément en boucle, puis ajoutez le widget Enregistrer dans la liste de souhaits à la mise en page de la carte. Cela vous donne le contrôle sur l'emplacement exact du bouton sur la carte.
Lorsque vous placez le widget vous-même à l'intérieur d'un élément en boucle, le plugin arrête le rendu de son propre bouton automatique sur ces cartes, de sorte que vous obtenez un bouton par carte plutôt que deux. La seule exception est lorsque le placement du bouton de votre boutique est défini sur Ne pas afficher. Dans ce cas, le plugin laisse les cartes tranquilles, car supprimer le bouton automatique sans en remettre un serait un pas en arrière.
Quelle méthode devriez-vous utiliser ?
SaveTo Wishlist vous offre trois façons d'ajouter des fonctionnalités de liste de souhaits à une page, et elles remplissent des fonctions différentes. La différence la plus importante : le widget Elementor place le bouton sur un produit, tandis que le shortcode et le bloc affichent la liste de souhaits elle-même. La plupart des boutiques utilisent les deux.
Le widget Elementor place le bouton Enregistrer dans la liste de souhaits partout où vous le déposez. Utilisez-le lorsque vous créez des modèles de produits dans Elementor. C'est le seul des trois à posséder ses propres contrôles de style.
Le shortcode [saveto_wishlist] affiche la liste de souhaits d'un client. Utilisez-le lorsque la liste de souhaits doit apparaître en dehors d'une mise en page Elementor, telle qu'une page d'éditeur classique, un widget de texte ou un constructeur sans élément natif. Voir Comment utiliser le shortcode de la liste de souhaits.
Le bloc de liste de souhaits fait le même travail que le shortcode, dans l'éditeur de blocs WordPress. Utilisez-le lorsque vous modifiez des pages avec des blocs plutôt qu'un constructeur de pages. Voir Comment utiliser le bloc Gutenberg de la liste de souhaits.
Dépannage
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, ou un modèle non lié à un produit, ne lui donne rien à afficher, il reste donc vide. Placez-le sur un modèle de produit unique, un modèle d'é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é dans les paramètres de votre liste de souhaits et que vous consultez le site déconnecté, le bouton est intentionnellement masqué. Connectez-vous, ou désactivez ce paramètre, pour le voir.
- SaveTo Wishlist est antérieur à la version 1.1.3. Le widget n'existe pas dans les versions antérieures. Mettez à jour le plugin.
Deux boutons de liste de souhaits apparaissent sur la page produit
Cela 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, de sorte que seul le bouton que vous avez placé s'affiche.
Les produits liés, les ventes incitatives et les ventes croisées sont délibérément laissés seuls, car ces cartes s'affichent via le placement de la boutique. Si vous voyez un deuxième bouton sur ceux-ci, c'est le placement de la boutique qui fait son travail. Modifiez-le dans SaveTo Wishlist > Paramètres > Placement et styles des boutons &.
Les sélecteurs de couleur n'ont aucun effet
Deux paramètres désactivent les contrôles de couleur, et chacun affiche un message dans le panneau expliquant pourquoi.
Si le mode bouton produit est défini sur Thème par défaut, le bouton hérite du style de bouton de votre thème et le plugin n'applique aucune couleur propre. Passez le mode bouton produit à Prédéfini dans les paramètres de votre liste de souhaits pour contrôler les couleurs.
Si votre icône de liste de souhaits est une image personnalisée téléchargée, Couleur de l'icône et Couleur de l'icône (au survol) ne font rien, car une image téléchargée ne peut pas être teintée. Remplacez-la par une forme d'icône intégrée dans les paramètres de votre liste de souhaits si vous souhaitez un contrôle des couleurs.
Une mise en page de blog apparaît à la place de la liste de souhaits
Si vous ouvrez un lien de liste de souhaits et voyez la conception de votre archive de publications à la place de la liste de souhaits, un modèle d'archive Elementor Theme Builder prend le contrôle de la page. Cela se produit lorsque la condition d'affichage de ce modèle cible l'archive des publications, qui correspond également aux vues de liste de souhaits individuelles.
Pour contourner le problème :
- 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 d'articles sous forme de page autonome plutôt que de modèle Theme Builder.
Questions fréquemment posées
Ai-je besoin d'Elementor Pro pour utiliser le widget ?
Non. Le widget Save to Wishlist fonctionne avec Elementor gratuit. Elementor Pro est uniquement nécessaire pour les widgets Loop Grid et Loop Carousel, ainsi que pour les modèles Theme Builder.
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, y compris la taille, le remplissage, l'épaisseur de la bordure et la forme de l'icône, provient toujours de vos paramètres de liste de souhaits.
Puis-je utiliser le widget et le placement automatique ensemble ?
Oui. Le plugin gère le chevauchement pour vous. Sur un modèle de produit contenant le widget, il désactive son propre placement de produit unique, et à l'intérieur des éléments de boucle, il se désactive afin que chaque carte affiche un bouton.
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 solides. Une couleur transparente ou globale s'afficherait correctement dans l'éditeur, puis reviendrait à la couleur enregistrée sur la page en direct, de sorte que ces options sont désactivées plutôt que de vous induire en erreur.
Besoin d'aide ?
Si vous avez une question ou rencontrez un problème, nous sommes là pour vous aider.
- Utilisateurs premium : Ouvrir un ticket de support
- Utilisateurs gratuits : Visitez notre forum communautaire
