Revu par Vous reconstruisez votre page de liste de souhaits dans le Divi Builder pour qu'elle corresponde enfin au reste de votre boutique. Vous ajoutez une section principale, des couleurs de marque et un joli titre. Ensuite, vous enregistrez, chargez la page, et la liste de souhaits n'est pas là.
Il n'y a pas de message d'erreur ni d'avertissement. Les acheteurs qui ont enregistré des produits pour plus tard reviennent à une page vide, et ils ne vous le diront peut-être pas. Notre module Divi wishlist résout exactement ce problème.
Il est inclus dans le plugin gratuit SaveTo Wishlist Lite. Ci-dessous, je vais vous montrer pourquoi la page devient vide et comment configurer le module. Ensuite, nous transformerons cette page en une page qui vend.
Aller à :
- Pourquoi votre page de liste de souhaits Divi peut sembler vide
- Ce que l'intégration Divi de SaveTo Wishlist fait réellement
- Ce dont vous avez besoin avant de commencer
- Comment ajouter la liste de souhaits à une mise en page Divi Builder
- Comment utiliser le module dans un modèle Divi Theme Builder
- Comment transformer votre page de liste de souhaits Divi en page de vente
- Comment confirmer que votre liste de souhaits Divi fonctionne
- Qu'en est-il du bouton Save To Wishlist sur Divi ?
- Questions fréquemment posées
- Prêt à ajouter votre liste de souhaits à Divi ?
Pourquoi votre page de liste de souhaits Divi peut sembler vide
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 dessine la liste de souhaits.
Divi crée des pages avec son propre système de mise en page, et il y a deux façons dont il peut ignorer ce shortcode :
- Vous modifiez la page dans le Divi Builder : Divi enregistre la page comme sa propre mise en page. Si la mise en page ne contient aucune pièce de liste de souhaits, il ne reste rien à dessiner pour la liste de souhaits.
- Un modèle Theme Builder couvre la page : Le modèle remplace le corps de la page, de sorte que le shortcode qui y est stocké ne s'exécute jamais.
C'est le comportement normal d'un constructeur de page, pas un bug de Divi. Un constructeur qui possède le corps de la page décide de ce qui y est rendu. Une exception est un modèle Theme Builder qui inclut le module Post Content de Divi. Ce modèle exécute toujours le shortcode.
L'onglet de liste de souhaits de Mon compte n'est pas affecté, car il ne passe pas par le corps de la page. L'onglet peut donc continuer à fonctionner pendant que la page de liste de souhaits principale reste vide.
Une page vide coûte plus cher qu'il n'y paraît. Selon les recherches de Baymard Institute sur les pages de produits, 21% des 1 193 répondants ont déclaré s'appuyer 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. De plus, une page de liste de souhaits qui ne rend rien masque complètement ces enregistrements.
Ce que l'intégration Divi de SaveTo Wishlist fait réellement
L'intégration ajoute une chose : un module Save to Wishlist dans le Divi Builder. Il est livré dans SaveTo Wishlist Lite 1.1.3 et versions ultérieures. Il n'y a pas de page de paramètres ni de bascule à activer.
- Même shortcode en dessous : Le module exécute le shortcode
[saveto_wishlist]existant pour vous. Ainsi, les invités, les clients connectés et les liens partagés bénéficient tous du même traitement que sur une page de liste de souhaits standard. - Un paramètre optionnel : Un champ Wishlist ID. Laissez-le vide, et chaque visiteur verra sa propre liste de souhaits.
- Fonctionne dans les modèles Theme Builder : Créez une mise en page de liste de souhaits et réutilisez-la, au lieu de reconstruire la page à la main.
- Charge ses propres scripts : Le plugin repère le module sur une page, dans une mise en page Theme Builder ou dans un module global Divi Library. Ensuite, il charge les scripts de liste de souhaits là-bas, même s'il ne s'agit pas de votre page de liste de souhaits principale.
Avant ce module, la solution de contournement habituelle consistait à coller le shortcode manuellement dans un module Divi Code. Le nouveau module fait le même travail avec son propre panneau de configuration. Si vous utilisez déjà cette solution de contournement, vous pouvez la remplacer par le module.
Ce que l'intégration ne fait pas
La portée est délibérément étroite. Voici où le travail du module se termine.
| Zone | Couvert par l'intégration Divi ? |
|---|---|
| La liste de souhaits dans une page Divi Builder | Oui, via le module Save to Wishlist |
| La liste de souhaits dans un modèle Theme Builder | Oui, y compris les mises en page d'en-tête, de corps et de pied de page |
| Divi 5 | Pas officiellement encore. Le module est conçu pour Divi 4 |
| Le bouton Enregistrer dans la liste de souhaits sur les cartes et pages de produits | Non. Le bouton suit vos paramètres de placement et de styles de bouton |
| Une page de paramètres ou un interrupteur marche/arrêt | Aucun. Le module est là tant que Divi 4 est actif |
Cela en fait un outil différent de notre widget Elementor, qui place le bouton. Le module Divi concerne la page de liste de souhaits elle-même.
Ce dont vous avez besoin avant de commencer
Vous avez besoin de trois choses, et vous en avez probablement déjà deux.
- Divi 4 : Le thème Divi ou le plugin autonome Divi Builder fonctionnent.
- 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.
- WooCommerce : Actif sur votre site, comme il l'est déjà si vous vendez avec.
Le module fait partie du plugin gratuit. Vous n'avez pas besoin de SaveTo Wishlist Pro pour cela. Les boutiques Pro l'obtiennent aussi, car Pro fonctionne par-dessus Lite.
🔍️ Ce que nous avons vu : La première question à régler est de savoir quelle version de Divi vous utilisez. Notre module est conçu pour Divi 4, et Divi 5 n'est pas encore officiellement pris en charge. Selon la FAQ Divi 5 d'Elegant Themes, les modules tiers Divi 4 continuent de fonctionner en mode de compatibilité descendante. Cependant, nous n'avons pas confirmé le nôtre, alors testez-le d'abord sur un site de staging.
Encore une note honnête. Divi est un thème payant, il ne fait donc pas partie de notre suite de tests automatisés. Notre équipe a capturé les captures d'écran ci-dessous sur un site Divi en direct.
Comment ajouter la liste de souhaits à une mise en page Divi Builder
Voici la configuration complète. Vous la faites une fois par mise en page, et elle n'implique aucun code. Les étapes correspondent à notre guide de la base de connaissances Divi.
- Ouvrez votre page de liste de souhaits dans le Divi Builder.
- Cliquez sur l'icône d'insertion de module là où vous souhaitez que la liste de souhaits apparaisse.
- Tapez Wishlist dans la boîte de recherche de modules.
- Sélectionnez Save to Wishlist dans les résultats. Recherchez l'icône de cœur.
- Ouvrez l'onglet Contenu du module, puis la section Wishlist.
- Laissez le champ Wishlist ID vide pour une page de liste de souhaits normale.
- Enregistrez la page, puis ouvrez-la en dehors du constructeur pour voir la liste de souhaits en direct.
Quand utiliser le champ ID de la liste de souhaits
La plupart des boutiques devraient le laisser vide. Un champ vide montre à chaque visiteur sa propre liste de souhaits, ce qui est le but d'une page de liste de souhaits.
Un nombre dans le champ épingle le module à cette seule liste de souhaits, par son ID. Deux choses à ce sujet ne sont pas évidentes :
- Cela remplace les liens partagés : Lorsque quelqu'un ouvre un lien de liste de souhaits partagé sur cette page, il voit la liste épinglée à la place. Laissez le champ vide sur la page où les liens partagés s'ouvrent.
- Les invités ne la voient pas : Tant que les listes de souhaits des invités sont activées (par défaut), les visiteurs non connectés obtiennent leur propre liste de souhaits d'invité à la place.
Cela rend le champ peu adapté à un guide cadeau public. Pour une liste organisée que tout le monde peut ouvrir, rendez la liste publique et partagez son lien à la place.
Ce que vous verrez dans le constructeur
Dans le Divi Builder, le module affiche un court message d'espace réservé au lieu de votre liste de souhaits en direct. C'est délibéré, et ce n'est pas un problème de style.
La vraie liste de souhaits est une application en direct liée à la personne connectée. La rendre sur la toile permettrait à un clic errant d’ajouter ou de supprimer des articles de votre propre liste. Elle montrerait également votre liste privée à toute personne consultant l’aperçu de la mise en page.
🔍️ Ce que nous avons vu : L’espace réservé peut facilement être confondu avec une liste de souhaits défectueuse. Il est tentant de commencer à dépanner dans l’éditeur, mais le module est probablement correct. Vérifiez plutôt la page en direct, une fois déconnecté et une fois en tant que client.
Comment utiliser le module dans un modèle Divi Theme Builder
Si un modèle de Theme Builder couvre votre page de liste de souhaits, ajoutez le module à ce modèle. Le module affiche la liste de souhaits elle-même, il ne dépend donc pas du corps de la page que le modèle a remplacé.
- Allez dans Divi > Theme Builder.
- Modifiez le modèle attribué à votre page de liste de souhaits. Vous pouvez également choisir un autre modèle, tel qu’un en-tête ou un pied de page.
- Ajoutez le module Save to Wishlist de la même manière que vous le feriez sur une page, puis enregistrez.
Vous utilisez déjà un modèle avec le module Divi Post Content sur la page de liste de souhaits ? Alors la liste de souhaits devrait toujours s’afficher, tant que le corps de la page contient toujours le shortcode. Néanmoins, l’ajout du module est l’option la plus propre, car il ne dépend pas du tout du corps de la page.
Enregistrer le module en tant que module global de la bibliothèque Divi fonctionne également. Le plugin suit cette référence et charge les scripts de la liste de souhaits. Évitez cependant d’imbriquer un module global dans un autre. Le plugin ne vérifie qu’un seul niveau de profondeur, de sorte qu’un module imbriqué deux fois peut se charger sans ses scripts.
Comment transformer votre page de liste de souhaits Divi en page de vente
Remettre la liste de souhaits sur la page est la première étape. Le plus grand avantage est que vous pouvez maintenant concevoir autour d’elle, avec chaque module Divi que vous utilisez déjà.
Cette page est importante. Selon les recherches de Baymard Institute sur l’abandon de panier, le taux moyen documenté d’abandon est de 70,22 %, sur 50 études. Il rapporte également que 42 % des acheteurs en ligne américains ont abandonné un panier alors qu’ils « naviguaient simplement / n’étaient pas prêts à acheter ». Par conséquent, votre page de liste de souhaits peut être l’endroit où ces acheteurs reviennent pour décider.
Donnez à la page une prochaine étape claire
La liste de souhaits elle-même permet déjà aux acheteurs d’ajouter des articles individuels ou tous à la fois au panier. Votre travail consiste à rendre cette étape facile. Placez les éléments qui dissipent les derniers doutes juste à côté du module.
- Une courte ligne de réassurance : Expédition, retours ou délais de livraison, dans un module Divi Blurb ou Texte au-dessus de la liste de souhaits.
- Un lien pour continuer vos achats : Un module Divi Button sous la liste qui renvoie à votre boutique ou à une catégorie clé.
- Un titre qui correspond à votre magasin : Quelque chose de plus chaleureux que « Liste de souhaits », comme « Vos sélections enregistrées ».
Nous avons couvert plus de façons dont la page augmente les ventes dans comment les listes de souhaits augmentent la conversion.
Inciter les visiteurs à créer un compte
SaveTo Wishlist permet aux visiteurs de sauvegarder des produits sans se connecter. Lorsqu'ils créent un compte ou se connectent, leurs articles sauvegardés y sont fusionnés. Cela fait de la page de liste de souhaits un endroit naturel pour demander un compte.
Ajoutez donc une ligne de texte près du module. Expliquez qu'un compte conserve leur liste sur n'importe quel appareil. Notre guide de la liste de souhaits invité WooCommerce explique pourquoi ces sauvegardes anonymes valent la peine d'être capturées.
Faites du partage une partie de la saison des cadeaux
Chaque liste de souhaits peut avoir sa propre URL publique pour le partage. Lors des anniversaires et des fêtes, cela peut transformer vos clients en canal de parrainage. Chaque lien partagé amène un ami ou un proche directement aux produits que quelqu'un désire déjà.
Ajoutez une courte invite sur la page, telle que « Partagez votre liste avec votre famille avant les fêtes ». Laissez le champ ID de la liste de souhaits vide sur cette page, afin que les liens partagés ouvrent la bonne liste. Pour les paramètres qui s'y rapportent, consultez le partage et les autorisations de la liste de souhaits.
Rendez la page facile à trouver
Une excellente page de liste de souhaits n'aide pas si les acheteurs ne peuvent pas y revenir. Ajoutez un lien de menu dans votre en-tête Divi, afin qu'elle soit à un clic de chaque page. C'est plus simple que de placer la liste de souhaits complète dans un en-tête ou un pied de page de tout le site.
Faites un suivi lorsque quelque chose change
Les produits sauvegardés vous indiquent ce que les acheteurs veulent. Pendant ce temps, SaveTo Wishlist Pro peut automatiser les alertes de baisse de prix et les alertes de réapprovisionnement pour ces articles. Il ajoute également des analyses de liste de souhaits, afin que vous puissiez voir quels produits les gens sauvegardent le plus. Ceux-ci commencent sur le plan Growth, et vous trouverez chaque plan sur la page des tarifs.
Comment confirmer que votre liste de souhaits Divi fonctionne
Effectuez ces vérifications une fois après l'installation, et à nouveau après toute mise à jour majeure de Divi.
- Déconnecté : Ouvrez la page dans une fenêtre privée. Vous devriez voir la liste de souhaits invité, tant que les listes de souhaits 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 le placeholder.
- Un lien partagé : Rendez une liste de test publique, partagez-la, puis ouvrez le lien déconnecté. Elle devrait afficher cette liste.
La zone de liste de souhaits est-elle vide même si le module est là ? Vérifiez s'il se trouve dans un module global imbriqué dans un autre. Déplacez-le, ou ajoutez-le directement à la mise en page. Si les invités ne voient rien du tout, assurez-vous que Désactiver la liste de souhaits invité est désactivé.
Qu'en est-il du bouton Save To Wishlist sur Divi ?
Le module place la liste de souhaits, pas le bouton Enregistrer dans la liste de souhaits. Le bouton est configuré séparément, sous SaveTo Wishlist > Paramètres > Placement et styles du bouton. Il s'attache aux modèles de produits standard de WooCommerce.
Sur un magasin de test Divi 4.27, le bouton s'affichait sur chaque carte de produit de la page de boutique standard. Cependant, Divi peut également reconstruire les pages de produits à partir de ses propres modules Woo dans le Theme Builder. Nous n'avons pas testé tous les placements sur ces modèles, alors vérifiez le vôtre sur une page de boutique, une page de produit et un téléphone. Notre guide de placement des boutons liste toutes les options.
Un placement encombre vos cartes produit Divi ? Vous pouvez masquer le bouton sur un type de page et le conserver sur l'autre.
Questions fréquemment posées
L'intégration Divi nécessite-t-elle SaveTo Wishlist Pro ?
Non. Le module Save to Wishlist est inclus dans le plugin gratuit SaveTo Wishlist Lite, version 1.1.3 et ultérieures. Installez ou mettez à jour le plugin gratuit, et le module apparaît dans le Divi Builder lorsque Divi 4 est actif.
Pourquoi ma page de liste de souhaits est-elle vide dans Divi ?
Divi enregistre sa propre mise en page lors de la modification d'une page, et un modèle Theme Builder peut remplacer le corps de la page. Dans tous les cas, le shortcode [saveto_wishlist] peut ne jamais s'exécuter. Ajoutez le module Save to Wishlist à la page ou au modèle, puis enregistrez à nouveau.
Le module Save to Wishlist fonctionne-t-il avec Divi 5 ?
Divi 5 n'est pas encore officiellement pris en charge, car le module est conçu pour Divi 4. Elegant Themes indique que les modules tiers de Divi 4 s'exécutent en mode de compatibilité descendante de Divi 5. Nous n'avons pas confirmé le nôtre là-bas, alors testez-le sur un site de staging avant de vous y fier.
Mes clients verront-ils jamais le placeholder du constructeur ?
Non. Le placeholder n'apparaît qu'à l'intérieur du Divi Builder pendant que vous éditez. Tous ceux qui consultent la page en direct, y compris vous, voient la vraie liste de souhaits à la place.
Ai-je encore besoin d'un module Code avec le shortcode de la liste de souhaits ?
Non. Le module Save to Wishlist remplace cette solution de contournement et exécute le même shortcode en arrière-plan. Si un module Divi Code contient [saveto_wishlist], vous pouvez le remplacer par le module.
Prêt à ajouter votre liste de souhaits à Divi ?
Une page de liste de souhaits n'a d'utilité que si elle s'affiche. Sur Divi, cela dépend d'un seul module. Une fois en place, la page devient quelque chose que vous pouvez concevoir pour vendre.
- Vérifiez votre version de Divi et mettez à jour vers SaveTo Wishlist Lite 1.1.3 ou une version ultérieure.
- Ajoutez le module Save to Wishlist à votre page de liste de souhaits ou à votre modèle Theme Builder.
- Concevez la page autour de la liste de souhaits avec une prochaine étape claire et une invite de partage.
- Effectuez les quatre vérifications en tant qu'invité, client, administrateur et visiteur via un lien partagé.
Votre liste de souhaits Divi n'est qu'à un module de fonctionner. Installez ou mettez à jour SaveTo Wishlist Lite gratuitement, puis ajoutez le module à votre page de liste de souhaits.
