Comment utiliser les modèles prédéfinis pour styliser les boutons de liste de souhaits

Votre boutique a besoin d'un relooking, mais vous n'avez pas le temps de retoucher manuellement chaque pixel ? Choisir le bon look pour vos boutons Ajouter à la liste de souhaits ne devrait pas être une corvée qui prend du temps.

Avec les paramètres du Mode de configuration de SaveTo Wishlist, vous pouvez styliser professionnellement vos boutons de liste de souhaits en quelques secondes. Que vous souhaitiez utiliser des Styles prédéfinis instantanés ou plonger dans les Paramètres personnalisés, vous avez désormais un contrôle total sur l'apparence de vos boutons sur les pages Produit, Boutique et Panier.

À la fin de ce guide, vous saurez comment basculer entre les modes de conception et donner à votre boutique un look cohérent et professionnel qui correspond parfaitement à votre marque.

Prérequis

• SaveTo Wishlist Lite installé et actif.
• Accès administrateur à votre tableau de bord WordPress.
• WooCommerce installé et configuré.

Pourquoi utiliser les styles prédéfinis de boutons ?

La vitesse et la cohérence sont essentielles pour toute boutique WooCommerce en croissance. Lorsque vos boutons sont superbes et fonctionnent de manière identique sur toutes les pages, cela renforce la confiance de vos clients.

Les préréglages font gagner du temps — échangez les looks des boutons instantanément sans CSS manuel ni sélection de couleurs. Et comme chaque emplacement de page est indépendant, vous pouvez appliquer différents designs aux pages Produit, Boutique et Panier séparément.

💡 Astuce :
Si vous préférez un look complètement unique, vous pouvez toujours utiliser un préréglage comme « base » puis personnaliser les couleurs par la suite !

1. Accéder aux onglets de style des boutons

Nous avons organisé les paramètres en catégories faciles à gérer afin que vous puissiez styliser chaque partie de votre boutique individuellement.

1. Accédez à SaveTo Wishlist → Paramètres.
2. Accédez à l'onglet Placement et styles des boutons.
3. Trois sections apparaissent : Produit, Boutique et Panier. Cliquez sur celle que vous souhaitez modifier.

2. Choisir votre mode de configuration

Chaque emplacement dispose d'un sélecteur radio Mode de configuration. C'est ici que vous décidez du niveau de contrôle que vous souhaitez :

1. Sélectionnez Utiliser les préréglages pour afficher la galerie de modèles de boutons de liste de souhaits.
2. Alternativement, sélectionnez Paramètres personnalisés si vous préférez sauter les modèles et utiliser les sélecteurs de couleurs manuels.

3. Appliquer un modèle prédéfini

Dans chaque section, sélectionnez l'onglet Utiliser les préréglages sous l'option Mode de configuration.

1. Parcourez les préréglages disponibles (par exemple, « Classique Rouge », « Minimal Sombre » ou « Violet Moderne »).
2. Cliquez sur un préréglage pour l'appliquer. L'outil mettra automatiquement à jour la forme, la bordure et la disposition par défaut du bouton.

4. Affiner vos couleurs

Si vous choisissez Paramètres personnalisés, le sélecteur de préréglages est remplacé par des contrôles de conception individuels. Utilisez-les pour construire votre bouton à partir de zéro ou pour personnaliser une « base » prédéfinie.

1. Typographie et taille : Définissez la Taille du texte et la Taille de l'icône exactes.
2. Sélecteurs de couleurs : Choisissez manuellement votre couleur d’arrière-plan, la couleur du texte et la couleur de l’icône.
3. Bordure et forme : Ajustez la largeur de la bordure, la couleur et l’arrondi des coins.
4. Le sélecteur de couleurs reste ouvert pendant que vous travaillez, ce qui permet de comparer plus rapidement différentes nuances sans avoir à fermer le menu de manière répétée.

5. Appliquer des styles indépendants

N'oubliez pas que vous pouvez mélanger et assortir les styles pour différents contextes !

1. Utilisez un grand bouton Personnalisé sur votre page produit pour en faire l’appel à l’action principal.
2. Appliquez le Preset Minimal sur votre page boutique pour garder votre grille de produits épurée et sans encombrement.
3. Sélectionnez le Preset Moderne sur la page panier pour encourager les clients à enregistrer des articles pour plus tard au lieu de les abandonner.

6. Enregistrer et examiner vos modifications

1. Cliquez sur Enregistrer les modifications en bas de la page.
2. Visitez votre boutique et une page produit pour voir vos nouveaux styles de boutons en action !

Dépannage des problèmes courants

⚠︎ Le preset n’a pas changé la couleur de mon bouton.
Les presets contrôlent principalement la structure et le modèle du bouton. Si vous avez précédemment défini une « couleur personnalisée », cette couleur sera remplacée. Mettez à jour les paramètres du sélecteur de couleurs directement depuis l’onglet enfant Paramètres personnalisés pour vous assurer que les couleurs de votre marque sont appliquées au nouveau modèle.

⚠︎ Le bouton est différent sur mon téléphone portable.
Certains thèmes WordPress ont des « styles globaux » très puissants qui tentent de remplacer les boutons des plugins. Si votre bouton semble « encadré » ou si la police est trop petite, essayez un autre preset ou vérifiez les paramètres de bouton de votre thème.

Si la mise en page de votre page ne se met pas à jour après l’enregistrement, videz le cache de votre site. Pour en savoir plus, consultez le guide officiel de WooCommerce sur la suppression des caches.

FAQ

➤ Quand dois-je utiliser le mode Preset au lieu du mode Personnalisé ?
Utilisez le mode Preset si vous souhaitez un design « bon » garanti rapidement. Utilisez le mode Personnalisé si votre marque utilise des couleurs non standard ou si vous avez besoin que le bouton ait une taille très spécifique.

➤ La modification du preset de la page boutique affecte-t-elle la page produit ?
Non. Chaque emplacement de page (Produit, Boutique, Panier) est 100 % indépendant, vous permettant d’optimiser l’expérience utilisateur pour chaque zone spécifique de votre boutique.

➤ La sélection d’un nouveau preset supprimera-t-elle mes couleurs personnalisées précédentes ?
Oui, si vous confirmez la modification, vos paramètres actuels seront remplacés par les styles par défaut du preset sélectionné. Après avoir appliqué le preset, vous pouvez toujours mettre à jour les couleurs depuis l’onglet enfant Paramètres personnalisés.

Accélérez la conception de votre boutique avec des modèles prédéfinis

Vous êtes maintenant passé de la conception manuelle à la conception à grande vitesse ! En utilisant les modèles prédéfinis, vous vous assurez que votre boutique a un aspect professionnel et cohérent, ce qui est un facteur clé pour convertir les visiteurs en acheteurs.

Maintenant que vos boutons sont parfaits, rendez-vous dans l'onglet Général et activez Notifications de fondu pour rendre l'expérience « Ajouter à la liste de souhaits » encore plus fluide !