Revu par Vous ouvrez votre page de liste de souhaits dans UX Builder de Flatsome pour qu'elle corresponde au reste de votre boutique. Vous ajoutez une ligne, un titre, peut-être une bannière. Ensuite, vous cliquez sur Mettre à jour, chargez la page, et la liste de souhaits a disparu.
Aucune erreur et aucun avertissement. Les clients qui ont enregistré des produits pour plus tard atterrissent sur une page vide, et ils ne vous le diront peut-être pas. C'est une erreur facile à manquer, et c'est pourquoi nous avons créé un élément liste de souhaits Flatsome.
Il est inclus dans le plugin gratuit SaveTo Wishlist Lite en tant qu'élément natif Save to Wishlist pour UX Builder. Ci-dessous, je vous montrerai pourquoi la page devient vide et comment placer l'élément. Je couvrirai également le seul endroit qu'il ne peut pas atteindre.
Aller à :
- Pourquoi votre page de liste de souhaits Flatsome devient vide dans UX Builder
- Ce que l'intégration SaveToWishlist Flatsome fait réellement
- Ce dont vous avez besoin avant de commencer
- Comment ajouter la liste de souhaits à une page Flatsome avec UX Builder
- Quelle page doit contenir l'élément de liste de souhaits
- Le seul emplacement à éviter : les blocs UX
- Comment confirmer que votre liste de souhaits Flatsome fonctionne
- Qu'en est-il du bouton Enregistrer dans la liste de souhaits sur Flatsome ?
- Questions fréquemment posées
- Prêt à ajouter votre liste de souhaits à Flatsome ?
Pourquoi votre page de liste de souhaits Flatsome devient vide dans UX Builder
La page de liste de souhaits atteint le navigateur d'une seule manière. WordPress exécute le shortcode [saveto_wishlist] stocké dans le corps de la page, et ce shortcode affiche la liste de souhaits.
Une page UX Builder stocke sa propre mise en page à la place. Lorsque vous enregistrez, UX Builder écrit cette mise en page sous forme de ses propres shortcodes, tels que [row] et [col]. Reconstruisez la page de liste de souhaits sans notre élément, et la mise en page enregistrée n'aura plus de shortcode de liste de souhaits.
C'est un comportement normal de constructeur de page, pas un bug de Flatsome. Tout constructeur qui contrôle le corps de la page décide de ce qui y est rendu, donc la liste de souhaits a besoin d'un élément que le constructeur comprend.
Flatsome est un thème populaire, donc cette configuration est courante. Selon la liste Flatsome sur ThemeForest, le thème a 270 319 ventes. La liste le qualifie de thème WooCommerce le plus vendu. Il apparaît également dans les récapitulatifs de thèmes, y compris la liste de thèmes WooCommerce pour les boutiques de gros de Wholesale Suite.
Une page de liste de souhaits vide coûte plus cher qu'il n'y paraît. Selon la recherche de Baymard Institute sur les pages produits, 21% des 1 193 répondants à l'étude s'appuient sur les fonctionnalités "Enregistrer". La même recherche a révélé que 89% des sites ne rendent pas les fonctionnalités d'enregistrement faciles d'accès et d'utilisation. Une page qui ne rend rien est l'extrême de ce problème. Elle annule la valeur de conversion qu'ajoute une liste de souhaits.
Ce que l'intégration SaveToWishlist Flatsome fait réellement
L'intégration ajoute une chose : un élément Enregistrer dans la liste de souhaits dans le sélecteur d'éléments d'UX Builder. Il est inclus dans SaveTo Wishlist Lite 1.1.3 et versions ultérieures. Il n'y a pas de page de paramètres et pas d'interrupteur à activer.
- Même shortcode en dessous : L'élément attache les options d'UX Builder au shortcode existant
saveto_wishlistau lieu d'en créer un nouveau. Il s'affiche donc exactement comme le shortcode, avec la même gestion des invités, des clients et des listes partagées. - Deux paramètres optionnels : ID de la liste de souhaits et Afficher uniquement la liste de souhaits par défaut. Ils correspondent directement aux attributs
idetdefaultonlydu shortcode lui-même, donc rien ne peut dériver entre les deux. - Un espace réservé sûr dans l'éditeur : Dans UX Builder, vous voyez une boîte statique, pas votre liste de souhaits en direct. Ainsi, un clic accidentel dans l'éditeur ne peut pas modifier vos propres articles enregistrés.
- Scripts qui se chargent là où ils sont nécessaires : Le plugin analyse le contenu d'une page pour trouver le shortcode avant de charger son application de liste de souhaits. Comme l'élément utilise la même balise, toute page qui la contient obtient les scripts et les styles dont elle a besoin.
Cette vérification empêche l'application complète de liste de souhaits sur les pages qui n'affichent pas de liste de souhaits. Notre test de vitesse mesure ce que SaveTo Wishlist ajoute à une page produit. Sur tout autre thème, l'intégration ne fait rien. Son hook de constructeur ne s'active qu'à l'intérieur d'une requête UX Builder, et l'espace réservé vérifie d'abord Flatsome.
Ce que l'intégration ne fait pas
La portée est délibérément étroite. Voici où le travail de l'élément se termine.
| Zone | Couvert par l'intégration Flatsome ? |
|---|---|
| Une liste de souhaits dans une page que vous éditez dans UX Builder | Oui, via l'élément Enregistrer dans la liste de souhaits |
| Une liste de souhaits dans un bloc UX intégré dans un pied de page, un menu ou une mise en page produit | Non. Les scripts et styles de la liste de souhaits ne se chargent pas là. |
| Style du bouton Enregistrer dans la liste de souhaits spécifique à Flatsome | Non. Le bouton suit vos paramètres normaux de Placement et styles des boutons. |
| L'onglet liste de souhaits de Mon compte | Pas nécessaire. Flatsome ne crée pas cet onglet via UX Builder. |
| Une page de paramètres ou un interrupteur marche/arrêt | Aucun. L'élément est présent tant que Flatsome est actif. |
C'est une forme différente de nos intégrations de thème pour Woostify et Blocksy, qui relookent le bouton lui-même. L'intégration Flatsome concerne la page de la liste de souhaits. C'est le plus proche de notre module Divi Builder, qui place la liste de souhaits dans les mises en page Divi de la même manière.
Ce dont vous avez besoin avant de commencer
Vous avez besoin de trois choses, et vous en avez probablement déjà deux.
- Le thème Flatsome : Avec UX Builder activé pour la page que vous souhaitez modifier.
- SaveTo Wishlist Lite 1.1.3 ou plus récent : La version actuelle est 1.1.6, donc mettez à jour d'abord si vous avez une version antérieure.
- Une page à construire : Habituellement la page de liste de souhaits que le plugin a créée lors de son activation.
L'élément fait partie du plugin gratuit. Vous n'avez pas besoin de SaveTo Wishlist Pro pour cela, bien que les boutiques Pro l'obtiennent aussi.
Une note rapide et honnête sur les versions. Nos développeurs ont vérifié l'élément manuellement sur Flatsome 3.15.5, et Flatsome est à la version 3.20.11 au moment de la rédaction. Flatsome est un thème payant, il ne fait donc pas partie de notre site de test automatisé. L'élément utilise les fonctions de constructeur de Flatsome, mais vérifiez-le rapidement après toute mise à jour majeure du thème.
Comment ajouter la liste de souhaits à une page Flatsome avec UX Builder
Voici la configuration complète. Vous la faites une fois par page, et cela n'implique aucun code. Les étapes correspondent à notre guide de la base de connaissances Flatsome.
- Ouvrez votre page de liste de souhaits dans l'UX Builder.
- Cliquez sur Ajouter des éléments, puis trouvez Save to Wishlist dans le groupe Contenu. Cherchez l'icône en forme de cœur, ou tapez « save to wishlist » pour rechercher.
- Faites glisser l'élément dans la ligne ou la colonne où la liste de souhaits doit apparaître.
- Cliquez sur l'élément pour ouvrir son panneau d'options.
- Laissez les deux options à leurs valeurs par défaut, sauf si vous avez besoin d'une liste spécifique. Le tableau ci-dessous explique chacune d'elles.
- Cliquez sur Appliquer, puis sur Mettre à jour pour enregistrer la page.
- Ouvrez la page en dehors du constructeur pour voir la liste de souhaits en direct.
Définissez les deux options de l'élément
Vous pouvez laisser les deux tranquilles. L'élément se comporte alors exactement comme le shortcode [saveto_wishlist] sur une page de liste de souhaits standard.
| Option | Ce qu'il fait | Par défaut |
|---|---|---|
| Wishlist ID | Épingle l'élément à une liste de souhaits spécifique, par son ID numérique. Laissez-le vide pour une page de liste de souhaits normale. | Vide |
| Afficher uniquement la liste de souhaits par défaut | Lorsque défini sur Oui, un client connecté voit une seule liste, sa liste par défaut, au lieu du tableau complet des listes multiples. Sans liste par défaut définie, il se rabat sur sa première liste publiée. | Non |
Les deux options façonnent ce que voient les clients connectés. Un invité obtient toujours la vue de la liste de souhaits pour les invités, quoi que vous définissiez. Les liens de liste de souhaits partagés se comportent différemment pour chaque option, ce que le diagramme ci-dessous décrit.
Il existe un piège à connaître. Un ID de liste de souhaits épinglé a priorité sur un lien partagé. Ouvrez une liste partagée sur cette page, et c'est la liste épinglée qui s'affiche à la place. Laissez l'ID de liste de souhaits vide sur votre page principale de liste de souhaits, où les liens partagés s'ouvrent.
Afficher uniquement la liste de souhaits par défaut est la même fonctionnalité que l'attribut defaultonly="yes" du shortcode. Nous avons expliqué pourquoi une page unique de liste de souhaits convient à la plupart des clients lors de la sortie de cet attribut.
Ce que vous verrez dans le constructeur
Dans l'éditeur, l'élément dessine une simple boîte avec une note indiquant que la liste de souhaits apparaît sur la page en direct. C'est normal et ce n'est pas un problème de style.
La vraie liste de souhaits est une application en direct qui s'enregistre sur votre compte. La rendre sur le canevas permettrait à un clic accidentel d'ajouter ou de supprimer des articles de votre propre liste. Par conséquent, le remplacement ne s'affiche que dans le constructeur, et uniquement pour les utilisateurs connectés qui peuvent modifier les articles.
🔍️ Ce que nous avons vu : Le remplacement est facile à confondre avec une liste de souhaits cassée ou non stylisée. Il est tentant de commencer le dépannage depuis UX Builder, mais l'élément est probablement correct. Vérifiez plutôt la page en direct, et vérifiez-la deux fois : une fois déconnecté et une fois en tant que client.
Quelle page doit contenir l'élément de liste de souhaits
Pour la plupart des boutiques, la réponse est la page de liste de souhaits que le plugin a créée lors de l'activation. Elle est déjà connectée au reste du plugin, donc rien d'autre ne doit changer.
Vous pouvez également placer l'élément sur une nouvelle page, ou sur plusieurs. Il fonctionne sur n'importe quelle page que UX Builder édite directement. Nos développeurs ont spécifiquement vérifié une page qui n'était pas la page de liste de souhaits, et la liste de souhaits s'y est également chargée.
Si vous déplacez la liste de souhaits vers une nouvelle page, mettez à jour un paramètre. Dans SaveTo Wishlist > Settings, pointez le menu déroulant Redirect page vers la nouvelle page. C'est là que les acheteurs atterrissent après avoir enregistré un produit lorsque le bouton est configuré pour les rediriger.
Gardez l'URL de la page de liste de souhaits stable une fois que les clients commencent à l'utiliser. Certains la mettront en favoris, d'autres colleront des liens de liste de souhaits partagés dans des messages à leurs amis et à leur famille.
Le seul emplacement à éviter : les blocs UX
Placez l'élément directement sur la page. Ne le mettez pas à l'intérieur d'un UX Block réutilisable qu'une autre partie de votre site intègre.
Flatsome peut intégrer un UX Block indirectement avec une référence [block id="..."]. Vous trouverez ceux-ci dans les pieds de page des options du thème, les pieds de page par page, les blocs d'éléments de menu et les mises en page de produits personnalisées.
Le plugin décide s'il faut charger l'application de liste de souhaits en analysant le contenu de la page elle-même. Cependant, il ne peut pas voir à l'intérieur d'un bloc stocké ailleurs. L'élément s'imprime toujours, mais les scripts et les styles de la liste de souhaits ne se chargent pas avec lui. Sans eux, la liste de souhaits ne peut pas fonctionner correctement.
Vous voulez une liste de souhaits dans un endroit du site comme l'en-tête ou le pied de page ? Ajoutez plutôt un lien de menu vers la page de la liste de souhaits. C'est un élément de menu, et cela fonctionne sur chaque page.
Comment confirmer que votre liste de souhaits Flatsome fonctionne
Effectuez ces vérifications une fois après l'installation, et à nouveau après toute mise à jour majeure de Flatsome. Elles reflètent les scénarios que nos développeurs ont vérifiés manuellement.
- Déconnecté : Ouvrez la page dans une fenêtre privée. Vous devriez voir la liste de souhaits de l'invité, tant que les listes de souhaits des invités sont activées.
- En tant que client : Connectez-vous avec un compte client de test, enregistrez un produit, puis ouvrez la page. Le produit devrait être listé.
- En tant qu'administrateur, en dehors du constructeur : Vous devriez voir la liste de souhaits en direct, jamais la boîte de remplacement.
- Mon compte : Ouvrez l'onglet Liste de souhaits sous Mon compte. Il devrait également afficher la liste de souhaits en direct.
- Un lien partagé : Rendez une liste de test publique, partagez-la, puis ouvrez le lien déconnecté. Elle devrait afficher cette liste.
Un cas extrême est déjà géré pour vous. Les liens de prévisualisation de l'UX Builder transportent un paramètre d'URL. Un client qui en suit un voit toujours sa propre liste de souhaits. Le placeholder ne s'affiche qu'aux utilisateurs qui peuvent modifier les articles.
Un invité qui n'a encore rien enregistré voit un état vide, ce qui est normal. Si les invités n'obtiennent aucune liste de souhaits, vérifiez que Désactiver la liste de souhaits des invités est désactivé. Vous pouvez également personnaliser la page de la liste de souhaits des invités si elle semble trop dépouillée.
Qu'en est-il du bouton Enregistrer dans la liste de souhaits sur Flatsome ?
Le bouton Enregistrer dans la liste de souhaits n'a pas besoin de l'intégration. Il s'accroche aux modèles de produits WooCommerce standard, et les modèles de Flatsome ont déclenché ces hooks lors de nos tests.
Notre développeur a testé cela sur Flatsome 3.15.5. Le bouton s'est affiché sur les 12 cartes de boutique et sur la page du produit unique. Sur ce magasin de test, le bouton de la boutique se trouvait dans la zone de prix de Flatsome sur chaque carte. C'est là que le placement Au-dessus du bouton Ajouter au panier s'attache.
Contrairement à Woostify et Blocksy, Flatsome n'obtient aucun style de bouton spécifique au thème. Choisissez votre placement sous SaveTo Wishlist > Paramètres > Placement et styles du bouton. Nous n'avons pas testé tous les placements sur Flatsome, alors vérifiez le vôtre sur une page de boutique, une page de produit et un téléphone.
Obtenir le bon bouton est important car la plupart des paniers n'arrivent pas à la caisse. Selon les recherches de Baymard Institute sur l'abandon de panier, le taux moyen documenté d'abandon est de 70,22 %, sur 50 études. Un bouton de liste de souhaits visible donne à ces acheteurs un endroit pour garer un produit. Cela vous donne un moyen de récupérer certaines de ces ventes.
Un placement encombre-t-il vos cartes Flatsome ? Vous pouvez masquer le bouton sur un type de page et le conserver sur l'autre.
Questions fréquemment posées
L'intégration Flatsome nécessite-t-elle SaveTo Wishlist Pro ?
Non. L'élément Enregistrer dans la liste de souhaits est livré dans le plugin gratuit SaveTo Wishlist Lite, version 1.1.3 et ultérieures. Installez ou mettez à jour le plugin gratuit. L'élément apparaît alors dans le groupe Contenu de l'UX Builder lorsque Flatsome est actif.
Pourquoi ma page de liste de souhaits est-elle vide après l'avoir modifiée dans UX Builder ?
Une page UX Builder enregistre sa propre mise en page, composée de shortcodes de constructeur. Si vous reconstruisez la page sans notre élément, cette mise en page n'a pas de shortcode [saveto_wishlist] pour afficher la liste de souhaits. Ajoutez l'élément Enregistrer dans la liste de souhaits depuis le sélecteur d'éléments, puis enregistrez à nouveau la page.
Puis-je toujours utiliser le shortcode de la liste de souhaits sur une boutique Flatsome ?
Oui, sur les pages que vous n'éditez pas avec UX Builder. Le shortcode fonctionne dans l'éditeur de blocs comme d'habitude, comme le montre notre guide des shortcodes de liste de souhaits. À l'intérieur d'une mise en page UX Builder, utilisez plutôt l'élément. Il exécute le même shortcode en arrière-plan, avec un panneau d'options approprié.
Mes clients verront-ils jamais le placeholder du constructeur ?
Non. Le placeholder n'apparaît qu'à l'intérieur d'UX Builder, et uniquement pour les utilisateurs connectés qui peuvent modifier les articles. Tous ceux qui visualisent la page en direct, y compris vous, voient la vraie liste de souhaits.
Prêt à ajouter votre liste de souhaits à Flatsome ?
Une page de liste de souhaits n'est utile que si elle s'affiche réellement. Sur Flatsome, cela se résume à un choix. Construisez la page avec l'élément Enregistrer dans la liste de souhaits, pas un shortcode que UX Builder réécrira.
- Comprenez pourquoi la page devient vierge avant de reconstruire quoi que ce soit.
- Ajoutez l'élément Enregistrer dans la liste de souhaits à votre page de liste de souhaits dans UX Builder.
- Ne l'incluez pas dans les Blocs UX et liez plutôt la page depuis votre pied de page.
- Effectuez les cinq vérifications en tant qu'invité, client et administrateur.
Votre liste de souhaits Flatsome n'est qu'à un élément de fonctionner. Installez ou mettez à jour SaveTo Wishlist Lite et ajoutez-le à votre page de liste de souhaits dès aujourd'hui.
