Votre boutique a son propre look, avec ses propres couleurs, polices et agencement. Ce guide vous montre comment faire correspondre le bouton SaveTo Wishlist à celui-ci, sur les pages produit, boutique et panier, sans toucher à aucun code.
Prérequis
- WooCommerce installé et configuré.
- SaveTo Wishlist Lite installé et actif.
- Accès administrateur à votre tableau de bord WordPress.
Action de la liste de souhaits
Le paramètre Bouton Ajouter à la liste de souhaits contrôle ce qui se passe lorsqu'un client clique sur le bouton de la liste de souhaits. Vous le trouverez sous SaveTo Wishlist → Paramètres → Général → Action de la liste de souhaits.
Il existe trois options :
- Redirection : envoie le client directement vers sa page de liste de souhaits après le clic. Idéal pour les boutiques où vous souhaitez que les clients consultent immédiatement leur liste de souhaits.
- Popup : affiche une popup de confirmation sans quitter la page. Utile lorsque vous souhaitez que les acheteurs restent sur la page et continuent leurs achats.
- Fondu : un petit message de confirmation apparaît en fondu à côté du bouton pour confirmer que le produit a été enregistré, sans navigation ni popup. C'est l'option la plus subtile, idéale lorsque vous souhaitez une interruption minimale du flux d'achat.
Où trouver les paramètres
Allez dans votre Tableau de bord WordPress → SaveTo Wishlist → Paramètres → Emplacement et styles du bouton.
Vous verrez cinq sections principales :
- Paramètres du bouton : étiquette du bouton de liste de souhaits, étiquette affichée après l'ajout d'un produit, et interrupteurs marche/arrêt pour les plugins compatibles tels que Quick View pour WooCommerce (ceux-ci n'apparaissent que lorsque ce plugin est actif)
- Style frontal : le paramètre Chargement CSS frontal qui contrôle la quantité de CSS du plugin chargée sur votre boutique (couvert dans la section Chargement CSS frontal ci-dessous)
- Page produit : placement et style du bouton sur les pages de produits uniques
- Page boutique : placement et style du bouton sur les listes de produits
- Page panier : style et étiquette du bouton « Enregistrer le panier dans la liste de souhaits »
Après avoir modifié un paramètre dans cet onglet, cliquez sur Enregistrer les modifications.
Paramètres du bouton
Étiquette du bouton de liste de souhaits définit le texte par défaut pour tous les boutons de liste de souhaits de votre boutique. Le défaut est Enregistrer dans la liste de souhaits, mais vous pouvez le changer pour tout ce qui convient, comme Ajouter aux favoris ou Garder pour plus tard. Gardez-le court et clair.
Étiquette du bouton de liste de souhaits sélectionné vous permet d'afficher une étiquette différente une fois qu'un produit a été ajouté à la liste de souhaits. Le défaut est Supprimer de la liste de souhaits, ce qui permet aux acheteurs de supprimer l'article en un clic. Vous pouvez le changer pour tout ce qui convient à votre boutique.
L'action du bouton de liste de souhaits sélectionnée contrôle ce qui se passe lorsqu'un acheteur clique sur le bouton d'un produit déjà présent dans sa liste de souhaits. La valeur par défaut est Retirer de la liste de souhaits, ce qui retire le produit en un clic. Passez à Voir la liste de souhaits pour envoyer l'acheteur à sa page de liste de souhaits à la place.
Si un plugin compatible tel que Quick View pour WooCommerce est actif, cette section affiche également un interrupteur marche/arrêt pour celui-ci. Voir Utilisation du bouton avec Quick View pour WooCommerce ci-dessous.
Astuce Pro : Gardez les étiquettes des boutons courtes et orientées vers l'action pour faciliter la prise de décision des acheteurs.
Page produit
La section Page produit contrôle l'apparence du bouton de liste de souhaits sur les pages de produits individuels où les acheteurs consultent un seul produit avant d'acheter.
Emplacement du bouton détermine où le bouton apparaît sur la page produit. Le défaut est En haut à droite de l'image du produit, mais vous pouvez aussi choisir En haut à gauche de l'image du produit, Au-dessus du bouton Ajouter au panier, En dessous du bouton Ajouter au panier, En ligne avec le bouton Ajouter au panier, Au-dessus du titre du produit, ou En dessous du titre du produit. Pour masquer complètement le bouton de liste de souhaits sur les pages produit uniques, choisissez Ne pas afficher.
Choisir En ligne avec le bouton Ajouter au panier révèle un champ Espacement des boutons, l'écart en pixels entre le bouton Ajouter au panier et le bouton de liste de souhaits. Il est par défaut à 16px et peut être réglé de 0 à 60px. Votre valeur s'applique sur tous les appareils. Sur les écrans tactiles, un écart inférieur à 8px est augmenté à 8px, afin que les clients ne tapent pas sur le mauvais bouton.
⚠️ Produits sans prix ou en rupture de stock : À partir de la version 1.0.7, les placements Au-dessus du bouton Ajouter au panier, En dessous du bouton Ajouter au panier et En ligne avec le bouton Ajouter au panier affichent également le bouton de liste de souhaits sur les produits qui n'ont pas de prix, sont en rupture de stock ou sont en mode catalogue. Ces produits masquent normalement le formulaire d'ajout au panier de WooCommerce, le bouton se rabat donc sur un emplacement proche dans le résumé du produit au lieu de disparaître.
Le paramètre suivant est le Mode de configuration. Choisissez Utiliser les préréglages pour choisir parmi des combinaisons de styles prêtes à l'emploi, Paramètres personnalisés pour définir vous-même les couleurs, les bordures et le texte, ou Défaut du thème pour hériter de l'apparence des boutons de votre thème actif.
Définir les couleurs et les bordures des boutons
Les champs de couleur et de bordure apparaissent sous Personnaliser le bouton de liste de souhaits sur la page produit, et uniquement lorsque le Mode de configuration est défini sur Paramètres personnalisés. Chaque champ de couleur ouvre un sélecteur de couleur.
| Champ | Ce qu'il change | Par défaut |
|---|---|---|
| Couleur du texte du bouton | La couleur du texte du bouton. Elle s'applique aux types de boutons qui affichent du texte. | #1F2937 |
| Couleur du texte du bouton au survol | La couleur du texte lorsqu'un client survole le bouton. | #DC2626 |
| Couleur d'arrière-plan du bouton | La couleur de remplissage derrière le bouton. | #FFFFFF |
| Couleur d'arrière-plan du bouton au survol | La couleur de remplissage lorsqu'un client survole le bouton. | #F9FAFB |
| Couleur de la bordure du bouton | La couleur de la bordure du bouton. | #E5E7EB |
| Couleur de la bordure du bouton au survol | La couleur de la bordure lorsqu'un client survole le bouton. | #DC2626 |
| Épaisseur de la bordure du bouton | L'épaisseur de la bordure en pixels, de 0 à 5. | 1 |
| Rayon de la bordure du bouton | À quel point les coins du bouton sont arrondis, en pixels, de 0 à 50. Utilisez 0 pour des coins carrés. | 4 |
| Rembourrage vertical du bouton | L'espace au-dessus et au-dessous du contenu du bouton, en pixels, de 0 à 30. | 3 |
| Rembourrage horizontal du bouton | L'espace à gauche et à droite du contenu du bouton, en pixels, de 0 à 40. | 8 |
Tous les champs ne s'appliquent pas à tous les types de boutons. La couleur et l'épaisseur de la bordure s'affichent uniquement sur les types Texte uniquement et les trois types de boutons Pilule. Les couleurs d'arrière-plan, le rayon de la bordure et le rembourrage ne s'appliquent pas aux types Icône uniquement, Icône pleine ou Icône minimale.
Choisissez le type de bouton et le style du texte
Trois champs supplémentaires se trouvent en bas des paramètres personnalisés. Taille du texte du bouton définit la taille du texte du bouton en pixels, de 10 à 24 (par défaut 14). Style du texte du bouton bascule le texte entre Normal (par défaut) et Italique.
Type de bouton décide ce que le bouton affiche et à quoi il ressemble. La valeur par défaut est Icône et texte minimaux. Les options sont :
- 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
Icône seule, Icône pleine et Icône minimale n'affichent que l'icône, donc le texte, l'arrière-plan, la bordure et les champs de remplissage n'ont rien à changer pour eux. Pour choisir la forme de l'icône elle-même, voir Choisir une icône de bouton ci-dessous.
Astuce Pro : Avec Paramètres personnalisés sélectionnés, utilisez l'aperçu en direct pour voir à quoi ressemble votre bouton dans les états normal et au survol avant d'enregistrer vos modifications.
Page boutique
La section Page boutique contrôle l'apparence des boutons de liste de souhaits sur vos grilles de produits, pages de catégories et pages d'archives, partout où les clients parcourent plusieurs produits à la fois.
Placement du bouton par défaut en haut à droite de l'image du produit, mais vous pouvez également le positionner dans le coin supérieur gauche, au-dessus ou en dessous du bouton Ajouter au panier, ou au-dessus ou en dessous du titre du produit. Les positions dans les coins supérieurs conviennent mieux aux pages de grille. Pour masquer le bouton de liste de souhaits sur les pages de boutique, de catégorie et d'archive, choisissez Ne pas afficher.
Comme la section Page produit, elle a l'option Mode de configuration. Choisissez Utiliser les préréglages pour une configuration rapide avec des combinaisons prêtes à l'emploi, Paramètres personnalisés pour affiner chaque couleur, taille de police, largeur de bordure et style de texte pour correspondre à la marque de votre magasin, ou Défaut du thème pour hériter de l'apparence du bouton de votre thème actif. Les champs personnalisés correspondent à ceux de la page produit, à la différence que Type de bouton est appelé Style de bouton ici.
Astuce Pro : Pour une page de boutique élégante et moderne, sélectionnez Paramètres personnalisés, définissez Style du bouton sur Icône uniquement et utilisez un placement dans le coin supérieur. Cela permet d'économiser de l'espace tout en gardant l'option de liste de souhaits visible.
Utilisation du bouton avec les constructeurs de pages
Si vous créez votre mise en page de boutique ou de catégorie avec les widgets Loop Grid ou Loop Carousel d'Elementor Pro, le bouton de liste de souhaits s'affiche automatiquement à l'intérieur de chaque carte produit, en utilisant l'emplacement que vous avez défini ci-dessus dans Page de boutique. Aucun réglage séparé n'est nécessaire, mais Elementor Pro doit être actif.
Les grilles et carrousels de produits de Premium Addons for Elementor obtiennent également le bouton automatiquement, en suivant votre emplacement de Page de boutique. 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. Voir Comment ajouter le bouton de liste de souhaits avec le widget Elementor pour plus de détails.
Si vous placez le bouton vous-même avec les widgets ou modules de votre constructeur au lieu de ces paramètres, consultez le guide dédié à votre constructeur : Comment ajouter le bouton de liste de souhaits avec le widget Elementor, Comment ajouter la liste de souhaits aux mises en page de Divi Builder, ou Comment ajouter la liste de souhaits à une page avec UX Builder de Flatsome.
Utilisation du bouton avec Blocksy
Si votre boutique utilise le thème Blocksy ou un thème enfant Blocksy, vous n’avez pas besoin de CSS personnalisé. SaveTo Wishlist charge automatiquement son propre style Blocksy, de sorte que le bouton s’intègre aux pages de boutique, d’archive et de produit unique de Blocksy.
Sur la Page Boutique, chaque emplacement fonctionne comme suit sur Blocksy :
- En haut à droite de l’image du produit, par défaut, est le meilleur ajustement, car Blocksy utilise le coin supérieur gauche de la carte pour son badge Soldes.
- En haut à gauche de l’image du produit déplace le bouton sous un badge Soldes, hors stock ou personnalisé de Blocksy, afin qu’il ne le recouvre pas. Si le badge est très grand, ou si vous affichez plus d’un badge dans ce coin, utilisez En haut à droite de l’image du produit.
- Au-dessus du titre du produit et En dessous du titre du produit affichent tous deux le bouton entre l’image du produit et le titre, car Blocksy rend son propre titre. Au-dessus du bouton Ajouter au panier l’affiche directement sous le titre. En dessous du bouton Ajouter au panier l’affiche après le bouton Ajouter au panier. Les quatre suivent l’alignement de votre carte Blocksy : gauche, centre ou droite.
Sur la Page Produit, les sept emplacements fonctionnent. En ligne avec le bouton Ajouter au panier se place à côté du bouton Ajouter au panier sur ordinateur et se déplace en dessous sur les écrans étroits. En haut à gauche de l’image du produit se déplace également sous un badge dans ce coin, comme sur la page boutique.
Utilisation du bouton avec Quick View pour WooCommerce
Si votre boutique utilise Reno Quick View de ShapedPlugin (anciennement Quick View pour WooCommerce), le bouton Enregistrer dans la liste de souhaits s'affiche également dans la fenêtre contextuelle de visualisation rapide. Les clients peuvent enregistrer un produit sans ouvrir sa page produit. Cela nécessite SaveTo Wishlist Lite 1.1.7 ou une version ultérieure.
La fenêtre contextuelle utilise votre emplacement et votre style Page Produit, il n'y a donc rien de plus à configurer. Certaines choses fonctionnent un peu différemment dans la fenêtre contextuelle :
- En haut à droite de l'image du produit et En haut à gauche de l'image du produit affichent le bouton au-dessus du titre du produit, pas sur l'image.
- Sur un produit variable, le bouton suit la variation que le client choisit dans la fenêtre contextuelle.
- Si l'emplacement de la Page Produit est Ne pas afficher, la fenêtre contextuelle n'affiche pas non plus le bouton.
Pour conserver le bouton hors de la fenêtre contextuelle tout en le laissant sur vos pages produit :
- Allez dans SaveTo Wishlist → Paramètres → Placement et styles des boutons → Paramètres des boutons.
- Désactivez Afficher dans la vue rapide pour WooCommerce.
- Cliquez sur Enregistrer les modifications.
Le commutateur est activé par défaut. Il n'apparaît que lorsque la Vue rapide pour WooCommerce est active.
Page panier
La section Page Panier concerne le bouton « Enregistrer le panier dans la liste de souhaits », le bouton qui permet aux clients d'enregistrer leur panier entier en une seule fois. C'est idéal pour les clients qui veulent revenir plus tard ou partager leurs sélections.
L' Étiquette du bouton du panier est par défaut « Enregistrer le panier dans la liste de souhaits ». Vous pouvez la changer pour quelque chose de plus convivial comme Enregistrer le panier pour plus tard ou ♥ Enregistrer mon panier. Les mêmes options de style de bouton, de couleur, de bordure et de texte disponibles sur les pages produit et boutique s'appliquent ici, vous pouvez donc maintenir la cohérence dans votre magasin.
Cette section a également l'option Mode de configuration : choisissez Utiliser les préréglages pour une configuration rapide, Paramètres personnalisés pour contrôler vous-même les couleurs, les bordures et le texte, ou Défaut du thème pour hériter de l'apparence du bouton de votre thème actif. Comme sur la page de la boutique, Type de bouton est appelé Style de bouton ici.
Choisir une icône de bouton
Passer le Mode de configuration à Paramètres personnalisés sur la page Produit, Boutique ou Panier révèle un paramètre Icône de bouton pour cette page. Choisissez parmi Cœur (par défaut), Étoile, Marque-page ou Plus, ou sélectionnez Image personnalisée pour révéler un téléchargeur d’Icône de bouton personnalisée. Le bouton continue d’afficher un cœur jusqu’à ce qu’une image soit téléchargée.
Les mêmes paramètres personnalisés incluent également la Couleur de l'icône du bouton et la Couleur de l'icône au survol du bouton (toutes deux #DC2626 par défaut), et la Taille de l'icône du bouton, de 12 à 40 pixels (par défaut 20). Les champs de couleur de l'icône sont masqués lorsque vous choisissez Image personnalisée, car ils ne peuvent pas modifier une image téléchargée.
Chargement du CSS frontal
Le paramètre Chargement du CSS frontal contrôle la quantité de feuilles de style du plugin qui se charge sur votre boutique. Vous le trouverez sous SaveTo Wishlist → Paramètres → Placement et styles des boutons → Styles frontaux.
Il existe trois options :
- Style complet : utiliser les couleurs et les polices du plugin (par défaut). Charge la feuille de style complète du plugin. Fonctionne immédiatement pour la plupart des magasins.
- Style minimal : laisser votre thème remplacer les couleurs et les polices. Charge les couleurs et les arrière-plans sans remplacements
!important, de sorte que le CSS de votre thème puisse l'emporter en cas de conflit. Essayez d'abord cela si le bouton de liste de souhaits entre en conflit avec votre thème. - Aucun style : hériter des couleurs et des polices du thème actif. Supprime les couleurs et les polices du plugin afin que le bouton les récupère de votre thème. Idéal pour les développeurs qui effectuent une construction entièrement personnalisée. Les tailles de bouton, les positions et le CSS de mise en page du plugin sont préservés dans tous les modes.
Résumé
Utilisez Action de la liste de souhaits (Paramètres → Général) pour contrôler ce qui se passe après un clic. Utilisez Emplacement et styles du bouton pour définir les étiquettes, l’emplacement, les couleurs et le chargement CSS pour chaque page où le bouton apparaît.
Bonnes pratiques
- Faites correspondre les couleurs et le style du bouton à votre thème de boutique
- Gardez les étiquettes courtes et orientées vers l'action
- Testez les boutons sur mobile pour la lisibilité et la taille du tap
- Utilisez l'aperçu en direct pour confirmer vos paramètres avant d'enregistrer
Dépannage
Le style du bouton ne se met pas à jour après l'enregistrement
Si vous modifiez les paramètres et que le bouton semble identique sur le front-end, essayez de passer le Mode de configuration de Utiliser les préréglages à Paramètres personnalisés (ou vice versa) et enregistrez à nouveau. Videz également les plugins de mise en cache ou le cache CDN. Le CSS mis en cache peut empêcher l'affichage des modifications de style.
Le bouton de liste de souhaits entre en conflit avec le CSS du thème
Si le bouton semble cassé ou entre en conflit avec les styles de votre thème, allez dans SaveTo Wishlist → Paramètres → Placement et styles des boutons → Styles frontaux et changez Chargement du CSS frontal de Style complet à Style minimal. Cela permet au CSS de votre thème de remplacer les couleurs et les polices là où elles entrent en conflit. Pour une construction entièrement personnalisée, Aucun style vous offre une page blanche.
Le bouton de liste de souhaits est manquant dans la fenêtre contextuelle de la vue rapide
Allez dans SaveTo Wishlist → Paramètres → Placement et styles des boutons → Paramètres des boutons et vérifiez que Afficher dans la vue rapide pour WooCommerce est activé. Vérifiez ensuite que l'emplacement Page Produit n'est pas défini sur Ne pas afficher. Si seuls les acheteurs non connectés ne peuvent pas le voir, Désactiver la liste de souhaits pour les invités sous Paramètres → Options pour les invités est probablement activé, ce qui masque le bouton pour les invités partout.
Questions fréquemment posées
Quelle est la différence entre Utiliser les préréglages et Paramètres personnalisés ?
Les préréglages vous offrent un ensemble de combinaisons de styles prêtes à l'emploi, ainsi un clic applique un look coordonné. Les paramètres personnalisés débloquent des contrôles individuels pour la couleur, la taille de la police, la largeur de la bordure, l'icône et les effets de survol afin que vous puissiez tout ajuster manuellement.
Que fait Fade visuellement ?
Sur les pages produits et boutique, cliquer sur le bouton liste de souhaits affiche un court message de confirmation (une icône de coche et « Ajouté à [nom de la liste de souhaits] ») qui apparaît brièvement à côté du bouton, reste environ deux secondes, puis disparaît. Le bouton lui-même reste visible pendant tout ce temps. Sur la page panier, le bouton Enregistrer le panier dans la liste de souhaits disparaît brièvement pour confirmer l’enregistrement. Il n’y a pas de popup ni de redirection de page.
Mes personnalisations seront-elles conservées si je change de thème ?
Oui. Les styles des boutons sont enregistrés dans les paramètres du plugin, pas dans votre thème. Changer de thème ne réinitialisera pas le texte de vos étiquettes, vos couleurs ou vos choix de placement. Cela dit, certains thèmes remplacent les styles de boutons par leur propre CSS, il est donc utile de vérifier l’apparence après un changement de thème.
Besoin d'aide ?
- Utilisateurs premium : Ouvrir un ticket de support
- Utilisateurs gratuits : Visitez notre forum communautaire
