Customize the WooCommerce shop page with the Divi Theme Builder

Updated on 10/01/2020 | Published on 31/10/2019 | 72 comments

In the past, the WooCommerce shop page under Divi was not really attractive, it must be admitted.

Now it's child's play to customize this page to make it sexy and attractive!

This is what we will see in this new tutorial which is done in only 3 steps!

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - What does the WooCommerce/Divi shop page look like without customization?

Here is a screenshot of a WooCommerce shop page that has not yet been customized using the Divi's Builder Theme.

page boutique classique
Appearance of the shop page without customization

The Divi theme itself has not been customized either.

So you see a "basic" shop page, the one available when you install WooCommerce on WordPress and Divi.

The site header is classic, the custom logo has not been added, but most importantly, the body of the page is not attractive and presents this sidebar so... How can I say this? Naughty! Naughty!

In short, we will remedy all this without further delay!

2 - Create a template for a "shop" theme

Everything will happen from the tab Divi > Theme Builder available in your back office.

Here, it's very simple, just click on "+ Add New Template".

A window will open and propose you to choose which type of model you want to create: tick "Shop".

Créer une template de thème "boutique"
Add a new template for a "shop" theme

A new theme template (new template) has just been created. If you have already defined a "Global Header" (Global Header) and a "Global Footer" (Global Footer), these will appear in green.

If not, no worries, you can deal with it later. This is even optional.

page boutique header + footer custom
Appearance of the shop page with a header and a custom footer thanks to the "global header" and the "global footer". The body of the page is not yet customized.

On the screenshot above, the appearance of the shop page has already changed from the screenshot in Chapter 1 of this article.

This is normal since my "Global Header" and my "Global Footer" had been defined.

In this image, the "Global Header" is framed in green, the "Global Footer" is framed in purple and the body of the page or "Custom Body" (custom body) is framed in pink.

And it is precisely this Custom Body that will allow us to customize the appearance of our store.

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

3 - Add a Custom Body

Then go back to the tab Divi > Theme Builder and add a Custom Body to your theme template " Shop ".

Click on "Add Custom Body".

Ajouter un "custom body"
Add a custom body to the theme template

Choose "Build Custom Body" in the pop-up window.

The visual editor will open and you can start adding Divi modules to build the body of this shop page.

4 - Option 1: Add a Blog Module in the body of the Shop page

Of course, you can insert all the modules you want: text modules, image modules, image modules, etc. code modules etc.

But one of the solutions, if you want your page to display the products of your shop, is to insert a Blog module.

insérer un module de blog dans sa page boutique
Insert a blog module within the "custom body" of the shop page

The Divi Blog module allows you to display your shop's products under certain conditions....

To be read absolutely: how to create a personalized WooCommerce product sheet with Divi?

définir le "post type" du Blog Module
Define the Post Type of the Blog Module: choose "Products

From the "Content" tab of the Blog module, you can define the type of content to display (Post Type). Choose "Products".

You can then configure this module in the same way as you did when you used it to display your blog posts.

Améliorer l'apparence du Blog Module
Improve the appearance of the Blog Module from the Content and Style tab: choose "grid

You will be able to choose the number of products to display, categories, date, image, etc.

From the Style tab, you can change the appearance of the blog module:

  • Display it in a "grid",
  • Add a color and an overlay icon,
  • Add a shadow or animation,
  • Round off the angles,
  • Add a border,
  • etc.
sauvegarder la template de thème
Don't forget to save the theme template

Before leaving the Custom Body editor, don't forget to save your changes.

5 - Option n°2 : Add a shop module in the body of the page

The previous solution would be a suitable solution if the Blog module allowed to display the prices of each product from the shop page.

Unfortunately, this is not the case: depending on the project, it could be, but in most cases, the shops post the prices of the products before even visiting the sheet.

So, if this module does not suit you, it would be more appropriate to insert a Shop module into the Custom Body of your model.

Module Boutique Divi

This way, you can customize all the options offered by this module:

  • Font size
  • Size, font and colour of the price
  • Type of product to be displayed
  • Sales badge
  • Etc.

Note: you can create any kind of template with the builder theme! Also find out how create a stylish article template.

6 - Final appearance of the WooCommerce shop page

Once you have finished setting up the Store module (or Blog module) within your theme template (store template), you can discover the new look and feel of your Store page.

For this, it will obviously be necessary that products are available, otherwise, you will not see anything...

Apparence de la page boutique customisée
Appearance of the custom shop page

On the screenshot above, you can see that the entire shop page has been customized: the header, the body of the page as well as the footer.

To get started with Divi, discover all the articles to start serenely!

7 - Continue to customize the shop page

As I suggested earlier in this article, your shop page can accommodate more than just displaying your products.

Feel free to add other modules within this page when building your Custom Body.

This can be an opportunity to add a call to action, images, text, video, form, etc.

In short, nowadays, nothing is impossible anymore!

Need more resources on Divi? Visit ElegantThemes' blog full of ideas and tutorials!

page boutique personnalisée avec Divi
customiser la page boutique avec Divi
WooCommerce Shop Page

1,034 words


You should like it too:

Formation Divi PDF : un guide pas à pas

Divi PDF training: a step-by-step guide

What better than a Divi PDF training to master this WordPress Theme, its Visual Builder and its Theme Builder? It's as if a trainer invited himself in your home... Discover its content!

8 fonctionnalités du Divi Visual Builder que vous devriez utiliser !

8 Divi Visual Builder features you should use!

Are you using all the features offered by the Divi Visual Builder? Some of them are little known and yet so effective! Discover now the 8 Divi options that will save you a lot of time! A great user experience in perspective!

72 Commentaires

  1. Jean-Luc Robert

    C’est article tombe à pic, je cherchais justement comment customiser cette page. Et bien je suis gâté avec le contenu et la qualité de cet article et aussi des autres.
    Merci beaucoup.
    Que du bonheur

  2. Lycia Diaz

    Merci Jean Luc !

  3. LC

    Un grand merci encore pour ce tuto que j’attendais avec impatience !
    Désormais, en suivant vos explications, je me retrouve confronté à d’autres difficultés que je ne suis pas parvenu à modifier :

    -Comment afficher les images « en entier » (vignette d’image reprenant l’image entière, celle qui est affichée sur la page produit)

    -Comment classer les produits ?

    -Comment avoir 2 pages de produits ? (si l’on ne souhaite avoir que 10 produits par page par exemple). Je ne sais pas pourquoi, je n’y arrive pas…

    Merci encore de ton aide !!

  4. Lycia Diaz

    Salut LC,

    Désolée de mon retard de réponse… Bon, voici mes réponses dans l’ordre de tes questions :

    1/ Les images en entier ? Là comme ça, je ne vois pas trop. Comme tu peux le voir dans les captures d’écran de mon tuto, les images de mes ebooks de ma boutique « fictive » sont affichées en entier. Elles ne sont pas « cropées »… Donc, il me faudrait plus d’infos pour comprendre.
    2/ Comment classer les produits ? Tu parles de quoi ? Je pense alors que tu peux classer tes produits dans des catégories de produits qui tu créerais via WooCommerce, pas via Divi. Est-ce de ce classement-là que tu parles ?
    3/ Pour obtenir une pagination sur tes produits, il te suffit de bien paramétrer le « blog module », celui qui est utilisé dans le « custom body » de ma page boutique dans ce tuto. Il te suffit de saisir le « nombre de poste » (dans ce cas, c’est le nombre de produits par page, disponible dans le sous-onglet « contenu » du blog module) et de vérifier que « afficher la pagination » est bien activée dans le sous-onglet « elements » du « blog module ».

    J’espère t’avoir mis sur des pistes à explorer (sans capture d’écran ce n’est pas évident à expliquer).

    A bientôt


  5. LC

    Mille merci encore pour le temps que tu prends pour nous répondre à tous…
    Alors point par point.
    1/ pour les images.
    -Pour la version basique de Woocommerce (non customisée), cela donne ça
    Là aucun probleme, j’avais géré la taille des images depuis le personnaliseur (850×600 recadré en 2:3) de thème mais le design n’est pas customisé.
    – pour la version customisée, cela donne ça
    Comme tu peux le voir, les images sont retaillées la couverture des livres n’apparait pas entière et je ne parviens pas à trouver comment faire. Dans le module « blog », depuis le Theme Builder, il n’y a pas de moyen de gérer la taille des images qui sont automatiquement retaillée comme si c’était des images de blog.
    Et de ce que j’ai pu comprendre sur le web, redéfinir les images de format blog demande de faire du code, n’est-ce pas ? Or le code n’est pas mon fort du tout (d’autant que le format blog est bien, c’est le format « produit » que je veux uniquement changer.) J’ai vu aussi un pluging mais qui n’est plus mis à jour depuis 6mois…

    Y-a-t-il une astuce pour retailler les images sous Theme Builder que j’ai loupé ? Comment as-tu fait pour avoir les couvertures en entier y compris avec le module blog et le Theme Builder?

    2/ quand je passe sous Theme Builder, les produits s’affichent selon un ordre que je ne parviens pas à saisir. Je comprends qu’il y a des catégories via Woocommerce (je les ai) mais là sur cette page boutique, je veux afficher tous les livres, donc toutes les catégories. Le seul classement éventuel serait de les mettre par date de parution (ce sont des livres). Et là, je sèche sous DIVI. Car autant en version basique il y a le menu déroulant autant sous Divi (Theme Builder toujours), il n’y a plus de menu déroulant. Comment faire ?
    D’ailleurs, sous la version basique, l’ordre « du plus récent au plus ancien » ne fonctionne pas, à mois qu’il prenne en compte le jour de création de la page produit comme classement ? (auquel cas je devrais modifier les dates de création afin qu’ils se classent correctement?)

    3/ Ok, maintenant que tu le dis, c’est évident 🙂 Merci.

    Merci d’avance 🙂

  6. Yoann

    Bonjour, je n’ai pas trouvé comment faire apparaître le prix, il semble que la fonction manque dans l’onglet « Contenu ».

  7. LC

    Bonsoir Lycia
    Je ne sais pas si tu as vu mon dernier commentaire, mais je le complète avec la question suivante (car j’ai réfléchi à pourquoi tes images ne paraissaient pas coupées en passant sous Divi Theme Builder et le module blog alors que les miennes le sont) : de quelle taille sont tes images quand tu les charges sous WP?

    Sont-elles retaillées par le thème (dans le personnaliseur) ou sont-elles à la taille dans laquelle tu les affiches ? (Les miennes sont retaillées à 2:3 )
    Je voudrais tester avec la taille à laquelle tu les as chargé pour voir si ce serait pas simplement ça mon problème…
    Merci d’avance de ta réponse !

  8. Lycia Diaz

    Salut Yoann, tu parles d’une fiche produit construite avec le WooCommerce Builder ?
    As-tu pensé à ajouter le module Woo Price ?

  9. Lycia Diaz

    Salut LC,
    Désolée, j’ai mis du temps à te répondre car ton com’ était long et je ne pouvais pas y répondre « entre deux »…
    Alors déjà, pour le point n°3 : tant mieux, ça fait déjà un point de réglé…
    Pour les autres points :
    1/ J’ai bien compris qu’il y avait une histoire de « crop » qu’on n’arrive pas à comprendre. Ce que je peux te dire, c’est que pour mon tuto, mes images portraits ne sont pas croppées, comme tu as pu le voir (et je n’ai rien fait pour ça). J’ai fait ce tuto avec une install neuve. J’ai donc créé les fiches produit pour l’occasion. Ma question est donc : est-ce que ce souci de crop s’applique sur de « vieilles » fiches produit ? Est-ce que cela s’applique aussi sur des nouvelles ? As-tu essayé de supprimer les images d’une fiche produit pour les re-uploader à nouveau et voir si elles sont toujours croppées ? Sinon, effectivement, il existe un plugin assez sympa – bien que plus mis à jour, je crois – qui permet d’identifier les tailles d’images utilisées et de les modifier. Et oui, tu as raison, il faudra un peu toucher au code. Sans compter qu’il ne faut vraiment pas faire n’importe quoi avec car tu pourrais avoir des surprises. J’avais écrit un tuto pour expliquer comment modifier la taille des images de Divi. Si le code n’est pas ton fort, tu peux déjà essayer de supprimer les images d’une fiche produit et de les réimporter pour voir si cela fonctionne. Si non, tu pourrais contacter le support de Divi ? Enfin, si tout cela ne marche pas, il ne te restera plus qu’à mettre les mains dans le cambouis : LOL 😉
    2/ Oui LC, le classement se fait par date de publication : publication de ta fiche produit ou de ton article… et non celle de la publication du livre lui-même. Donc si tu veux que ce soit dans l’ordre de parution (en librairie), tu vas devoir tricher sur la date de publication de tes fiches produit. C’est une solution, en effet, mais je ne sais pas si en termes de SEO c’est bon. Il ne faudrait pas que ça te pénalise. À voir…
    Tiens-moi au courant pour les images.
    Lycia 😉

  10. Yoann

    Hello Lycia,

    Je parle de la page Boutique construite avec le Divi Builder et le module blog.

    J’ai pu mettre en forme ma liste de produits mais il me manque l’essentiel : le prix.

    Le module ne semble pas le récupérer c’est étonnant…

  11. Lycia Diaz

    Salut Lionel,
    Pour répondre à ta question : dans mon tuto, j’ai utilisé des images « pourries », d’ailleurs, on le voit, elles sont pixélisées. Je viens de vérifier, elles font environ 189px x 267px. C’est-à-dire, une qualité d’image que je n’utiliserais jamais sur un vrai site… Mais pour vérifier tes pensées, j’ai changé l’une de ces images par une autre en haute qualité : 4119px x 6178px … Pour voir si ça venait de là… Mais non, l’image n’est toujours pas croppée et apparait bien « entière », en format « portrait ».
    C’est vraiment bizarre cette histoire. Je me demande bien pourquoi tu as ce souci et pas moi.

  12. Lycia Diaz

    Salut Yohan.
    Désolée, j’avais compris qu’à moitié ta demande.
    Alors, si tu parles de la page boutique – et je suppose que tu parles de celle construite avec le Divi Theme Builder et non avec le Divi Builder effectivement, je vois que le prix n’est pas récupéré par le module Blog. Et je suis d’accord avec toi, c’est étonnant ! C’est même absurde…
    J’espère que plusieurs personnes ont fait remonter cette info à Elegant Thèmes afin qu’ils prennent ça en compte lors d’une nouvelle mise à jour. Car je n’ai trouvé aucune option à ce sujet dans le module.
    Cela n’empêche pas l’internaute de cliquer sur le produit pour en connaître le prix, mais c’est loin d’être l’idéal…
    Je vais leur envoyer un petit message via Twitter… Il va falloir que je travaille mon anglais… Lol 😉

  13. LC

    Merci beaucoup Lycia pour toutes tes réponses.
    Alors pour le moment Elegant theme ne me renvoie qu’à des propositions de modif de code. Mais comme tu n’en as pas eu besoin, je ne vois pas pourquoi j’aurais à en faire.
    J’ai modifié les affichages d’image de produit dans le « personnaliseur de thème ». J’ai mis la taille d’image de nos couvertures, pas retaillé (pour que le ration reste le même). Mais rien n’y fait. Je ne comprends pas…
    J’ai aussi noté comme vous que les prix n’étaient pas repris.
    Du coup, je vais abandonner.
    J’ai par contre testé avec le module boutique sur une page banale d’abord. Cela marche, mais pour une raison incompréhensible, c’est maintenant le tri qui n’est plus bon ! Le module prend en compte la création de la page et même si je modifie celle-ci l’ordre reste mauvais après coup…
    Je me demande s’il n’y a pas un bug quelque part…

  14. Lycia Diaz

    Effectivement, c’est bizarre… Tu as un lien à me fournir ?

  15. LC

    Merci de ta sollicitude. Tu peux voir ici la page d’essai via le module boutique de Divi avec le classement donnant (normalement!) par ordre du plus récent au + ancien.
    Mais cela ne marche pas pour une raison que j’ignore.
    J’ai contacté Elegant Theme qui m’a demandé de remettre le tri par défaut dans le Personnaliseur de thème du coup, je l’ai fait mais cela change rien.
    Et donc ici , c’est l’actuelle boutique (la vraie) qui du coup est d’office classée en tri par défaut depuis hier (mais si tu mets le menu déroulant sur +récent au + ancien tu pourras comparé avec l’essai customisé du module boutique du lien ci-dessus : l’ordre n’est pas le même). J’en perds mon latin… et me demande s’il n’y a pas un bug…

  16. LC

    J’ai posté 2 fois le commentaire, mais je le vois pas en modération, j’espère qu’il est passé…

  17. Lycia Diaz

    Hi hi, je viens de modérer ton commentaire @LC ! C’est peut-être pour ça que tu ne le voyais pas…
    Honnêtement, je ne sais pas trop quoi te dire. Si ET n’a pas de solution, comment pourrais-je en avoir une ?
    … Elle est très jolie cette boutique, les images sont superbes ! Mais dis-moi : elles ne sont pas croppées ? Tu as réglé ce problème alors ??? Je les vois au format portrait ! Lors de ton dernier commentaire, ce n’était pas le cas il me semble.
    Concernant ton tri, je ne vois aucun filtre à sélectionner…
    Sinon, comme je te l’ai dit : les produits se gèrent comme les articles : le dernier publié doit se retrouver en haut de la liste normalement. Mais là, je n’arrive pas à voir…

  18. LC

    Merci pour ton retour. Bon, en fait, j’ai réussi mais en bidouillant.
    J’ai construit une page avec le Divi boutique module et avec des boutons. J’ai customisé puis charger la page sur le Theme Builder et encore modifié un peu.
    Désormais tout est bon.
    Quant à l’ordre de tri, je ne sais pas comment ça s’est réglé mais je pense que c’était dû à un plugin de customisation du tri. J’ai tout désactivé et c’est rentré dans l’ordre (c’est le cas de la dire!).
    PAr contre, pour info, si je suis la méthode de mettre le module blog > produit etc. mes images restent croppées etc. J’ai abandonné cette méthode.
    Mais je mets ce com aussi si d’autres que moi ont ce probleme. On peut le contourner en utilisant le module « boutique » de DIVI (y compris dans le Theme Builder bien sûr.)
    Merci encore !

  19. LC

    Sais-tu comment modifier le résumé qui s’affiche quand on partage le lien de la page boutique sur un autre site (Facebook ou autre). Car pour le moment il affiche les 55 premiers mots du post le plus récent.
    J’ai modifié et mis le résumé (excerp) dans la page que j’ai construite en amont mais quand je charge cette même page en tant que modèle sur le Theme Builder pour faire ma boutique, le résumé précédemment fait sur la page ne s’affiche plus. Comme s’il n’était pas chargé avec le reste du design…
    Et je ne trouve aucun endroit sur le Theme Builder en Visual builder pour le faire… Voilà, encore une question !! ^^

  20. LC

    Je reviens vers toi car en fait mon problème de tri n’était pas réglé… Mes excuses si je post à nouveau.
    J’ai tout vérifié plusieurs fois (date article, option de classement partout), le tri est bien sur « du plus récent » sur le personnaliseur de theme ET sur mon module boutique DIVI. Bref, rien n’y fait.
    J’ai donc forcé les choses (car il faut bien que la boutique fonctionne!!) et j’ai utilisé un plugin Redirection pour forcé l’affichage avec /boutique/?orderby=date?
    Ainsi, je saute au dessus de problème même si je suis vraiment perdu et ne comprends pas pourquoi cela ne marche pas…

  21. Lycia Diaz

    Salut LC. Les résumés qui sont récupérés lors des partages sur les réseaux sociaux sont le Titre SEO et la Description SEO. C’est donc avec un plugin comme Yoast ou SEOPress que tu pourras le personnaliser.

  22. Lycia Diaz

    Oui merci LC !
    Effectivement le module Boutique est plus approprié car il affiche les prix, alors que le module Blog, non… Désolée, je mettrais l’article à jour dès que je le pourrais !

  23. LC

    Pas de souci Lycia ! Mille mercis encore pour ton aide 🙂

  24. Lycia Diaz

    Salut Lionel (LC).
    Pour que tes images de produits ne soient pas cropées, tu vas à : Apparence > Personnaliser > WooCommerce > Images de produit > et tout en bas tu choisis « Non recadrées »
    Cela règlera ton problème.

  25. guillaume


    Lorsque l’on crée une fiche produit et que j’y insère le module Woo Breadcrumb, je rencontre un problème.
    Est-il possible de customiser les pages qui vont apparaître.
    exemple : la fiche fraise à l’adresse site/categorie-produits/Fruits est ok mais si on remonte l’arborescence la fiche /categorie-produits/Fruits générée n’est pas customisable.

    Auriez-vous une idée .

  26. Lycia Diaz

    Salut Guillaume,
    Je ne voudrais pas dire de bêtises mais je ne pense pas que l’on puisse modifier un Breadcrumb. Il fait appel à une hiérarchie naturelle de WordPress. Par exemple : accueil > page de catégorie > article/produit.
    Si les pages de catégorie ne te conviennent pas, tu dois les customiser grâce au nouveau thème builder.

  27. guillaume

    Merci pour ta réponse rapide.

    Je ne souhaite pas modifié le Breadcrumb, mais je vais devoir le supprimer, car malheureusement on ne sait pas modifier les pages via divi.
    Si on consulte le site en admin, on peut constater que l’option activer le visual builder disparaît sur ces pages.
    Je ne trouve pas le moyen de modifier le template product-category, a part modifier hors divi.

    Peut-être que cela sera possible dans l’avenir.

  28. Lycia Diaz

    Salut Guillaume,
    Les pages d’archives comme les product-category ne sont pas dotées du bouton violet « éditer avec Divi » effectivement, mais tu peux tout à fait les modifier si tu passes par le thème builder !!!
    Cet article peut t’aiguiller : et notamment le chapitre 2.

  29. Lucie

    Merci pour cet article.
    J’ai également personnalisé ma boutique depuis le Divi Theme Builder, mais depuis, les widgets de filtres dans ma side-bar ne fonctionnent plus…
    J’ai lu que si l’on modifiait les pages d’origines générées par Woocommerce (boutique, category etc.) cela nuisait au fonctionnement des filtres… 🙁
    Y a t’il un plugin qui irait à l’encontre de cette « règle » et qui proposerait des filtres qui fonctionnent avec une boutique affiché par un shortcode sur une page personnalisée ?

  30. Lycia Diaz

    Salut Lucie, alors là, tu me poses une colle… Il existe un plugin de filtrage qui a l’air prometteur. Je ne l’ai pas testé et je ne sais pas si c’est ce que tu recherches, jette un œil ici :

  31. salomé

    Bonne année et merci pour ce tuto 🙂

    J’ai construit la page product, cependant je n’arrive pas à la customiser…
    J’aimerais réaliser une page simple avec tout mes produits et faire apparaitre le nom du produit seulement lorsque je passe le curseur sur le produit en question.

    Comme sur ce site :

    Auriez-vous une idée .

  32. Lycia Diaz

    Bonsoir Salomé,
    Il faudrait chercher du côté des plugins de Galerie compatibles WooCommerce, je suppose… ou le coder à la main, mais ça c’est plus compliqué 😉

  33. HugoGlitch

    Bonjour Lycia,
    J’ai une question qui porte sur la balise titre du module boutique de Divi que tu présentes dans ton article. Est-il possible de changer cette balise (qui est une par défaut) et de la remplacer par un ou à la place ?
    Le SEO est impacté par cela car sur une page d’accueil avec beaucoup de produits affichés cela crée une multitude de balises là où il faudrait plutôt diluer tous ces noms de produits avec des inférieurs.
    Merci d’avance pour ta réponse et au plaisir de te lire 🙂

  34. HugoGlitch

    Bonjour, j’ai une question qui porte sur la balise titre du module boutique de Divi que tu présentes dans ton article. Est-il possible de changer cette balise (qui est une h2 par défaut) et de la remplacer par un h3 ou h4 à la place ?
    Le SEO est impacté par cela car sur une page d’accueil avec beaucoup de produits affichés cela crée une multitude de balises h2 là où il faudrait plutôt diluer tous ces noms de produits avec des hn inférieurs.
    Merci d’avance pour ta réponse et au plaisir de te lire 🙂

  35. Lycia Diaz

    Salut Hugo,
    Je ne suis pas sûre de savoir de quel titre tu parles mais normalement, tu dois pouvoir changer la balise depuis l’onglet Style.

  36. cyril

    Bonjour, je débute sur divi 4 et woo commerce,
    je cherche à afficher en home page mes différentes images de catégorie (en mode galerie cliquable qui amène aux pages correspondantes), je ne trouve pas de modules dans l’éditeur de divi ni dans l’éditeur de pages classiques,
    merci d’avance

  37. Lycia Diaz

    Salut Cyril,
    Il te suffit de faire ça manuellement : tu mets une ligne scindée en 4 ou 5 et tu y places les images de tes catégories. Sur chaque image, tu places le lien de tes catégories. C’est aussi simple. Pas besoin de module spécifique 😉

  38. David


    Merci pour cet article qui n’a pas résolu mon soucis.

    Le module boutique me pose un problème.
    Je sélectionne 3 produits dans une catégorie et cela me met toujours un espace entre le 2 ème et le 3 ème et seul les 2 premier produits se mettent pas dans l’ordre croissant (ou décroissant). Cela se rectifie un peu avec body commerce mais le 2 eme et 3 eme produit se chevauche.
    Par contre si je vais dans personnaliser le thème, woocommerce et catalogue de produits cela s’affiche correctement.

    Du coup, j’ai une page boutique un peu merdique que je voudrais améliorer avec body commerce….mais bloqué.

    Merci de votre aide


  39. Lycia Diaz

    Aurais-tu par hasard coché l’option « produit mis en avant » qui est proposé sur tous les sites WordPress (= ce n’est pas une option de Divi) car si c’est le cas, tu auras beau filtrer, les produits mis en avant prennent le dessus (je crois). Donc regarde peut-être de ce côté là…

  40. Lycia Diaz

    PS : je n’ai jamais testé Body Commerce

  41. Milea

    Je viens de découvrir divi 4 et avec le theme builder je n’arrive pas à customiser les pages catégories, les travailler categorie par categorie. J’ai trouvé une page accueil, produits que j’ai pu customiser mais ensuite lorsque j’essaie de customiser le layout toutes categories je bug!!!!
    Je vous mets l’adresse du site mais celui-ci est encore en construction evidemment
    Merci de votre attention

  42. Bruno Soulé

    Re bonjour
    Il y aurait-il quelqu’un qui puisse m’aider?

  43. Lycia Diaz

    Salut Bruno, en quoi peut-on t’aider ?

  44. Bruno Soulé

    Je viens de découvrir divi 4 et avec le theme builder je n’arrive pas à customiser les pages catégories, bien qu’il existe un layout « toutes les categories page » mais lorsque je veux customiser celle ci c’est en fait la page catégorie blog et non categorie produits!!!!!! je bug!!!!
    Je vous mets l’adresse du site mais celui-ci est encore en construction evidemment
    Merci de votre attention

  45. Lycia Diaz

    Bruno, tu choisis le mauvais modèle. Tu dois choisir le « produit catégorie »… je ne sais plus son nom exact

  46. Bruno Soulé

    Désolé je ne comprends pas quand je choisis ce modele je ne peux afficher qu’un produitcela ne me renvoie pas la page native categorie de woocommerce. Pas grave je continue à chercher,

  47. Lycia Diaz

    Faut que je me penche sur cette question…

  48. stephane

    Bonjour Lycia, je suis nouveau sur Divi et j’aimerai savoir comment supprimer la petite boite Qté présente sous le prix lorsque je séléctionne le module boutique

  49. Lycia Diaz

    Bonjour Stéphane,
    Je crois qu’il vaut mieux cocher une option native de WooCommerce qui indique qu’un seul exemplaire peut être mis dans le panier. Dans ce cas, la boite de quantité disparait.

  50. Paco

    Merci pour cet article très utile et d’une grande aide !!. (͡⚈‿⚈͡)

  51. Lycia Diaz

    Salut Milea,
    Il faut que tu passes par le Thème Builder. Si des catégories existent, tu trouveras la template à modifier.

  52. Milea

    Bonjour Lycia tout d’abord un grand merci pour ta réponse le chemin est un peu tortueux pour un autodidacte mais le résultat est au rendez-vous 😉 ca y est je peux personnaliser mes pages catégories.
    Merci encore et si je peux me permettre de vous demander votre avis sur mon site?
    Bien cordialement

  53. Lycia Diaz

    Merci Milea 😉 Oui, donnes-nous le lien de ton site ! On y jettera un œil

  54. Milea

    Merci d’avance voici le lien
    Par contre je n’arrive pas à optimiser tablette et mobile malgré les tutos on dirait que la moindre modification sur un écran s’enregistre sur les autres 😔 au lieu que ces modifications s’enregistrent indépendamment 😢
    Merci encore de votre assistance un réel soutien pour les amateurs motivés 😉

  55. Marie


    Merci pour cet article tres instructif!
    Je debute sur Divi et bien qu’ayant deja fait des sites internets, c’est la premiere fois que je me lance sur une boutique en ligne pour un restaurant (l’idee est de proposer de la vente a emporter, comme beaucoup en ce moment!), via Woocommerce, et je fais face a un soucis que je n’arrive pas a resoudre :
    J’aimerais que l’ajout au panier soit possible des la page de la boutique (sans devoir rentrer sur la page du produit en question), et idealement, pouvoir, changer le look de ce bouton…
    Je suis sur le theme Divi de base et j’utilise le module boutique pour afficher les produits, mais seul le prix et le titre du produit est affichable…
    Merci d’avance pour votre aide!


  56. Lycia Diaz

    Sympa ton site Milea ! Je l’ai regardé depuis ma tablette et il y a quelques soucis de marge mais rien de bien méchant. Par contre, sur tes pages de produits par catégorie, je te conseille d’augmenter le nombre de produit à afficher et de supprimer la pagination. Ce sont 2 options disponibles normalement (dans le module boutique en tout cas). Ainsi, les internautes n’ont pas à cliquer pour voir la suite des produits.

  57. Milea

    Bonjour Lycia, merci pour tes encouragements c’est gratifiant 😉 Tu me conseilles donc d’afficher l’intégralité des produits et de supprimer la pagination?
    Bonne journée à toi et encore merci

  58. Lycia Diaz

    Oui sauf si tu as vraiment beaucoup de produits. Ou alors tu augmente les valeurs. Par exemple 30 produits par pages au lieu de 12 actuellement ? C’est ce que je ferais mais est-ce la meilleure solution ? C’est subjectif.

  59. Hubert

    Bonjour, j ai une boutique en ligne et j aimerais que l image du produit vendu change au passage de la souris (Sans que le client soit obligé de rentrer dans la fiche produit et qu il reste sur la page des articles vendus) j ai fais des recherches mais impossible de trouver une réponse.. Pouvez vous m aider? Merci

  60. Lycia Diaz

    Salut Hubert, c’est une bonne question…
    Je vais faire des recherches.

  61. Hubert

    Merciiiiii lycia diaz
    De mon côté, j ai fait des recherches mais cela n a rien donné, je bloque … j attends votre réponse avec impatience

  62. AlzaTek

    Bonjour Lycia !

    Tout d’abord, merci pour tes tutos, qui m’ont bien aidés jusqu’à présent.
    Je voudrait savoir s’il est possible de virer complètement la page « Boutique » qui a été générée automatiquement via l’installation de Woocommerce ?
    Car de base, j’en avais déjà construit une, super belle et surtout en raccord avec le reste du site, mais à cause de cette m… de Woocomerce, je me retrouve avec une redirection vers la page qu’il a généré… Et du coup, c’est archi moche ^^’

    J’espère qu’il y a une solution, car je tiens vraiment à ma page haha

    En tout cas, merci pour tout, et bonne journée !

  63. Lycia Diaz

    Salut Alzatek,
    En fait, il faudrait que :
    1/ tu enregistres ta mise en page dans la bibliothèque
    2/ Tu crées le modèle de ta page boutique avec le thème builder
    3/ tu importes ta mise en page précédemment enregistrée.
    Du coup, tu devrais obtenir ton bon design à la place de la page moche.

  64. AlzaTek

    Oh punaise, tu m’as sauvé !!!

    Merci infiniment ! 😀

  65. Lycia Diaz

    Avec plaisir !

  66. LioC

    est-ce quelqu’un a eu des probleme avec DIVI (via them builder) et la dernière version de woocommerce 4.4.0 et 4.4.1 ?
    Je suis en contacte avec Elegant Theme et le Support de WC mais je ne trouve toujours pas de solution… De mon côté, notre boutique ne s’affiche plus ! Alors que tout est bon dans le Theme Builder et que tout fonctionnait bien il y a 2 jours encore avant la mise à jour de WC…

  67. Lycia Diaz

    Salut LioC, tu as résolu le problème ? Je crois que WooCommerce 4.4 a fait foirer pas mal de trucs. Il y avait un conflit entre WooCommerce et WPRocket. Ton souci peut venir de là, si tu utilises les 2 ensemble.

  68. LC

    Merci de ta réponse.
    Alors, oui et non, j’ai rétrograder avec Rollback d’abord Wommerce puis ensuite DIVI parce que le problème perdurait.
    Je n’utilise plus WP Rocket mais LSCache (via 02switch).

    Apparemment Elegant Theme m’a dit que le probleme avec WC était connu d’eux et qu’il me conseillaient d’attendre un prochain update pour être sûr.

    Et effectivement, il y a eu pas mal de souci avec la MAJ de WC 4.4. Tu n’as entendu personne avoir de souci avec DIVI (en dehors de WP Rocket) ?

  69. Lycia Diaz

    Salut LC. Mes sites sont tous fait avec Divi et la plupart ont également WooCommerce et WP Rocket. J’ai fait toutes les mises à jour et je n’ai eu aucun souci. Tout marche bien. Donc le conflit est peut-être ailleurs ?

  70. LC

    Voilà qui est étrange, surtout WP Rocket a même publié un article en disant qu’il fallait faire leur seconde MAJ pour apporter le correctif suite au bug que cela créait avec celle de WC…

  71. Lycia Diaz

    Oui mais justement, je n’ai fait mes mises à jour qu’après l’email de WP Rocket ! Qd j’ai vu que WP et WC avaient de grosses MAJ de prévues j’ai attendu 15 jours avant de les faire. Quand c’est comme ça j’attends toujours et j’ai souvent raison de le faire 😉 du coup aucun bug

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

Share This