Revu par Vous basculez votre boutique sur Blocksy, ouvrez la page de la boutique et les cartes produits sont superbes. Ensuite, vous essayez un placement de bouton de liste de souhaits différent. Avec l'option en haut à gauche, le bouton peut se superposer au badge SOLDES. Sur les pages produits, l'option en ligne prend une ligne entière sous Ajouter au panier.
Rien de tout cela n'est cassé, exactement. Ce sont deux outils bien construits qui font des choix de mise en page différents, et les écarts apparaissent dans les détails. Ce sont ces détails qu'un acheteur remarque lorsqu'il décide s'il doit enregistrer quelque chose pour plus tard.
C'est pourquoi le plugin gratuit SaveTo Wishlist Lite inclut désormais une intégration dédiée à la liste de souhaits Blocksy. Ci-dessous, je vous montrerai ce qu'elle change et quels placements conviennent le mieux à Blocksy. Je vous montrerai également comment la vérifier.
Aller à :
- Pourquoi les boutons de liste de souhaits peuvent sembler déplacés sur Blocksy
- Ce que fait l'intégration Blocksy de SaveTo Wishlist
- Ce dont vous avez besoin avant de commencer
- Comment choisir vos placements de boutons de liste de souhaits sur Blocksy
- Quand choisir en haut à droite au lieu de en haut à gauche
- Comment confirmer que l'intégration Blocksy fonctionne
- Les limites à connaître
- Questions fréquemment posées
- Prêt à configurer votre liste de souhaits Blocksy ?
Pourquoi les boutons de liste de souhaits peuvent sembler déplacés sur Blocksy
Blocksy conserve le balisage produit de WooCommerce mais le met en page avec ses propres paramètres. C'est ainsi que Blocksy vous donne autant de contrôle sur la mise en page de votre boutique. Cependant, un bouton de plugin intégré dans cette mise en page ne connaît pas automatiquement les règles de Blocksy.
Nos développeurs ont mesuré quatre endroits spécifiques où cela se manifestait :
- Alignement de la carte : Blocksy aligne le contenu de la carte à partir de son propre paramètre d'alignement du contenu. Le bouton de liste de souhaits était centré quoi qu'il arrive, donc sur les cartes alignées à gauche, c'était la seule chose qui était désalignée.
- Le coin du badge : Blocksy place ses badges Soldes et hors stock dans le coin supérieur gauche de la carte. Un bouton de liste de souhaits placé là se superposait au badge et le cachait.
- La galerie produit : Sur les pages produit, le placement de l'image en haut à gauche pouvait se retrouver dans le coin de la page, loin de la photo.
- La ligne Ajouter au panier : Blocksy étire les éléments supplémentaires de cette ligne sur toute la largeur. Ainsi, un bouton de liste de souhaits « en ligne » se retrouvait sur sa propre ligne.
Blocksy est un choix populaire, donc ces détails touchent de nombreuses boutiques. Selon son listing WordPress.org, Blocksy compte plus de 300 000 installations actives et une note moyenne de 5 étoiles sur 873 avis. Il est créé par CreativeThemes, et il figure dans des récapitulatifs comme le guide des thèmes WooCommerce de Store Owner Tips.
Obtenir le bon bouton est important car l'enregistrement est une habitude réelle. Selon la recherche sur les pages produit de l'institut Baymard, 21 % des 1 193 répondants de l'étude s'appuient sur les fonctionnalités « Enregistrer ». Pourtant, 89 % des sites que Baymard a comparés ne rendent pas les fonctionnalités Enregistrer faciles d'accès et d'utilisation. Un bouton qui semble déplacé n'aide pas, et il nuit à la valeur de conversion d'une liste de souhaits.
Ce que fait l'intégration Blocksy de SaveTo Wishlist
L'intégration est une feuille de style supplémentaire. SaveTo Wishlist Lite 1.1.6 la charge automatiquement chaque fois que Blocksy, ou un thème enfant de Blocksy, est votre thème actif. Il n'y a rien à activer.
| Placement | Sans l'intégration | Avec l'intégration |
|---|---|---|
| Placements Boutique, titre et Ajouter au panier | Bouton centré, même sur les cartes alignées à gauche | Suit l'alignement de vos cartes Blocksy : gauche, centre ou droite |
| Boutique, en haut à gauche de l'image produit | Couvre le badge Soldes ou hors stock | Descend pour se placer sous le badge |
| Produit, en haut à gauche de l'image produit | Peut se retrouver en dehors de la galerie produit | Se place sur la galerie, sous n'importe quel badge |
| Produit, en ligne avec le bouton Ajouter au panier | Occupe une ligne entière à lui seul | Partage la ligne avec Ajouter au panier |
La feuille de style ajuste uniquement la position, l'espacement et l'alignement. Les couleurs, la taille et le style de votre bouton restent exactement tels que vous les avez définis dans SaveTo Wishlist. Elle fonctionne également avec tous les modes de chargement CSS Frontend. Les boutiques qui chargent peu ou pas de style de plugin obtiennent les mêmes corrections.
Notre intégration Woostify fonctionne de la même manière : une feuille de style spécifique au thème, chargée automatiquement.
Ce que l'intégration ne fait pas
La portée est délibérément petite, ce qui maintient également le risque faible.
- Aucun réglage : Il n'y a pas de page, de bascule ou d'option Blocksy dans SaveTo Wishlist.
- Pas de JavaScript supplémentaire : C'est uniquement du CSS, donc cela n'ajoute aucun script. Notre test de vitesse montre ce que le plugin lui-même ajoute à une page produit.
- Pas de nouveau design : Il ne re-style pas le bouton pour qu'il ressemble aux boutons de Blocksy. Il intègre votre bouton existant dans la mise en page de Blocksy.
- Aucun autre thème affecté : La feuille de style se charge uniquement lorsque Blocksy est le thème actif. Nos tests automatisés vérifient les deux aspects.
Ce dont vous avez besoin avant de commencer
Vous avez besoin de deux choses, et les deux sont gratuites.
- Le thème Blocksy : Ou un thème enfant basé sur celui-ci. Nos développeurs ont mesuré les corrections sur Blocksy 2.1.57, et nous avons pris les captures d'écran ci-dessous sur 2.1.58.
- SaveTo Wishlist Lite 1.1.6 ou version ultérieure : Les versions antérieures n'incluent pas la feuille de style Blocksy. Mettez à jour d'abord si vous utilisez une version antérieure.
L'intégration se trouve dans le plugin gratuit, vous n'avez donc pas besoin de SaveTo Wishlist Pro pour cela. Les boutiques Pro l'obtiennent aussi, car Pro fonctionne sur le plugin gratuit.
Blocksy est un thème classique, donc votre boutique et vos pages produits utilisent les modèles WooCommerce standard. Si vous créez une page avec le bloc Collection de produits WooCommerce à la place, le bouton s'affiche toujours. Là, le propre gestionnaire de blocs du plugin le place. Vous créez des pages produits avec Elementor à la place ? Notre guide des widgets Elementor couvre cette voie.
Comment choisir vos placements de boutons de liste de souhaits sur Blocksy
Chaque emplacement affiche le bouton sur Blocksy, vous choisissez donc un style, pas une solution pour éviter les problèmes. Vous trouverez les deux sous SaveTo Wishlist > Paramètres > Emplacement et styles du bouton. Regardez dans les sections Page de la boutique et Page produit.
Placements sur la page de la boutique
Voici où chacun des six emplacements de la boutique se place sur une carte produit Blocksy :
- En haut à droite de l'image du produit : Par défaut du plugin, et le mieux adapté pour Blocksy. Le coin de l'étiquette est à gauche, donc rien ne concurrence cet endroit.
- En haut à gauche de l'image du produit : Sur une carte avec une étiquette, le bouton descend pour se placer en dessous. Sur une carte sans étiquette, il conserve sa place normale dans le coin.
- Au-dessus du titre du produit et en dessous du titre du produit : Les deux affichent le bouton entre l'image et le titre. C'est parce que Blocksy affiche son propre titre.
- Au-dessus du bouton Ajouter au panier : Affiche le bouton juste en dessous du titre.
- En dessous du bouton Ajouter au panier : Affiche le bouton après le bouton Ajouter au panier.
Les quatre derniers suivent tous le réglage d'alignement du contenu de Blocksy pour les cartes produits. Changez vos cartes pour centrer ou aligner à droite, et le bouton bouge avec elles. Vous préférez ne pas avoir de bouton sur un type de page ? Choisissez Ne pas afficher pour celui-ci, comme l'explique notre guide sur comment masquer le bouton de liste de souhaits.
🔍️ Ce que nous avons constaté : Au-dessus du titre du produit et en dessous du titre du produit ont le même aspect sur Blocksy. Si vous passez de l'un à l'autre en vous attendant à ce que le bouton bouge, il ne bougera pas, et c'est normal. Choisissez l'un ou l'autre, ou choisissez Au-dessus du bouton Ajouter au panier si vous voulez le bouton sous le titre.
Placements sur la page produit
Les sept emplacements de page produit fonctionnent sur Blocksy. Deux d'entre eux bénéficient d'une aide spécifique de la feuille de style.
En ligne avec le bouton Ajouter au panier se place à côté d'Ajouter au panier sur ordinateur. Sur les écrans étroits, il se déplace en dessous, car le propre bouton de Blocksy remplit déjà la ligne là.
En haut à gauche de l'image du produit se place sur la galerie du produit. Sur un produit avec un badge, il se place sous le badge au lieu de le couvrir.
Les cinq autres placements ne nécessitent aucune manipulation spéciale de la feuille de style.
Quand choisir en haut à droite au lieu de en haut à gauche
Choisissez "En haut à droite de l'image du produit" si vos produits portent des badges grands ou empilés. Le réglage "En haut à gauche" dégage un badge de la taille par défaut de Blocksy, et pas plus.
La feuille de style reconnaît les badges de solde, les badges hors stock et les badges personnalisés de Blocksy. Elle ne déplace le bouton que sur les cartes qui en affichent réellement un. C'est pourquoi une grille mixte peut avoir des boutons à deux hauteurs différentes dans le coin supérieur gauche.
Donc, si vos ventes affichent plusieurs badges dans le même coin, "En haut à droite" maintient la cohérence de chaque carte. C'est aussi le réglage par défaut du plugin, donc une nouvelle installation sur Blocksy l'utilise déjà.
Certains acheteurs sauvegardent un produit pour attendre un meilleur prix. Pour eux, SaveTo Wishlist Pro peut envoyer des alertes de baisse de prix lorsqu'un produit sauvegardé devient moins cher.
Comment confirmer que l'intégration Blocksy fonctionne
Ces vérifications prennent quelques minutes et couvrent les emplacements que la feuille de style modifie. Exécutez-les une fois après la mise à jour, et à nouveau après une mise à jour majeure de Blocksy.
- Vérifiez le chargement de la feuille de style : Affichez la source d'une page de boutique et recherchez
savetowishlist-blocksy.css. Elle devrait s'y trouver tant que Blocksy est actif. Si un plugin de minification combine vos fichiers CSS, le nom peut ne pas apparaître. - Vérifiez un produit en solde : Avec le placement d'image "En haut à gauche", le bouton doit se trouver sous le badge "En solde".
- Vérifiez l'alignement de votre carte : Sur les cartes Blocksy alignées à gauche, un titre ou un placement "Ajouter au panier" doit également s'aligner à gauche.
- Vérifiez la ligne "Ajouter au panier" : Avec le placement Inline, le bouton doit partager la ligne sur ordinateur. Sur un téléphone, il passe en dessous.
- Vérifiez en tant qu'invité : Ouvrez la boutique dans une fenêtre privée. Les invités voient le même bouton, tant que les listes de souhaits des invités sont activées.
Si quelque chose semble toujours décalé, un plugin de cache ou de minification peut servir d'ancien CSS. Effacez-le, puis rechargez. Pour d'autres moyens d'adapter le bouton à votre thème, consultez notre article sur les options d'icônes de bouton de liste de souhaits.
Les limites à connaître
L'intégration couvre les modèles de boutique, d'archive et de produit unique. Quelques éléments se situent en dehors.
- La page panier : Les boutons du panier, comme l'option pour sauvegarder des articles individuels du panier, utilisent le style normal du plugin.
- Grands badges : Le décalage "En haut à gauche" est dimensionné pour un seul badge par défaut. Les conceptions plus grandes devraient utiliser "En haut à droite".
- Versions de Blocksy : Les corrections ont été mesurées sur Blocksy 2.1.57. Une future version de Blocksy pourrait modifier sa mise en page, alors revérifiez après les mises à jour majeures.
- Apparence du bouton : L'intégration intègre votre bouton dans la mise en page de Blocksy. Elle ne copie pas le design du bouton de Blocksy.
Nos tests automatisés s'exécutent sur une installation réelle de Blocksy. Ils confirment que la feuille de style se charge sur Blocksy et reste désactivée sur un autre thème. Ils vérifient également que le bouton en ligne conserve sa ligne.
Questions fréquemment posées
Dois-je activer l'intégration Blocksy ?
Non. SaveTo Wishlist Lite 1.1.6 et les versions ultérieures chargent automatiquement la feuille de style Blocksy chaque fois que Blocksy est votre thème actif. Il n'y a pas de paramètre, de bascule ou de page pour cela.
Cela fonctionne-t-il avec un thème enfant Blocksy ?
Oui. Le plugin vérifie le thème parent, donc un thème enfant basé sur Blocksy obtient la même feuille de style que Blocksy lui-même.
Ai-je besoin de SaveTo Wishlist Pro pour l'intégration Blocksy ?
Non. Elle est incluse dans le plugin gratuit SaveTo Wishlist Lite, version 1.1.6 et ultérieures. Les boutiques Pro l'obtiennent automatiquement car Pro fonctionne sur le plugin gratuit.
Prêt à configurer votre liste de souhaits Blocksy ?
Blocksy donne à votre boutique une mise en page épurée, et le bouton de liste de souhaits s'y intègre désormais sans CSS personnalisé. La seule vraie décision restante est de savoir où vous voulez que le bouton se trouve.
- Voyez ce que l'intégration change sur les cartes Blocksy et les pages de produits.
- Choisissez vos emplacements, en commençant par le haut à droite sur la page de la boutique.
- Utilisez le haut à droite pour les grandes étiquettes afin de maintenir la cohérence de chaque carte.
- Effectuez les cinq vérifications après la mise à jour, et après les mises à jour majeures de Blocksy.
Votre configuration de liste de souhaits Blocksy est à une mise à jour de plugin. Installez ou mettez à jour SaveTo Wishlist Lite vers la version 1.1.6 et la feuille de style fait le reste.
