Comment styliser la page de liste de souhaits

Votre page de liste de souhaits est souvent le dernier arrêt pour un client avant qu'il ne décide d'acheter. Si cette page ressemble à un plugin générique qui jure avec les couleurs et les polices de votre marque soigneusement choisies, cela peut créer une « déconnexion » qui nuit à la confiance.

Par défaut, la page de liste de souhaits utilise un schéma de couleurs bleues qui ne correspond pas toujours à tous les thèmes WordPress. Les paramètres Personnalisation du style de la page de liste de souhaits de SaveTo Wishlist vous permettent de modifier la typographie et les couleurs de la page de liste de souhaits afin qu'elle corresponde à la marque de votre boutique, sans écrire de CSS.

Ce guide présente les paramètres de style disponibles et comment les appliquer.

💡 Note :
Ces paramètres affectent spécifiquement la page principale de la liste de souhaits (où les clients voient leurs articles enregistrés) plutôt que les boutons « Ajouter à la liste de souhaits » trouvés sur les pages de produits.

🔗 Ressource externe :
Si vous n’êtes pas sûr des couleurs à utiliser, nous vous recommandons de consulter Adobe Color pour trouver de l’inspiration pour des palettes accessibles.

Prérequis

Avant de commencer, assurez-vous d'avoir :

• SaveTo Wishlist Lite installé et activé sur votre boutique
• Une page de liste de souhaits déjà configurée (le plugin en crée une automatiquement à l'activation)

Étape par étape : Conception de votre page de liste de souhaits personnalisée

1. Localisez les paramètres de style

Tous vos outils de conception sont regroupés pour un accès facile.

1. Allez dans SaveTo Wishlist → Paramètres.
2. Cliquez sur l'onglet Page de liste de souhaits et faites défiler jusqu'à la section Styles.

2. Personnalisez les en-têtes et les titres

L'en-tête est la première chose que vos clients voient. Faites-le ressortir :

• Taille et couleur du titre de l'en-tête : Ajustez la Taille du titre de l'en-tête et la Couleur du titre de l'en-tête pour correspondre aux balises H1 ou H2 principales de votre site.
• Taille et couleur du texte de l'en-tête : Contrôlez la zone de sous-texte ou de description pour vous assurer qu'elle est lisible et qu'elle correspond à la couleur du corps de votre marque.

3. Stylisez le tableau de la liste de souhaits

C'est là que se trouvent les données du produit. Vous pouvez maintenant affiner l'apparence « technique » de la liste :

• Taille du texte des colonnes du tableau : Changez la taille du texte pour les en-têtes comme « Nom du produit » ou « Prix ».
• Taille du texte des lignes du tableau : Ajustez la taille de la police des détails de l'article dans la liste pour une meilleure lisibilité sur ordinateur et mobile.

4. Concevez la fenêtre modale contextuelle

Si vous utilisez l'action contextuelle, assurez-vous que la fenêtre correspond à l'esthétique de votre site :

• Taille et couleur du titre contextuel : Définissez la taille de la police et la couleur de votre titre contextuel.
• Taille et couleur du texte contextuel : Utilisez ces contrôles pour vous assurer que les instructions sont claires.
• Boutons Enregistrer et Annuler contextuels : Utilisez les sélecteurs de couleur pour les boutons Enregistrer et Annuler.

💡 Note :
Utilisez la couleur principale de votre marque pour le bouton Enregistrer, car il attire l'attention sur l'action.

5. Styliser les boutons

Ajustez la taille et les couleurs des boutons sur la page de la liste de souhaits :

• Taille du texte du bouton : Agrandissez ou réduisez votre bouton « Ajouter au panier » pour qu'il corresponde à votre langage de conception.
• Couleur du texte du bouton : Assurez un contraste élevé (par exemple, du texte blanc sur un fond sombre) en sélectionnant une couleur personnalisée.
• Couleur d'arrière-plan du bouton : Remplacez le bleu par défaut par la couleur principale de votre marque.

6. Prévisualiser et enregistrer

1. Cliquez sur Enregistrer les modifications en bas de la page.
2. Ouvrez votre page de liste de souhaits dans une nouvelle fenêtre de navigation privée pour voir les modifications exactement comme vos clients les verront.

✨ Astuce bonus : Faire correspondre les liens de votre liste de souhaits

Par défaut, les liens de votre page de liste de souhaits (comme les titres de produits) héritent généralement des paramètres globaux de liens de votre thème. Si vous souhaitez modifier ces couleurs pour mieux correspondre à vos nouveaux styles de boutons, vous pouvez généralement trouver ces paramètres dans votre tableau de bord WordPress sous Apparence → Personnaliser → Typographie → Couleur du lien / accent.

💡 Note :
Chaque thème est construit différemment ! Selon le thème que vous avez installé, ce paramètre peut également se trouver sous « Couleurs globales » ou « Styles de bouton et de lien ».

Laisser votre thème contrôler le style

Les paramètres de style ci-dessus vous donnent le contrôle grâce aux propres options de couleur et de police du plugin. Mais si vous préférez laisser votre thème dicter tout cela, ou si le CSS de votre thème fait déjà le gros du travail, vous pouvez dire à SaveTo Wishlist de s'écarter.

Accédez à SaveTo Wishlist → Paramètres → Placement et styles des boutons → Style frontal. Vous y trouverez le paramètre Chargement CSS frontal avec trois options :

• Style complet — utiliser les couleurs et les polices du plugin (par défaut). Le plugin charge sa feuille de style complète de couleurs et de polices. C'est l'expérience standard.
• Style minimal — laisser votre thème remplacer les couleurs et les polices. La feuille de style est toujours chargée, mais !important n'est pas utilisé sur les propriétés décoratives comme la couleur, l'arrière-plan et la bordure, de sorte que le CSS de votre thème peut gagner la cascade.
• Aucun style — hériter des couleurs et des polices du thème actif. La taille, la position et la mise en page des boutons sont conservées dans tous les modes. Seul le style visuel change.

💡 Note :
Les styles d'administration ne sont pas affectés par ce paramètre. Il contrôle uniquement la façon dont la feuille de style frontale est chargée pour vos clients.

Avant et après : faire correspondre la page de liste de souhaits à votre image de marque

Vous trouverez ci-dessous une comparaison avant-après montrant comment la page de liste de souhaits peut être personnalisée pour mieux correspondre au thème de votre boutique.

Passer de la vue tableau à la vue grille

Vos clients ne sont pas bloqués sur une seule mise en page. Sur la page de liste de souhaits, ils verront un sélecteur de vue à côté de la barre de recherche. Un clic permet de passer de la mise en page tableau standard à une mise en page en grille (tuiles).

La vue en grille affiche les articles de la liste de souhaits sous forme de vignettes de produits réactives. La mise en page s'adapte à la largeur de l'écran, affichant une seule colonne sur les petits écrans mobiles, puis deux, puis trois, et enfin quatre colonnes sur les écrans les plus larges. Chaque vignette affiche l'image du produit, le nom, le prix, le statut du stock, la quantité et un bouton Ajouter au panier. Toutes les actions habituelles sur les articles (le menu à trois points) sont toujours disponibles.

Quelle que soit la vue choisie par un client, elle est enregistrée dans son navigateur, elle sera donc toujours là la prochaine fois qu'il visitera depuis le même appareil.

Dépannage de votre conception

Mes modifications ne s'affichent pas sur le site

Ceci est presque toujours dû à la mise en cache. Si vous utilisez un plugin comme WP Rocket, LiteSpeed Cache, ou un CDN comme Cloudflare, assurez-vous de Vider/Purger le Cache après avoir enregistré vos styles. Vous pouvez également consulter le guide officiel de WooCommerce sur la mise en cache.

Le style de police ne correspond pas exactement à mon thème

Le plugin utilise par défaut la famille de polices héritée de votre thème. Ces paramètres vous permettent de modifier la taille et la couleur. Si la famille de polices elle-même semble incorrecte, assurez-vous que le CSS global de votre thème se charge correctement.

Les couleurs sont différentes sur mobile

Vérifiez si votre téléphone a le « Mode Sombre » activé, car certains navigateurs essaient d'inverser automatiquement les couleurs. Les couleurs que vous définissez dans les paramètres de style sont conçues pour remplacer la plupart de ces ajustements automatiques du navigateur.

Questions fréquemment posées

➤ Dois-je connaître le CSS pour changer ces couleurs ?
Pas du tout ! Nous avons créé une interface conviviale avec des sélecteurs de couleurs et des curseurs, vous n'aurez donc jamais à toucher une ligne de code.

➤ Ces paramètres ralentiront-ils ma page ?
Non. Ces styles sont légers et n'affecteront pas de manière perceptible le temps de chargement de la page.

Besoin d'aide ?

• Utilisateurs Premium : soumettez un ticket de support et notre équipe vous aidera.
• Utilisateurs gratuits : publiez dans le forum de support WordPress.org.