Revu par Vous installez un plugin de liste de souhaits sur votre boutique Woostify et chargez la page de la boutique. Le bouton se trouve quelque part d'étrange. Il encombre le bouton Ajouter au panier, ou il se cache derrière l'image d'un produit. Parfois, il disparaît lorsque vous survolez une carte de produit.
Ce n'est pas un petit problème cosmétique. Un bouton de liste de souhaits Woostify que personne ne peut trouver est un enregistrement qui n'arrive jamais. Et un enregistrement qui n'arrive jamais est un client que vous ne pouvez pas ramener.
Bonne nouvelle : SaveTo Wishlist Lite s'occupe du style dès qu'il détecte Woostify. Il ne peut pas décider à votre place où le bouton doit se trouver.
Ce guide couvre donc les deux aspects. D'abord, ce que l'intégration fait automatiquement. Ensuite, les choix de placement que vous ferez pour obtenir une mise en page harmonieuse, y compris deux positions spécifiques à éviter.
Table des matières
- Pourquoi le placement du bouton de liste de souhaits détermine si les clients enregistrent
- Ce que fait réellement l'intégration SaveTo Wishlist et Woostify
- Ce dont vous avez besoin avant de commencer
- Comment configurer vos boutons de liste de souhaits Woostify
- Les deux placements à éviter sur Woostify
- Comment confirmer que les styles Woostify se chargent
- Les listes de souhaits pour invités sont plus importantes que le style
- Directives de portée et de compatibilité
- Questions fréquemment posées : SaveTo Wishlist et Woostify
- Donnez au bouton d'enregistrement un endroit où vivre
Pourquoi le placement du bouton de liste de souhaits détermine si les clients enregistrent
Une liste de souhaits n'est utile que si les acheteurs l'utilisent réellement, et son emplacement joue un rôle majeur. Les données du secteur soulignent à quel point il est possible de se démarquer avec un design soigné.
Le benchmark UX des pages produits de l'Institut Baymard a été mis à jour en mars 2026. Il a révélé que 52 % des principaux sites e-commerce sur ordinateur ont des performances de page produit moyennes ou médiocres. Sur mobile, ce chiffre atteint 62 %. Le benchmark couvre 155 sites ou plus et plus de 30 000 notes évaluées manuellement.
Les listes de produits offrent une opportunité encore plus grande. Le benchmark de Baymard a révélé que 80 % des sites e-commerce laissent une marge de manœuvre importante pour l'amélioration de l'utilisabilité des listes de produits. Cela signifie qu'une mise en page claire et intentionnelle distinguera immédiatement votre boutique.
Ensuite, il y a la répartition par appareil. Adobe Analytics a rapporté que le mobile représentait 56,4 % des transactions en ligne pendant la saison des fêtes 2025, contre 54,5 % un an plus tôt. Tester votre placement sur les écrans d'ordinateur et mobiles garantit une expérience transparente pour tous les acheteurs.
🔍️ Une chose que nous constatons à plusieurs reprises : un propriétaire de boutique choisit un emplacement, le vérifie une fois sur un ordinateur portable, puis passe à autre chose. Les problèmes apparaissent presque toujours ailleurs. Généralement sur une archive de catégorie, sur un produit variable, ou sur un téléphone. Vérifiez les trois avant de considérer que c'est terminé.
Vous voulez avoir une vue d'ensemble des acheteurs qui regardent et repartent ? Notre guide sur l'abandon de navigation WooCommerce couvre ce schéma en détail.
Ce que fait réellement l'intégration SaveTo Wishlist et Woostify
L'intégration fonctionne automatiquement comme une feuille de style de compatibilité légère, maintenant votre boutique rapide et vous évitant d'avoir à fouiller dans des écrans de configuration complexes.
SaveTo Wishlist Lite 1.1.1 vérifie l'identifiant du modèle WordPress actif. Lorsqu'il lit exactement woostify, le plugin charge une feuille de style supplémentaire. Cette feuille de style se superpose à la feuille de style front-end de base que vous avez sélectionnée. Elle ajuste ensuite l'empilement, l'alignement et l'espacement afin que le bouton s'intègre au balisage de Woostify.
Voici ce qu'il modifie, et ce qu'il laisse délibérément intact.
| Contexte | Ce que la feuille de style Woostify ajuste |
|---|---|
| Boutique et archive, placements sur image | Augmente l'indice z du conteneur du bouton à z-index: 3, de sorte qu'il s'empile au-dessus de l'image du produit |
| Boutique et archive, placements en ligne | Définit une disposition flex verticale avec une marge supérieure de 10 pixels. Correspond également aux alignements gauche, centre et droite de Woostify |
| Résumé du produit unique | Ajoute une marge supérieure de 12 pixels pour créer un espacement net et équilibré avec l'élément qui le précède. |
| Couleurs, typographie, bordures, dimensionnement | Conservé tel quel. Ceux-ci restent entièrement personnalisables via les paramètres de votre plugin et de votre thème. |
Notre guide sur la personnalisation du bouton de liste de souhaits couvre les paramètres qui contrôlent l'apparence.
Ce que l'intégration ne fait pas
La liste des choses que l'intégration SaveTo Wishlist et Woostify ne fait pas est tout aussi utile. Elle n'ajoute pas de JavaScript, pas de points de terminaison REST, et pas d'enregistrements de base de données. Elle ne traite aucune donnée utilisateur. Elle n'enregistre pas non plus de crochets de rendu spécifiques à Woostify, et n'ajoute pas de page de paramètres Woostify.
Étant donné que l'intégration s'exécute automatiquement en arrière-plan, vous n'aurez pas besoin de rechercher un onglet de paramètres Woostify dédié ou un interrupteur. La détection est automatique, et aucun paramètre n'active ou ne désactive la feuille de style Woostify par lui-même.
Les thèmes enfants sont également couverts. Exécutez un thème enfant dont l'identifiant parent est toujours woostify, et la feuille de style se charge de la même manière. Le propre identifiant du thème enfant n'est pas utilisé pour la détection.
Même si une configuration personnalisée empêche la détection automatique, votre site reste entièrement fonctionnel. SaveTo Wishlist Lite revient en toute transparence à sa feuille de style standard pour garantir que vos boutons continuent de fonctionner sans problème.
Ce dont vous avez besoin avant de commencer
Les exigences sont courtes, et chacune d'elles est essentielle au bon fonctionnement de l'intégration.
| Composant | Exigence |
|---|---|
| SaveTo Wishlist Lite | 1.1.1 ou plus récent |
| WordPress | 5.8 ou plus récent, testé jusqu'à 7.0 |
| PHP | 7.4 ou plus récent |
| WooCommerce | 4.0 ou plus récent, testé jusqu'à 10.2 |
| Thème actif | Woostify, ou un thème enfant basé sur Woostify |
SaveTo Wishlist Lite vérifie automatiquement que WooCommerce est actif avant de s'initialiser, garantissant ainsi le bon fonctionnement et la sécurité de votre tableau de bord.
Deux choses dont vous n'avez pas besoin : un plan payant et une version spécifique de Woostify. La feuille de style de compatibilité est incluse dans SaveTo Wishlist Lite, la version gratuite. De plus, le code ne vérifie aucune version de Woostify, licence ou plugin compagnon. Il n'y a pas non plus de distinction gratuite vs Pro du côté de Woostify.
Cela vous offre une large compatibilité avec différentes versions de Woostify. Nous recommandons toujours de vérifier rapidement l'apparence de vos pages sur votre version de thème active pour vous assurer que tout correspond comme prévu.
Comment configurer vos boutons de liste de souhaits Woostify
L'intégration Woostify fonctionne dès la sortie de la boîte, vous pouvez donc vous concentrer entièrement sur la sélection de l'emplacement qui donne à votre boutique l'aspect le plus soigné.
L'emplacement est l'un des leviers que nous couvrons dans notre guide sur l'optimisation de la conversion des listes de souhaits.
Tout se trouve sur un seul écran : SaveTo Wishlist → Paramètres → Emplacement et styles des boutons. Vous aurez besoin des autorisations d'administrateur (manage_options) pour accéder à cet écran, garantissant ainsi la sécurité des paramètres de style de votre site.
Définissez le placement de votre boutique et de vos archives
Sous Page de la boutique, ouvrez le menu déroulant Emplacement du bouton. Ce seul contrôle couvre votre page de boutique principale, les pages de catégories de produits et d'autres archives de produits. Cinq options sont documentées comme fonctionnant bien avec les cartes de produits de Woostify.
Advanced Coupons a une excellente règle empirique à ce sujet dans son guide pour l'optimisation d'un site e-commerce : pouvez-vous repérer le bouton à l'autre bout de la pièce ?
- En haut à droite de l'image du produit : La feuille de style empile le bouton au-dessus de l'image.
- En haut à gauche de l'image du produit : Même traitement que le coin droit. Choisissez le coin que vos badges de promotion n'utilisent pas déjà.
- Au-dessus du titre du produit : Se place dans la zone de contenu de la carte Woostify et hérite de votre alignement de carte.
- Sous le titre du produit : Se place sous le titre, de sorte que les titres longs le repoussent plutôt que de le surcharger.
- Au-dessus du bouton Ajouter au panier : Maintient l'action d'enregistrement à côté de l'action d'achat sans entrer en concurrence avec elle.
Les trois emplacements de zone de contenu héritent automatiquement de l'alignement de Woostify. Réglez vos cartes de produits sur un texte centré, et le bouton se centre. Les cartes alignées à gauche et à droite se comportent de la même manière.
Définissez le placement de votre produit unique
Sous Page produit, vous trouverez un second menu déroulant Placement du bouton. Les deux paramètres fonctionnent indépendamment, donc changer l'un n'affecte pas l'autre.
Quatre emplacements sont documentés comme fonctionnant bien sur les pages produits Woostify.
- Au-dessus du bouton Ajouter au panier : Place l'option d'enregistrement devant les acheteurs avant qu'ils ne s'engagent.
- Sous le bouton Ajouter au panier : Le réglage par défaut de l'écran, et il reprend la marge supérieure de 12 pixels.
- Au-dessus du titre du produit : Utile lorsque votre résumé de produit est long et que vous souhaitez que l'action d'enregistrement soit visible tôt.
- Sous le titre du produit : Se place avec le bloc de titre plutôt qu'avec les contrôles d'achat.
Il existe une cinquième option : En ligne avec le bouton Ajouter au panier. N'hésitez pas à tester cette position par rapport à votre mise en page de produit personnalisée pour voir si elle convient à la conception de votre thème.
Les deux menus déroulants comportent également une option Ne pas afficher. Le choisir empêche l'enregistrement du hook de rendu du bouton dans ce contexte. C'est plus propre que de masquer le bouton avec du CSS.
Choisissez la quantité de style à charger
Toujours sur le même écran, trouvez Style frontal et le réglage intitulé Chargement CSS frontal. Il choisit quelle feuille de style de base charger. La feuille de style Woostify se charge ensuite par-dessus celle que vous choisissez.
- Style complet : Utilise les propres couleurs et polices du plugin. C'est le défaut d'usine.
- Style minimal : Laisse votre thème remplacer les couleurs et les polices.
- Aucun style : Charge uniquement le positionnement et hérite de tout le visuel de Woostify.
Avez-vous déjà personnalisé la typographie et les couleurs de Woostify ? Dans ce cas, Minimal ou Aucun style donne généralement un résultat plus natif. Fait important, les règles de mise en page de Woostify restent actives dans les trois modes. Vous n'échangez pas l'intégration pour obtenir les couleurs du thème.
Chaque mode charge un fichier de feuille de style différent, votre choix modifie donc également ce que le navigateur télécharge. Si le poids du frontend est important pour vous, notre test de vitesse du plugin WooCommerce wishlist mesure ce que SaveTo Wishlist ajoute réellement à une page.
Les deux placements à éviter sur Woostify
Pour garantir la mise en page la plus propre dès le déballage, voici deux options de placement que vous voudrez contourner pour Woostify.
- Sur les pages de boutique et d'archive, évitez Sous le bouton Ajouter au panier. Woostify rend cette ligne dans une zone animée de hauteur fixe sur les cartes de produits de bureau. Le bouton de liste de souhaits peut y être coupé, cachant une partie ou la totalité.
- Sur les pages de produits uniques, évitez les deux placements sur l'image. Woostify utilise une galerie de produits personnalisée, et les boutons dans le coin supérieur ne s'affichent pas de manière fiable à l'intérieur.
Ces recommandations sont spécifiques au contexte. Les coins des images sont superbes sur les cartes de boutique mais ne sont pas idéaux pour les galeries de produits, tandis que Sous le bouton Ajouter au panier fonctionne mieux sur les pages de produits uniques. Définir chaque contexte indépendamment permet à vos boutons de rester nets sur tous les modèles.
⚙️ Étape de configuration importante : SaveTo Wishlist Lite 1.1.1 n'applique pas automatiquement les options de placement lors de l'activation. S'ils ne sont pas modifiés, les deux contextes utilisent les valeurs par défaut — En haut à droite de l'image du produit sur les pages de produits et Sous le bouton Ajouter au panier sur les pages de boutique. Sur Woostify, la mise à jour de ces valeurs par défaut garantit que vos boutons s'alignent parfaitement avec la mise en page du thème.
La correction prend quelques secondes : Ouvrez les deux listes déroulantes de placement, sélectionnez les options recommandées et appuyez sur Enregistrer, même si les valeurs à l'écran semblent déjà correctes. L'enregistrement écrit les options dans la base de données et met fin aux conjectures.
Comment confirmer que les styles Woostify se chargent
Comme il n'y a pas de paramètre à vérifier, la vérification se fait dans le navigateur. Cela prend environ une minute.
- Confirmez que Woostify, ou un thème enfant Woostify, est actif sous Apparence → Thèmes.
- Chargez n'importe quelle page du frontend et ouvrez les outils de développement de votre navigateur.
- Recherchez
savetowishlist-woostify.cssdans le code source de la page. Ce fichier est l'intégration. - Vérifiez l'ordre. Il doit se charger après la feuille de style principale du frontend SaveTo Wishlist, car il en dépend.
- Inspectez un bouton. Avec un placement dans le coin, le conteneur doit avoir un
z-index: 3. - Dans un résumé de produit unique, ce conteneur doit avoir une marge supérieure de 12 pixels.
Si le fichier n'apparaît pas, vérifiez à nouveau votre identifiant de thème. La détection correspond exactement à woostify, donc un thème qui a été renommé ou qui s'est éloigné de cet identifiant ne déclenchera pas la feuille de style.
Comme la détection s'exécute silencieusement en arrière-plan sans fenêtres contextuelles d'administration, une vérification rapide dans les outils de développement confirme que vos ressources se chargent parfaitement.
Vous travaillez plus en profondeur dans le code ? Notre guide de l'API REST de la liste de souhaits couvre l'accès programmatique.
Les listes de souhaits pour invités sont plus importantes que le style
Un seul réglage fait plus pour votre taux d'enregistrement que toute décision de style. C'est de savoir si les acheteurs non connectés peuvent utiliser le bouton ou non.
Le contrôle est Désactiver la liste de souhaits des invités, et il est désactivé par défaut. Cela signifie que les invités peuvent enregistrer. Activez-le, et SaveTo Wishlist Lite arrête d'enregistrer ses hooks de boutons de boutique et de produit pour les visiteurs non connectés. Le bouton n'apparaît pas du tout.
Nous recommandons fortement de garder ce paramètre par défaut activé. L'analyse comparative des pages produits de Baymard a révélé que 89 % des sites ne rendent pas les fonctionnalités d'enregistrement facilement accessibles aux invités, ce qui vous donne une excellente opportunité de vous démarquer. Pendant ce temps, 21 % des acheteurs interrogés déclarent s'appuyer sur les fonctionnalités d'enregistrement. Cet écart est l'opportunité.
La même logique anime le paiement des invités WooCommerce : rendre les actions clés transparentes pour les invités stimule l'engagement et augmente les conversions.
L'intégration Woostify ne se ramifie pas en fonction du statut de connexion. Les invités et les clients connectés bénéficient des mêmes emplacements et des mêmes règles de mise en page. Il n'y a pas de style invité séparé à configurer.
Directives de portée et de compatibilité
La feuille de style cible le balisage standard WooCommerce et Woostify. Là où votre boutique s'écarte de ce balisage, les règles cessent de correspondre.
- Constructeur de pages et grilles de produits en blocs : Conçu pour le balisage de cartes Woostify standard ; les grilles de blocs personnalisées doivent être vérifiées à l'œil.
- Interfaces de visualisation rapide : Utilise un placement de bouton standard ; examinez la disposition de votre modale pour assurer un alignement correct.
- Boucles de produits personnalisées : Une boucle construite dans un modèle personnalisé se situe en dehors de la portée testée.
- Modules premium Woostify et plugins compagnons : Aucune compatibilité n'est établie pour ceux-ci.
- Comportement de la page panier : Les mises en page du panier sont gérées séparément et ne sont pas affectées par cette intégration Woostify spécifique.
Cette feuille de style se concentre spécifiquement sur les mises en page de liste de souhaits principales dans SaveTo Wishlist Lite. Si vous utilisez des extensions avancées (comme les fonctionnalités de WooCommerce Wishlist Pro ou Gift Registry Addon), leur donner un rapide examen visuel garantit que tout s'affiche comme prévu.
Alors que les fonctionnalités de base font l'objet de tests automatisés continus, le style de thème personnalisé est mieux vérifié par un rapide contrôle visuel sur votre boutique en ligne.
Les mises en page personnalisées et les types de produits spéciaux (tels que les articles en rupture de stock ou non achetables) méritent simplement une rapide vérification visuelle sur votre boutique en ligne pour vous assurer que le bouton s'affiche exactement là où vous le souhaitez.
Votre boutique s'appuie-t-elle sur l'un des contextes non couverts ? Notre guide d'intégration des tableaux de produits montre comment un contexte de mise en page différent est géré.
Questions fréquemment posées : SaveTo Wishlist et Woostify
Dois-je activer l'intégration Woostify ?
Non. Il n’existe aucune page de paramètres Woostify, aucun interrupteur et aucune option ne contrôle la feuille de style de manière isolée. SaveTo Wishlist Lite vérifie l’identifiant du modèle actif lors du chargement des ressources frontend. S’il lit woostify, la feuille de style est automatiquement mise en file d’attente.
Fonctionne-t-il avec un thème enfant Woostify ?
Oui. La détection examine l’identifiant du modèle parent, et non celui du thème enfant lui-même. Tant que le parent est toujours woostify, la feuille de style de compatibilité se charge normalement.
Ai-je besoin de SaveTo Wishlist Pro pour cela ?
Non. La feuille de style de compatibilité Woostify est incluse dans SaveTo Wishlist Lite, la version gratuite, à partir de la version 1.1.1. Les plans payants ajoutent des analyses de la liste de souhaits, des alertes de baisse de prix et des alertes de réapprovisionnement. Aucune de ces fonctionnalités n’est requise pour la prise en charge de la mise en page Woostify.
Quelle version de Woostify est prise en charge ?
SaveTo Wishlist Lite prend automatiquement en charge les versions actuelles de Woostify via l'identification du modèle, vous offrant une flexibilité totale lors des mises à jour du thème. Nous recommandons toujours de vérifier rapidement la version de votre thème actif lors de l'ajustement des mises en page.
Donnez au bouton d'enregistrement un endroit où vivre
L’intégration Woostify est conçue pour être légère, rapide et sans effort. Elle élimine les frictions de mise en page afin que vos boutons d’enregistrement s’intègrent naturellement à votre thème, fonctionnant discrètement en arrière-plan sans ajouter de surcharge inutile.
Il ne reste plus qu’à choisir les emplacements qui mettent le mieux en valeur vos produits et correspondent au style de votre boutique.
- Confirmez les exigences et que Woostify est le modèle actif (ce dont vous avez besoin).
- Ouvrez les deux listes déroulantes de placement et enregistrez-les explicitement, même si elles semblent correctes (comment configurer).
- Sélectionnez les positions de mise en page recommandées pour les archives de boutique et les pages de produits individuels (placements à éviter).
- Vérifiez que la feuille de style de compatibilité se charge pour confirmer la configuration de votre thème (comment confirmer).
- Laissez les listes de souhaits des invités activées pour maximiser les enregistrements des acheteurs (listes de souhaits des invités).
- Examinez les grilles de constructeur de pages, les vues rapides et les boucles personnalisées sur votre site en direct (limites).
Vos boutons de liste de souhaits Woostify devraient sembler conçus avec votre thème, et non ajoutés après coup. Notre guide de configuration Woostify explique l’écran des paramètres. Ou comparez ce que chaque plan inclut sur la page de tarification SaveTo Wishlist.
