Personnalisez votre page Panier avec le Thème Builder pour augmenter vos ventes !

Mis à jour le 13/05/2020 | Publié le 06/05/2020 | 6 commentaires

C’est la quête de tous les e-commerçants : augmenter les ventes mais également le panier moyen sur la boutique en ligne… Bonne nouvelle, ce tutoriel va vous expliquer comment créer le design de votre page Panier à l’aide du Divi Theme Builder … mais pas seulement !

Vous allez aussi découvrir une astuce pour que l’internaute ajoute des produits rapidement, en éliminant toutes les étapes inutiles qui font que votre client abandonne son panier !!!

Pour cela, vous aurez besoin :

  • d’une boutique déjà fonctionnelle avec WooCommerce
  • du Theme Builder de Divi
  • de 2 extensions OU d’un thème enfant + 1 extension

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Qu’est-ce qu’une page Panier WooCommerce ?

La page Panier est la dernière étape du processus d’achat en ligne, avant le paiement.

Elle est automatiquement créée lorsque vous installez et paramétrez le plugin WooCommerce sur votre site WordPress.

Cette extension gratuite vous permet de convertir votre site vitrine en site e-commerce simplement.

WooCommerce ajoute toutes les fonctionnalités utiles pour générer des ventes.

2 – Composition de la page Panier classique de Divi

La page Panier est indispensable au processus d’achat en ligne, vous l’avez compris… Mais son apparence dépend bien évidemment du thème que vous utilisez !

Ici, on parlera du Thème Divi, vous le savez…

Page Panier Classique
Page Panier Divi classique

Sur la capture d’écran ci-dessus, vous pouvez voir à quoi ressemble la page Panier classique lorsque vous utilisez WooCommerce avec Divi sans y effectuer des personnalisations.

Il faut l’avouer, c’est pas folichon !

Si vous ne comptez pas faire de personnalisations particulières, pensez au moins à supprimer la barre latérale droite (sidebar), ou à optimiser son contenu.

Panier Classic Composition
Composition de la mise en page classique du Panier de WooCommerce

Si vous activez le Visual Builder sur cette page Panier, vous voyez qu’il n’y a rien d’autre que le shortcode [ woocommerce_cart ] qui est généré par WooCommerce et qui permet d’afficher la fonctionnalité de panier.

À ce moment, vous pouvez décider d’utiliser le Visual Builder, simplement, pour ajouter d’autres modules à votre mise en page. C’est une solution qui fonctionne…

Mais je vous propose d’utiliser plutôt le Theme Builder de Divi. Ainsi, vous aurez davantage de possibilités :

  • Créer un Header spécifique pour cette page, voire le supprimer pour que l’internaute ne puisse pas naviguer sur d’autres pages,
  • Créer un Footer spécifique,
  • Etc.

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

3 – Création d’un modèle de page Panier avec le Thème Builder

Voyons alors comment créer le Template de votre page Panier via le Thème Builder :

Layout Page Panier Theme Builder
Créer un modèle pour la page Panier
  1. Allez à Divi > Thème Builder
  2. Cliquez sur « + Ajouter un nouveau modèle »
  3. Sélectionnez le modèle à utiliser : Chariot (panier) puis validez en cliquant sur « Créer un modèle ».
  4. Ajoutez un corps personnalisé
  5. Optez pour « construire un corps personnalisé »

Vous entrerez ensuite dans l’interface de création de votre mise en page. Cette mise en page n’agira qu’au sein de votre page Panier :

Creer Layout page Panier
Composez la structure de votre page Panier

Lors de votre conception, ajoutez les modules dont vous avez besoin. Vous avez un large choix : les 46 modules de Divi + les modules du WooCommerce Builder.

Faites votre petit marché mais n’oubliez pas l’essentiel :

  • Soit vous insérez le module Publier un Contenu : celui-ci récupère le contenu existant de votre page Panier classique et vous permet d’agir sur le design des éléments. Avec ce module, vous pourrez changer les polices, les tailles et les couleurs de la fonctionnalité « panier ».
  • Soit vous insérez un module de texte dans lequel vous placez le shortcode [ woocommerce_cart ]. Dans ce cas, vous ne pourrez pas vraiment agir sur le design.

Pour le reste, j’ai confiance en votre imagination 😉 ! Si vous manquez d’inspiration, voici un exemple de modèle :

Explications Layout
Exemple de layout pour la page Panier
  1. Un module de texte qui contient le titre de la page Panier (H1). Par exemple : « Votre panier ».
  2. Une image : dans ce cas précis, j’ai utilisé un module de texte dans lequel j’ai placé un émoji. Ensuite, j’ai mis la police à 100px et j’ai ajouté une animation (rotation) qui n’est pas visible sur cette capture d’écran.
  3. Un module Woo Upsell : ce module permet d’afficher les produits de « montée en gamme ». Mais j’aurais pu aussi insérer un module Boutique, tout simplement.
  4. Un module de texte : ici j’ai ajouté un H2 « Validez votre panier ».
  5. Le module Publier le Contenu : celui-ci récupère dynamiquement le contenu présent dans la page Panier WooCommerce Classique, soit le shortcode qui affiche le panier (vu précédemment).
Layout Page Panier en mode filaire
Composition du layout de la Page Panier en mode filaire

Cette capture d’écran vous présente la structure de la page Panier en « mode filaire ». C’est plus facile à visualiser :

  1. Un module Code : j’ai utilisé un module code pour ajouter un peu de CSS. C’est un module facultatif. En savoir plus sur le module Code.
  2. Sauvegardez 2 fois : sauvegardez la mise en page depuis l’interface et aussi dans le Theme Builder pour que vos modifications soient prises en compte.

Ne tardez plus ! Découvrez le thème Divi ici !

4 – Optimisation de la page Panier pour augmenter les ventes

Au chapitre précédent, vous avez vu qu’il est simple de créer le modèle de la page Panier. Voyons maintenant comment optimiser cette page et améliorer l’expérience utilisateur.

Page Panier Parfaite
Ajouter les boutons d’ajout au panier

Sur la capture d’écran ci-dessus, vous pouvez voir 2 variantes de la page Panier, celle de gauche correspond à celle créée au chapitre précédent et celle de droite offre une opportunité pour augmenter vos ventes !!!

Car, oui, les modules Boutique, Woo Produits Connexes et Woo Upsell proposent d’afficher les produits mais l’internaute devra visiter la page du produit pour pouvoir l’ajouter à son panier.

Cette solution ajoute alors 2 étapes supplémentaires. Plus il y a d’étapes entre le choix et le paiement, plus vous augmentez les chances d’aboutir à un abandon de panier !

Je vous propose de supprimer ces deux étapes afin que l’internaute puisse ajouter un nouvel article dans son panier, sur un coup de tête ! Juste avant de passer au paiement !!!

4.1 – Ajouter le bouton « ajouter au panier » sous l’image du produit

Tout d’abord, vous avez besoin d’ajouter le bouton « Ajouter au panier » juste sous l’image du produit et directement dans la page des produits (sans entrer dans la fiche produit).

Pour cela, vous aurez besoin d’ajouter un bout de code PHP :

  • Alternative n°1 : dans un thème enfant. Si vous utilisez déjà un thème enfant, il suffit d’ajouter le code suivant dans le fichier functions.php =>
// Add "Add to Cart" buttons in Divi shop pages
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );
  • Alternative n°2 : en utilisant l’extension « Code Snippets ». Cette extension permet d’ajouter du PHP à votre site WordPress sans utiliser un Thème enfant. Cette extension est gratuite, facile à utiliser et est disponible ici.
Code Snippet
Ajouter le plugin « Code Snippets » ou utiliser un Thème Enfant

Une fois que l’extension est installée et activée, vous n’aurez plus qu’à ajouter le code PHP (le même qu’on met dans le thème enfant) :

Add To Cart Button
Code PHP pour obtenir le bouton « ajouter au panier »

Voilà, le bouton « ajouter au panier » est maintenant présent sur toutes les pages du site qui propose des produits (loop page, page archives, page boutique…).

La seule difficulté est lorsque vos produits sont des produits variables : le bouton « choix des options » remplacera le bouton « ajouter au panier ». Dans ce cas, l’internaute sera quand même redirigé sur la fiche du produit variable. Et les étapes intermédiaires ne seront pas éliminées…

4.2 – Ajouter le bouton « quantité » sous l’image du produit

Ensuite, il manque encore une fonctionnalité importante : la possibilité de choisir le nombre d’articles à ajouter au panier. Pour cela, c’est simple :

Allez à l’onglet Extensions > Ajouter et installez le plugin Quantity Field on Shop Page for WooCommerce. Cette extension est gratuite et ne nécessite pas de paramétrage !

Quantity On Shop page
Ajout du choix de la quantité directement sous les produits

Dès son installation, le bouton de choix de quantité est disponible sous vos produits dans la page boutique et les pages d’archives.

5 – Résultat final : une page Panier qui convertit !

Voilà à quoi ressemble votre page Panier optimisée :

6 Rendu Panier
Ajouter des produits supplémentaires directement depuis la page Panier !

Juste au-dessus de la fonctionnalité « panier » sont affichés 3 produits (grâce au module Woo Upsell) et l’internaute pourra cliquer sur « ajouter au panier » directement depuis le panier. Cet ajout s’effectue sans rechargement de page (en AJAX) et sans quitter le panier pour visiter la fiche produit.

Cette solution est indispensable pour inciter l’internaute à effectuer des achats impulsifs.

Cela devrait aussi augmenter le panier moyen et plus durablement votre chiffre d’affaires !

Mais au-delà de cela, cette solution améliore grandement l’expérience utilisateur de votre client : économie de temps et d’efforts pour trouver les produits idéaux. Vous avez donc tout à y gagner !

Augmenter Ventes depuis la page Panier
Page Panier Divi
Increase Sales from cart page Divi

Ça devrait vous plaire aussi :

Images rognées (recadrées) dans Divi : comment éviter cela ?

Images rognées (recadrées) dans Divi : comment éviter cela ?

Pourquoi Divi affiche des images rognées ? C’est souvent le cas des vignettes des modules Blog et Portefeuille… Sans oublier la Galerie Divi… Dans ces 3 modules les images sont retaillées, rognées, recadrées ! Voici comment remédier à cela…

6 Commentaires

  1. Denis Gransart

    Intéressant et à tester car c’est vrai que la page de base de WooCommerce est plutôt tristounette

  2. Lycia Diaz

    Merci Denis 😉

  3. Carolina

    Hi! Thank you for this great tip! Is it possible to centre the button under the product on the shop page? Thanks

  4. Lycia Diaz

    Hi Carolina,
    I think it’s possible with CSS !? You have to try in your browser to see if it’s possible.

  5. carolina

    Hi Lycia, I’m not a web developer and although I am good at figuring stuff out usually I can’t figure this out!!! I don’t know what the css should be!

  6. Lycia Diaz

    Hi Carolina. Add maybe something like that :
    .woocommerce ul.products li.product a {
    text-align: center;
    }

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This