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 et étiquette affichée après l'ajout d'un produit
- Style frontal – le paramètre Chargement CSS frontal qui contrôle la quantité de CSS du plugin chargée sur votre vitrine (couvert dans la section Chargement CSS frontal ci-dessous)
- Page produit – emplacement et style du bouton sur les pages de produits individuels
- Page boutique – emplacement et style du bouton sur les listes de produits
- Page panier – style et étiquette du bouton « Enregistrer le panier dans la liste de souhaits »
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.
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 Sous le bouton Ajouter au panier, mais vous pouvez aussi choisir Au-dessus du bouton Ajouter au panier, Au-dessus du titre du produit, Sous le titre du produit, En haut à droite de l'image du produit, ou En haut à gauche de l'image du produit.
⚠️ Produits sans prix ou hors stock : Depuis la version 1.0.7, les emplacements Au-dessus du bouton Ajouter au panier et Sous le bouton Ajouter au panier affichent également le bouton liste de souhaits sur les produits sans prix, hors stock, ou en mode catalogue. Ces produits masquent normalement le formulaire Ajouter au panier de WooCommerce, le bouton se place donc maintenant à un endroit proche dans le résumé du produit au lieu de disparaître.
Le paramètre suivant est l'option Mode de configuration. Choisissez Utiliser les préréglages pour sélectionner des combinaisons de styles prêtes à l'emploi, ou choisissez Paramètres personnalisés pour accéder manuellement au sélecteur de couleurs complet, aux polices et aux contrôles de taille.
Astuce Pro : 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.
Emplacement du bouton est par défaut sous le bouton Ajouter au panier, mais vous pouvez également positionner le bouton dans les coins supérieurs des images de produits ou au-dessus/en dessous des titres de produits. Pour un look épuré et moderne sur les pages de grille, la position dans le coin supérieur fonctionne généralement très bien.
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, ou Paramètres personnalisés pour ajuster finement chaque couleur, taille de police, largeur de bordure et style de texte afin de correspondre à la marque de votre magasin.
Astuce Pro : Pour une page boutique élégante et moderne, essayez les boutons Icône seule dans les coins supérieurs. Cela économise de l'espace tout en gardant l'option de liste de souhaits visible.
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.
Le Libellé du bouton Panier est par défaut « Enregistrer le panier dans la liste de souhaits ». Vous pouvez le changer pour quelque chose de plus convivial comme Enregistrer le panier pour plus tard ou ♥ Enregistrer mon panier. Les mêmes options de style, couleur, police et taille 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, ou Paramètres personnalisés pour contrôler vous-même les couleurs, les polices et les tailles.
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 — utilisez 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 boutiques.
- Style minimal — laissez votre thème remplacer les couleurs et les polices. Charge les couleurs et les arrière-plans sans remplacements
!important, afin que le CSS de votre thème puisse l'emporter en cas de conflit. Essayez d'abord cette option si le bouton de liste de souhaits entre en conflit avec votre thème. - Aucun style — héritez 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 liste de souhaits (Paramètres → Général) pour contrôler ce qui se passe après un clic. Utilisez Placement et styles des boutons pour définir les étiquettes, le placement, les couleurs et le chargement du CSS pour chaque page où le bouton apparaît, avec Redirection, Popup ou Fondu contrôlant ce qui se passe après un clic.
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.
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
