Revu par Vous installez un plugin de liste de souhaits sur votre boutique Woostify et chargez la page boutique. Le bouton se trouve quelque part d'étrange. Il encombre le bouton Ajouter au panier, ou il jure avec les propres contrôles du thème. Sur certaines dispositions, il est coupé à l'intérieur de la carte du 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 des listes de produits de Baymard a révélé que 80% des sites e-commerce ont de sérieux problèmes de listes de produits. Une disposition propre et délibérée est un moyen facile de se démarquer.
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 est une feuille de style de compatibilité qui se charge seule. Il n'y a pas d'étape de configuration, et pas d'écran de paramètres à chercher.
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 propre et équilibré par rapport à 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 de 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 chercher 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 pris en charge. 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. L'identifiant du thème enfant lui-même 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 se rabat de manière transparente sur 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 pour que l'intégration fonctionne.
| 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 que WooCommerce est actif avant de démarrer. Si WooCommerce n’est pas actif, le plugin affiche une notification d’erreur dans votre tableau de bord et ne charge pas son contrôleur principal.
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 entre gratuit et Pro du côté de Woostify.
Le revers de la médaille est qu’aucune version de Woostify n’a été déclarée ou testée pour cette intégration. La détection repose uniquement sur l’identifiant du thème. Alors, jetez un coup d’œil rapide à vos pages sur la version de Woostify que vous utilisez, et encore une fois après l’avoir mise à jour.
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’apparence la plus soignée.
Le placement est l’un des leviers que nous couvrons dans notre guide sur l’optimisation de la conversion de la liste de souhaits.
Tout se trouve sur un seul écran : SaveTo Wishlist → Paramètres → Placement et styles des boutons. Vous aurez besoin d’un accès administrateur (manage_options) pour l’ouvrir.
Définissez le placement de votre boutique et de vos archives
Sous Page de la boutique, ouvrez le menu déroulant Placement du bouton. Ce contrôle unique 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 sur 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 libre dans la conception de votre carte.
- Au-dessus du titre du produit : Se place dans la zone de contenu de la carte Woostify et hérite de l’alignement de votre carte.
- En dessous du titre du produit : Se place sous le titre, de sorte que les titres longs le repoussent plutôt que de le gêner.
- Au-dessus du bouton Ajouter au panier : Place l’action d’enregistrement juste avant l’action d’achat.
Les trois emplacements de la zone de contenu héritent automatiquement de l’alignement de Woostify. Définissez 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 deuxième 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.
- En dessous du bouton Ajouter au panier : Le réglage par défaut de l’écran des paramètres, qui 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 rapidement.
- En dessous du 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. La documentation ne la recommande pas pour Woostify, et ne l’exclut pas non plus. Testez-la par rapport à la disposition de votre propre produit avant de vous y arrêter.
Les deux listes déroulantes proposent également une option Ne pas afficher. La choisir empêche l’enregistrement du hook de rendu du bouton dans ce contexte. Le bouton n’est jamais créé en premier lieu, plutôt que créé puis masqué.
Choisissez la quantité de style à charger
Toujours sur le même écran, trouvez Style frontal et le paramètre 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 réglage d’usine par défaut.
- 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.
Notez que le conseil s’inverse entre les deux contextes. Les coins de l’image sont recommandés sur les pages de boutique et d’archive, mais déconseillés sur les pages de produits uniques. En dessous du bouton Ajouter au panier, c’est l’inverse. C’est exactement pourquoi les deux listes déroulantes sont séparées, alors réglez chacune d’elles individuellement.
⚙️ Étape de configuration importante : SaveTo Wishlist Lite 1.1.1 n’enregistre pas les options de placement de la boutique et du produit lors de son activation. Cela laisse deux réponses différentes à la question « quel est le réglage par défaut ? » L’écran des paramètres affiche En dessous du bouton Ajouter au panier pour les deux contextes. Mais tant que l’option n’est pas enregistrée, le frontal revient à En haut à droite de l’image du produit pour les deux. Sur Woostify, l’une de ces deux valeurs est un placement à éviter dans chaque contexte, alors ne supposez pas que l’écran des paramètres vous montre ce que les clients voient réellement.
La correction prend quelques secondes : ouvrez les deux listes déroulantes de placement, choisissez le placement souhaité et appuyez sur Enregistrer, même si la valeur affichée semble déjà correcte. L’enregistrement écrit l’option dans la base de données, et à partir de là, l’écran et le frontal concordent.
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.
- Sur une page de boutique ou d’archive utilisant un placement dans un coin, inspectez le bouton. Son conteneur devrait se résoudre en
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.
Une correspondance échouée est complètement silencieuse. Aucune erreur, aucun avertissement, aucune notification d’administrateur. Les outils de développement sont le seul endroit où cela s’affiche, c’est pourquoi cette vérification vaut une minute de votre temps.
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 le laisserions désactivé. La référence de la page produit de Baymard a révélé que 89 % des sites étudiés ne rendent pas les fonctionnalités d'enregistrement faciles d'accès et d'utilisation. Dans une enquête distincte auprès de 1 193 acheteurs, 21 % ont déclaré s'appuyer sur les fonctionnalités d'enregistrement. Cet écart est votre 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 par blocs : Les règles ciblent le balisage standard des cartes Woostify. Les grilles construites dans un constructeur de pages ou assemblées à partir de blocs de produits en sont exclues, vérifiez-les donc visuellement.
- Interfaces de vue rapide : Il n'existe pas de gestion spécifique à Woostify pour les modales de vue rapide, vérifiez donc les vôtres visuellement.
- 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 : La page panier se situe en dehors de cette intégration. Aucun code panier spécifique à Woostify n'en fait partie.
La documentation couvre SaveTo Wishlist Lite. Elle n'établit pas la compatibilité Woostify pour SaveTo Wishlist Pro ou le Gift Registry Addon, alors vérifiez-les visuellement si vous les utilisez.
Encore une chose qui mérite d'être su : aucun test automatisé dans la suite du plugin ne valide Woostify ou ne vérifie ces règles de compatibilité. Les tests généraux de boutons s'exécutent sur un thème standard. La mise en page Woostify est confirmée en la regardant.
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 ?
Le plugin ne vérifie pas du tout la version de Woostify. Il vérifie seulement que l'identifiant du thème est woostify, donc aucune version minimale, maximale ou testée n'est déclarée pour cette intégration. Cela permet de maintenir la compatibilité avec les mises à jour du thème, et c'est aussi pourquoi une vérification visuelle rapide après une mise à jour est utile.
Donnez au bouton d'enregistrement un endroit où vivre
L'intégration Woostify est délibérément petite. Une feuille de style, pas de JavaScript, pas de points d'accès REST, pas d'enregistrements de base de données, pas de page de paramètres. Elle gère la mise en page pour que votre bouton d'enregistrement ressemble à une partie de votre thème plutôt qu'à quelque chose ajouté après coup.
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.
