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.
- Version Lite de SaveTo Wishlist 1.1.6 ou ultérieure si vous souhaitez le bouton dans les grilles de produits Premium Addons pour Elementor.
- 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.
Placer le widget à l'intérieur d'un élément de boucle n'désactive pas le bouton de la boutique. Si votre placement de bouton de boutique est toujours actif sur ce modèle, la carte affiche les deux : le bouton de la boutique et celui du widget. Pour que le widget soit le seul bouton sur la carte, réglez votre placement de bouton de boutique sur Ne pas afficher dans SaveTo Wishlist > Paramètres > Placement et styles des boutons.
Afficher le bouton dans les grilles de produits Premium Addons
Si vous utilisez Premium Addons pour Elementor, le bouton de liste de souhaits apparaît sur chaque carte de sa grille de produits WooCommerce ou de son widget de carrousel. Vous n'ajoutez pas de widget pour cela. Le bouton apparaît de lui-même une fois que SaveTo Wishlist Lite 1.1.6 ou une version ultérieure est actif.
Le bouton suit votre réglage Page de boutique > Placement du bouton dans SaveTo Wishlist > Paramètres > Placement et styles des boutons :
- Au-dessus du titre du produit, En dessous du titre du produit, Au-dessus du bouton Ajouter au panier et En dessous du bouton Ajouter au panier placent le bouton à l'endroit correspondant sur la carte. Si votre grille masque cette partie de la carte, ou affiche son bouton Ajouter au panier ailleurs, le bouton apparaît à la fin des détails de la carte à la place.
- En haut à droite de l'image du produit et En haut à gauche de l'image du produit affichent le bouton en haut de la zone de détails de la carte au lieu de sur l'image. Premium Addons n'a pas d'espace dans sa zone d'image pour le bouton.
- Ne pas afficher masque également le bouton dans les grilles Premium Addons.
Si Désactiver la liste de souhaits des invités est activé, les visiteurs non connectés ne voient pas non plus le bouton dans ces grilles.
Si l'option Paramètres de cache du widget de grille, dans son onglet Avancé dans Elementor, est définie sur Actif, le bouton n'est pas ajouté. Cela empêche le statut de liste de souhaits d'un visiteur d'être mis en cache et montré à tout le monde. Définissez-le sur Défaut ou Inactif pour afficher le bouton.
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.
Les grilles de produits Premium Addons ne nécessitent aucun widget. Le bouton apparaît automatiquement sur chaque carte, comme décrit dans la section ci-dessus.
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.
Mettez à jour vers la version Lite de SaveTo Wishlist 1.1.5 ou ultérieure pour corriger cela. La vue unique de la liste de souhaits se résout maintenant sur la page de la liste de souhaits elle-même, donc un modèle d'archive Elementor Theme Builder ne correspond plus. Les règles de réécriture sont vidées automatiquement lors de la mise à jour, il n'y a donc rien à sauvegarder à nouveau dans les Permaliens.
La correction ne s'applique pas dans trois configurations, donc la solution de contournement ci-dessous est toujours la réponse si vous êtes dans l'une d'entre elles :
- La page de liste de souhaits est un brouillon ou a été mise à la corbeille plutôt que publiée.
- Vous utilisez WPML et deux versions linguistiques de la page de liste de souhaits partagent le même slug.
- La page de la liste de souhaits est également définie comme la page des articles sous Paramètres > Lecture.
Si vous utilisez une version antérieure, ou si votre site correspond à l'un des cas ci-dessus, contournez le problème à la place :
- 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, mais les deux emplacements ne se coordonnent pas automatiquement partout. Sur un modèle de produit unique contenant le widget, le plugin désactive son propre placement de produit unique, vous obtenez donc un bouton. Dans un élément de boucle, le placement du widget ne désactive pas le placement de la boutique. S'il est toujours actif, les deux boutons s'affichent. Définissez votre placement de bouton de boutique sur Ne pas afficher si vous souhaitez que le widget soit le seul bouton sur la carte.
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 ?
- Utilisateurs premium : Ouvrir un ticket de support
- Utilisateurs gratuits : Visitez notre forum communautaire
