It's the search for all the e-mergers: increase sales but also the average shopping cart on the online shop... Good news, this tutorial will explain how to create the design of your page Basket using the Divi Theme Builder ...but not only!
You will also discover a trick for the internet user add products quickly, eliminating all unnecessary steps that make your client Give up his basket !!!
To do this, you will need:
- a shop already functional with WooCommerce
- Divi Theme Builder
- of 2 extensions OR of one child theme + 1 extension
1 â What is a WooCommerce Basket Page?
The Page Basket is the last step in the online purchasing process, before payment.
It is automatically created when you install and set the WooCommerce plugin on your WordPress site.
This free extension allows you to convert your showcase site to e-commerce site simply.
WooTrade adds all the useful features to generate sales.
2 - Composition of the Divi Classic Basket Page
The Page Basket is essential to the online shopping process, you understand... But its appearance obviously depends on the theme you use!
Here we'll talk about Theme DiviYou know that...

On the above screenshot, you can see what the classic basket page when you use WooCommerce with Divi without customization.
You have to admit, it's not leafy!
If you don't plan to do any special customizations, at least think about removing the sidebar, or optimising its content.

If you activate the Visual Builder on this page Basket, you see that there is nothing other than the shortcode [ woocommerce_cart ] which is generated by WooCommerce and which allows to display the shopping cart feature.
At that time, you can decide to use the Visual Builder, simply, to add other modules to your layout. It's a solution that works...
But I suggest you use the Divi Theme Builder. As a result, you will have more opportunities:
- Create a specific Header for this page, or even delete it so the Internet user can't navigate on other pages,
- Create a specific Footer,
- Etc.
Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"
3 â Creating a Basket page template with the Builder Theme
Then let's see how to create the Template of your page Basket via Theme Builder:

- Go to Divi > Theme Builder
- Click « + Add a new model »
- Select the model to use: Basket then confirm by clicking "Create a Model".
- Add a custom body
- Go for "Building a Personalized Body"
You will then enter the creation interface of your layout. This layout will only work within your Cart page:

When designing, add the modules you need. You have a wide choice: 46 Divi modules + the WooCommerce Builder modules.
Make your small market but don't forget the essentials:
- Either you insert the Publish Content module : it recovers the existing content of your Page Basket classic and allows you to act on the design of the elements. With this module, you can change the fonts, sizes and colors of the shopping cart feature.
- Either you insert a text module in which you place the shortcode [ woocommerce_cart ]. In this case, you won't really be able to act on the design.
For the rest, I trust your imagination! If you lack inspiration, here is an example of a model:

- A Text Module which contains the title of the page Cart (H1). For example: "Your basket".
- An image: in this particular case, I used a text module in which I placed an emoji. Then I set the font to 100px and I added an animation (rotation) that is not visible on this screenshot.
- One Woo Upsell module : This module allows you to display "upscale" products. But I could also have inserted a Boutique moduleSimply.
- A text module: Here I added an H2 « Validate your cart ».
- The Publish Content module: it dynamically recovers the content present in the WooCommerce Classic Basketeither the shortcode that displays the basket (see above).

This screenshot presents the structure of the Basket page in "wired mode". It's easier to visualize:
- A Code module: I used a code module to add some CSS. It's an optional module. Learn more about the Code module.
- Save 2 times: save the layout from the interface and also in the Theme Builder so that your changes are taken into account.
Don't delay! Discover the theme Divi here !
4 - Page Optimization Basket to Increase Sales
In the previous chapter, you saw that it is simple to create the template of the Basket page. Now let's see how to optimize this page and improve user experience.

On the above screenshot you can see 2 variants of the page Basket, the left corresponds to the one created in the previous chapter and the right offers a opportunity to increase your sales !!!
For, yes, the Boutique modules, Woo Related Products and Woo Upsell propose to display the products but the internet user will have to visit the product page to be able to add it to his basket.
This solution then adds 2 additional steps. The more steps there are between choice and payment, the more you increase the chances of achieving a cart drop!
I suggest you delete these two steps so that the Internet user can add a new article to his basket, on a head start! Just before switching to payment!!!
4.1 â Add the "Add to Cart" button to the product image
First, you need to add the button "Add to Cart" just under the image of the product and directly in the product page (without entering the product sheet).
To do this, you will need to add a bit of PHP code:
- Alternative 1 : in a child theme. If you are already using theme child, just add the following code to the file 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 No. 2: using the Snippet Code extension. This extension allows to add PHP to your WordPress site without using a Child Theme. This extension is free, easy to use and is available here.

Once the extension is installed and enabled, you will only need to add the PHP code (the same as the child theme):

There you go. the "Add to Cart" button is now present on all pages of the website that offers products (loop page, archive page, shop page...).
The only difficulty is when your products are variable products : the button "option choice" replace the button "Add to Cart". In this case, the user will still be redirected to the variable product sheet. And the intermediate steps will not be eliminated...
4.2 - Add the quantity button under the product image
Secondly, there is still a lack of important functionality: the ability to choose the number of items to add to the basket. For this, it's simple:
Go to tab Extensions > Add and install the plugin Quantity Field on Shop Page for WooCommerce. This extension is free and does not require setting!

As soon as it is installed, the quantity selection button is available under your products in the shop page and archive pages.
5 - Final result: a Cart page that converts!
This is what your page Optimized basket :

Just above the basket functionality are displayed 3 products (Thanks to the module Woo Upsell) and internet user can click on "Add to Cart" directly from the basket. This addition is done without reloading of the page (in AJAX) and without leaving the basket to visit the product sheet.
This solution is essential to encourage Internet users to carry out Impulsive procurement.
This should also increase the average basket and more sustainably your turnover !
But beyond that, this solution greatly improves Your customer's user experience saving time and effort to find the ideal products. So you have everything to gain!



IntĂ©ressant et Ă tester car c’est vrai que la page de base de WooCommerce est plutĂŽt tristounette
Merci Denis đ
Hi! Thank you for this great tip! Is it possible to centre the button under the product on the shop page? Thanks
Hi Carolina,
I think it’s possible with CSS !? You have to try in your browser to see if it’s possible.
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!
Hi Carolina. Add maybe something like that :
.woocommerce ul.products li.product a {
text-align: center;
}
Merci pour ce tuto toujours trÚs intéressant !
Y a pas moyen de modifier l’affichage des parties « Validez votre panier » et « Total Panier » ?
Par exemple tout mettre sur la mĂȘme ligne ?
Merci mais je ne comprend pas car quand j’affiche mon site le module Woo Upsell n’apparait pas et le bouton « ajouter au panier » est « Coix des options
Le bouton « choix des options » apparaßt à la place de « ajouter au panier » lorsque ton produit est un produit variable.
Câest peut-ĂȘtre possible en CSS mais pas dâoption disponible pour ça
Bonjour, merci pour ces supers tutos ! Moi je serais ravie de connaĂźtre l’astuce pour ajouter l’icĂŽne du panier dans le nav bar mobile ? Je vois que c’est le cas ici đ merci !
Salut Laure, je nâai rien fait pour ça. Je pense que câest une option dans les rĂ©glages de lâen-tĂȘte mais peut-ĂȘtre quâelle nâest pas disponible si tu as créé ton en-tĂȘte avec le thĂšme Builder. Ă vĂ©rifier …
Merci de votre retour. C’est Ă©trange, non je n’utilise pas le thĂšme builder. Tu penses que c’est accessible dans le personnalisateur de thĂšme ? C’est Ă©tonnant, le panier ne s’est jamais affichĂ© en natif dans mes menus du divi.
C’est bizarre Laurette, moi j’ai rien fait pour ça mais je ne trouve plus l’option. Regarde ça, peut-ĂȘtre que ça t’aidera : https://divi.help/threads/cart-divi-on-mobile.1326/
Coucou, merci de ta rĂ©ponse. J’ai finalement trouvĂ© la solution, c’est justement depuis le thĂšme builder qu’il est possible de choisir l’affichage du panier ou non đ Du coup ça marche c’est super ! Maintenant je m’attaque au sticky menu au scroll via le thĂšme builder… Un autre chantier car j’ai deux zones dans mon entĂȘte…. Une chouette idĂ©e de tuto pour ton site đ
bonjour
j’ai fait ajouter au php : // Add « Add to Cart » buttons in Divi shop pages
add_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 20 );
sa fonctionne
le probleme c’est que divi ne reconnait pas cette ajout est ne propose pas de modification … comment avait vous fait pour avoir votre texte et bordure en violet ?? du css?
Salut Antoine,
Non, pas de CSS, j’ai surement paramĂ©trĂ© ça dans les rĂ©glages (Apparence > Personnaliser).
đ
Toujours trĂšs intĂ©ressant Merci. J’essaierai des ce soir !
Je suppose bien en pensant que ce bouton sera également visible sous tous les produits sea boutique ou je me trompe et il faut le code ?
Merci Alain, oui, tu supposes bien đ
Alors mille merci !
J’ai longtemps voulu faire ça mais sans ce tuto… J’aurais pu y penser encore trĂšs longtemps !
Du coup avec le divi thĂšme buider je dois pouvoir crĂ©er une page produit spĂ©cifique qui propose d’accĂ©der aux produits de mĂȘme gamme qui nĂ©cessitent de faire plusieurs choix d’options afin d’Ă©viter que le visiteur ne quitte sans arrĂȘt la boutique a cause de ces produits ?
Je suppose que oui Alain, tu peux presque tout faire avec le thĂšme builder. Il suffit de crĂ©er le modĂšle et de l’appliquer au produits que tu souhaites
Mille mercis !!! J’ai hĂąte d’essayer.
VoilĂ c’est fait. Tout fonctionne mais il me reste 2 soucis :
Le bouton  » Ajouter au panier  » Ă droite du choix de quantitĂ© gĂ©nĂ©rĂ© par le module upsell n’est visible qu’au passage de la souris,
La validation d’un ajout au panier (dans la boutique) revĂšle un texte en anglais : « Item aded ». Comment traduire ce texte ???
J’y suis presque Lycia…
Il va falloir traduire le plugin et je ne sais pas comment on fait. Soit tu as une option pour changer le texte, soit tu traduis le plugin. WP Trad peut t’aider : https://wptrads.com/
Ok Lycia je vais chercher et te dirai. Cependant quand tu parles de Plugin, duquel ,s’agit-il ? On a pas juste ajouter du code CSS ?
Ah ! J’y suis pas… Je croyais que tu parlais du plugin Quantity Field. đ
Il faut vĂ©rifier si c’est lui qui gĂ©nĂšre ce texte par dĂ©faut. Je me souviens plus, j’ai fait ce tuto il y a quelques semaines dĂ©jĂ .
C’est bien lui. Une fois dĂ©sactivĂ© il n’ y a plus de problĂšme mais il n’y a aucun moyen d’accĂ©der Ă des reglages avec ce plugin đ
Ah, c’est bien ce que je me disais, je ne suis pas encore sĂ©nile LOL ! đ Non, c’est un plugin tout simple et donc pas d’option, c’est pour ça que je te disais qu’il faut le traduire. Et c’est pour ça que je t’envoie vers WP Trad. La traduction ne devrait pas coĂ»ter cher pour la simple et bonne raison qu’il fait payer au mot. Et pour le coup, cette extension ne dois pas en avoir beaucoup đ
Non pas sénile, on le saurait, vus les conseils que tu nous donnes !
Bon , çà fonctionne ! J’ai accĂ©dĂ© sur le serveur de mon hĂ©bergeur au fichier du plugin et supprimĂ© « Item added » de la ligne 104 du code du plugin. C’Ă©tait conseillĂ© sur le support du plugin.
Il ne me reste qu’Ă changer les couleurs car j’ai « Ajouter au panier » en bleu sur fond gris… et ce n’est pas centrĂ©… Je cherche…
Merci encore
J’ai finalement rĂ©ussi ! En Français avec mes couleurs grĂące Ă du code CSS car mon thĂšme n’Ă©tait pas coopĂ©ratif !
Merci encore
Ah oui ? Super mais lors dâune prochaine mise Ă jour tu devras lâenlever Ă nouveau je pense đ
Oui c’est vrai. Je cherche une meilleure solution… J’ai Ă©galement besoin que mes visiteurs puissent poursuivre leurs achats facilement quand ils doivent ouvir les produits variables et ca c’est pas gagnĂ©. Tout ce que je trouve comme solution les ramĂšne au dĂ©but de la boutique :((
Bonjour. Super article comme toujours.
J’ai un fĂącheux problĂšme đ
(Je suis vraiment dĂ©butant.) Je ne sais pas oĂč se trouve mon panier?
Lorsque je fais un test, aprĂšs avoir ajoutĂ© un produit, lorsque je clique sur « voir mon panier ». Je suis redirigĂ© sur ma page d’accueil.
En essayant de régler le problÚme, voulant configurer woocommerce dans la paramÚtres avancés, je voudrais affecter la page chariot créé via divibuilder à la page panier, mais je ne la trouve pas.
VoilĂ si vous souhaitez essayer : https://moncorps.ma/product/safran-de-taliouine-1g/
Bonjour,
J’ai un problĂšme car aprĂšs avoir suivi votre Tuto Ă la lettre j’ai dĂ©cider de supprimer le bouton ajouter au panier car il ne me plaisait pas trop mĂȘme dĂ©sactiver le code et supprimer l’extension le bouton reste prĂ©sent sur le site.
Bonjour Lycia,
Penses-tu qu’on peut changer uniquement les boutons ?
Salut Samir, tu as trouvé finalement ?
Salut Yassir, je suppose qu’on ne peut pas supprimer le bouton d’ajout au panier. Ou du moins, c’est une mauvaise idĂ©e.
Salut LC,
Il suffit de paramĂ©trer le design de tes bouton dans l’onglet Apparence > Personnaliser > Boutons.
Merci Lycia. Tu parles du « Personnaliseur de thĂšme » ? Alors, aussi Ă©trange que ça paraisse, les paramĂštres des boutons ne correspondent pas Ă ce qui s’affiche dans le panier (d’oĂč ma question). Dans le panier, j’ai des boutons aux traits bleu grossiers, comme si je n’avais pas paramĂ©trĂ©.
Bonjour,
J’ai tout suivi Ă la lettre mais le module upsell et publier du contenu nâapparaĂźt pas ensuite sur le site.
http://www.artandfit.com
Merci Lycia. Bien sĂ»r… J’ai fait le changement.
J’ai aussi intĂ©grĂ© le code que tu proposes mais du coup cela met aussi le bouton « ajouter au panier » dans la page boutique et pas seulement dans la page panier. Or je voudrais les boutons que sur la page panier. Sais-tu comment modifier le code pour ça ? Merci encore pour ton aide (et tes supers tuto)
Salut Lionel LC,
Oui je parlais du « personnaliseur ». Je crois que WooCommerce ne prend pas en charge ces boutons, du coup, je t’ai peut-ĂȘtre dit une bĂȘtsise. Tu as essayĂ© ce tuto : https://astucesdivi.com/couleurs-boutique-woocommerce-divi/ ?
La rĂ©ponse est peut-ĂȘtre lĂ ?
Salut Laurie.
Si tu ne renseignes rien dans tes fiches produit WooCommerce, les modules Upsell et Publier un contenu n’apparaitront pas. C’est peut-ĂȘtre pour ça que tu n’as rien ? Je suis allĂ©e voir ton site, il est trĂšs beau mais quand on clique sur une fiche produit, je ne vois qu’une image.
LC,
Oui effectivement ça te rajoute le code partout. Je ne sais pas comment modifier ça, il faudrait trouver le HOOK qui s’applique seulement Ă la page panier. DĂ©solĂ©e de ne pas pouvoir plus t’aider.
Oui, mais je ne veut supprimer le bouton « ajouter au panier » dans la page produit mais celui que j’ai ajoutĂ©es via se Tuto
Oui merci. C’Ă©tait simple.
WooCommerce n’a pas créé les pages automatiquement.
Salut Samir, oui ça arrive parfois
Bonjour Lycia, mais je ne parle pas du bouton « ajouter au panier » de la page produit mais plutĂŽt celui que vous conseillez d’ajouter sur votre tuto mais au final il ne me plait pas et il n’est pas personnalisable et vachement inutile
Bonjour Lycia.
Tout d’abord, merci pour ce/vos tuto(s) qui peuvent dĂ©bloquer sur bien des solutions.
J’ai aujourd’hui un problĂšme, effectivement je travail sur le site suivant (en phase de test) : https://flavours.levasseurkarl.fr/165-8-2/
Comme vous pouvez le constater, le site comporte énormément de call-to-action et bouton.
Je ne peux donc pas utiliser l' »onglet Apparence > Personnaliser > Boutons ».
J’ai essayĂ© de modifier les « ajouter au panier » via leur diffĂ©rentes class CSS, sans succĂšs.
Je ne vois qu’une solution, un bout de code php Ă ajouter Ă celui qui est fourni.
Avez-vous quelques choses du genre qui traine ?
(J’ai dĂ©jĂ usĂ© de moult subterfuges afin d’arriver Ă ce rĂ©sultat qui me plait moyennement, avoir une solution pour ceci serait d’un grand secours).
Pendant que j’y suis, j’aimerai dĂ©sactivĂ© le lien du module boutique (prĂ©sent sur l’image/le texte/le prix) qui redirige vers la page de l’article, auriez-vous une idĂ©e ?
Merci d’avance,
Cordialement,
Karl.
Salut Karl,
Je me demande, du coup, s’il ne faudrait pas que tu utilises l’une des derniĂšres fonctionnalitĂ©s de Divi : les Presets. Regarde cette vidĂ©o, ça pourrait peut-ĂȘtre rĂ©pondre Ă ton besoin : https://youtu.be/I2VqPBfMA5Y
Bonjour,
J’ai dĂ©jĂ acheter DIVI et j’utilise 2 langue sur ça mais aprĂšs poursuivre mes achats , le panier change a zĂ©ro et parfois rester sur 2 ,3 mais ça na rien avoir les produits que on ajouter ou pas . any idea!! thanks
It is not normal Farzad ! Do you use WooCommerce ?
Bonjour et merci pour ce tutoriel. Par contre comment faire pour que les produits up sells n’apparaissent pas directement dans la partie panier de woocommerce (en bas Ă gauche)?
Merci de to aide.
JérÎme
Salut JĂ©rĂŽme. Si tu crĂ©e la page Panier avec Divi, tu mets ce que tu veux donc peut-ĂȘtre que tu peux omettre le module Upsell. Ce nâest pas le cas ?
Bonjour et merci pour ce tuto,
Ayant personnalisé la page boutique avec le Divi Builder, le code php ne fonctionne pas.
As-tu une solution dans ce cas ?
Merci pour l’aide
Ah du coup il faut chercher pourquoi, ça devrait marcher pourtant
Merci pour le temps que vous avez passĂ© pour rĂ©aliser ce tuto ! J’ai un problĂšme, j’ai créé une page Ă partir d’un template de divi. Sur cette page j’y ai ajoutĂ© mes produits avec woocommerce, et j’ai aussi ajoutĂ© un bouton d’ajout au panier. Mon problĂšme est le suivant : lorsque je clique sur le bouton d’ajout au panier, je suis directement redirigĂ© sur la page panier, si le client souhaite effectuer d’autres achats de produits, il doit cliquer sur le bouton « Poursuivre ses achats » . Cela m’embĂȘte car je vends plusieurs produits alimentaires, donc il serait preferable pour moi que le client puisse ajouter les produits a son panier sans ĂȘtre directement redirigĂ© sur la page panier. En effet, s’il doit acheter plus de 2 produits, l’expĂ©rience utilisateur peut devenir dĂ©sagrĂ©able.
Avez-vous une solution svp ?
Bonjour Yves. Ceci est un rĂ©glage de WooCommerce et non de Divi. Il faut dĂ©cocher lâoption dans les rĂ©glages de WooCommerce
Bonjour
GĂ©nial ! c’est excellemment !
Du coup pour faire encore plus simple, je souhaite supprimer le lien vers la fiche du produit sur l’image.
As tu la ligne de code pour ça ?
Merci Top !
Heu, il faudrait regarder ce code source. Peut-ĂȘtre un « display:none » en CSS peut suffire. A voir…
Bonjour Lycia,
super ce tuto ! đ par contre, j’ai un souci, les images de mes produits ne s’affiche pas sur la version mobile !! đ
Salut David ! Câest peut-ĂȘtre Ă cause du nommage de tes images. Il ne faut pas utiliser dâaccent ni de caractĂšre spĂ©ciauxâŠ
Bonjour Lycia et merci pour ton travail..
Je ne sais pas si tu peux m’aider mais je souhaite ajouter une checkbox ou un bouton radio dans la page panier pour savoir si oui ou non le client souhaite un emballage spĂ©cifique de ses produits (avec supplĂ©ment de 2âŹ).
J’ai beau chercher, je ne trouve la solution..
Merci pour ton aide
Bonjour Emilie, tu as de la chance il existe un plugin gratuit pour ça https://fr.wordpress.org/plugins/woocommerce-gift-wrapper/
Bonjour,
J’ai reportĂ© les 2 lignes de codes mais comme d’autres commentaires, cela ne fonctionne pas chez moi… le bouton « ajouter au panier » ne s’affiche pas sous les produits. Je me torture le cerveau pour essayer de rĂ©soudre ce mystĂšre mais je suis Ă court d’idĂ©es. Vous savez d’oĂč ce problĂšme peut venir? Un grand merci!
Salut Leila, je ne sais pas, pour mon tuto ça a marché donc, il faudrait revoir les étapes
Bonjour,
A chaque fois que je cherche une solution pour Divi, je tombe sur ton site. MERCI !!!
Sais-tu comment modifier le module ‘woocommerce chariot’ pour y afficher la rĂ©fĂ©rence UGS ?
Non mais yâa pas une option ?
Pour info j’ai trouvĂ© la solution par ici : https://diviengine.com/show-sku-in-cart-and-checkout/
Super