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 des préréglages de style de bouton ?

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. Vous pouvez changer l'apparence des boutons instantanément sans CSS manuel ni sélection de couleur. 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édez 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. Choisissez 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. Appliquez 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. Ajustez 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. Icône du bouton : Choisissez le glyphe utilisé par le bouton. Les choix sont Cœur, Étoile, Signet, Plus et Image personnalisée. Le cœur est la valeur par défaut, et le type de bouton contrôle toujours la mise en page et la graisse, donc cela ne change que la forme.
5. Icône de bouton personnalisée : Apparaît une fois que vous avez choisi Image personnalisée, et vous permet de télécharger votre propre glyphe. Choisir une image personnalisée masque également les paramètres de couleur de l'icône, car ceux-ci ne peuvent pas s'appliquer à une image téléchargée. Le bouton continue d'afficher un cœur jusqu'à ce que vous choisissiez réellement une image, alors téléchargez-en une pour finaliser le changement.
6. 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. Appliquez 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. Enregistrez et examinez 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.

Questions fréquemment posées

Quand dois-je utiliser le mode Prédéfini au lieu du mode Personnalisé ?
Utilisez le mode Prédéfini 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.

Changer le préréglage de la page Boutique affecte-t-il la page Produit ?
Non. Chaque emplacement de page (Produit, Boutique, Panier) est 100 % indépendant, vous pouvez donc régler chaque zone de votre magasin séparément.

Sélectionner un nouveau préréglage supprimera-t-il mes couleurs personnalisées précédentes ?
Oui, si vous confirmez le changement, vos paramètres actuels seront remplacés par les styles par défaut du préréglage sélectionné. Après avoir appliqué le préréglage, vous pouvez toujours mettre à jour les couleurs dans l'onglet enfant Paramètres personnalisés.

Prochaines étapes

Les préréglages maintiennent la cohérence du style des boutons dans votre magasin sans avoir à modifier les couleurs manuellement, et chaque emplacement de page reste indépendant afin que vous puissiez les ajuster séparément.

Une fois que les boutons ont l'apparence souhaitée, vous pouvez modifier ce qui se passe lorsqu'un client clique dessus. Définissez l'action du bouton dans la section Action de la liste de souhaits de l'onglet Général, décrit dans Comment activer les notifications de fondu « Ajouter à la liste de souhaits ».