Comment créer un modèle de fiche produit WooCommerce avec Divi ?

Mis à jour le 12/11/2019 | Publié le 26/10/2019 | 38 commentaires

Créer un modèle de fiche produit WooCommerce avec Divi est enfin possible grâce à deux fonctionnalités introduites dernièrement : le WooCommerce Builder et le Theme Builder.

Grâce à ces deux fonctionnalités vous allez pouvoir créer des templates de thème et les assigner à des modèles de page de votre site.

Donc, en quelques clics, vous allez changer l’apparence de vos fiches produit, que vous en ayez 1 ou 1000 !!!

Dans cet article, je ne vais pas vous expliquer comment créer une boutique en ligne avec WooCommerce, mon ebook-formation « WooCommerce : le Guide » est là pour ça. Je vous le conseille si vous souhaitez ajouter une boutique à votre site vitrine et que vous ne savez pas comment faire…

Donc dans cet article, on va se concentrer sur la fiche-produit elle-même et on va voir quelles sont les possibilités offertes par Divi.

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 – Peut-on agir sur une boutique WooCommerce déjà existante ?

Si vous installez une boutique en ligne sur un site WordPress utilisant Divi 4.0 aujourd’hui, la question ne se pose pas…

Par contre, si vous détenez déjà une boutique avec des dizaines ou des centaines de produits, je comprends que vous soyez réticent à l’idée de mettre à jour Divi.

Rassurez-vous, vous pouvez sans problème mettre à jour Divi et commencer à profiter de ses nouvelles fonctionnalités.

Et c’est ce que nous allons voir dans la suite de cet article…

2 – Créer une fiche produit WooCommerce

Si vous venez d’installer et de paramétrer WooCommerce, vous pourrez créer votre premier produit en vous rendant à l’onglet « Produits ». Il vous suffira alors de cliquer sur « Créer un Produit ».

fiche produit WooCommerce
Créer une fiche produit WooCommerce

Si vous possédez une déjà boutique WooCommerce, cet onglet listera tous vos produits existants…

À lire aussi : comment personnaliser la page boutique WooCommerce avec le Divi Thème Builder ?

2.1 – Fiche produit avec l’éditeur par défaut de WordPress

Voilà à quoi ressemble votre fiche produit en back-office :

Fiche produit en back-office
Fiche produit en back-office

Dans cet éditeur (éditeur classique/par défaut de WordPress), vous devrez renseigner toutes les informations pour votre produit :

  1. Saisissez le titre de votre produit.
  2. Rédigez une description dite « longue ».
  3. Remplissez tous les champs nécessaires à la vente : prix, type de produit, stock, taxes, etc.
  4. Rédigez une description dite « courte ».
  5. Ajoutez l’image principale du produit.
  6. Ajoutez d’autres images pour constituer la galerie d’images du produit (facultatif).
  7. Affectez une catégorie à votre produit.
  8. Choisissez le modèle de page : avec ou sans sidebar. Cette action devient facultative car nous allons construire le design de cette fiche à l’aide du Thème Builder.
  9. Publiez votre produit.

À ce stade, voici à quoi ressemble votre fiche produit en front-end :

Apparence produit en front-end
Apparence de la fiche produit (sans customisation)

Ce site est « vierge », il n’a pas été customisé et le design présenté est celui de base de Divi.

C’est pas très glamour, n’est-ce pas ?

2.2 – Fiche produit avec le Divi Builder

Toujours depuis le back-office, si vous cliquez sur le bouton violet « Utiliser le générateur Divi », voici ce qui apparaît :

Produit back-office : Divi Builder actif
Produit back-office : Divi Builder actif

On découvre alors l’ancien Divi Builder, celui qui était disponible en back-office

En utilisant le « drag & drop » (glisser-déposer), vous pourrez facilement réorganiser la structure de votre fiche produit WooCommerce.

Vous pourrez aussi ouvrir les réglages de chaque module afin de les customiser…

Notez : pour l’instant, les changements que vous effectuez dans cette fiche produit n’apparaîtront qu’au sein de celle-ci. Si vous utilisez cette méthode, vous devrez alors recommencer le design pour chacune de vos fiches produit. Ce qui serait contre-productif…

2.3 – Fiche produit avec le Visual Builder

Si vous cliquez sur le bouton « Construire sur le front-end », vous passerez à l’édition de votre fiche produit, en mode visuel.

Produit : Visual Builder actif
Fiche produit : Visual Builder actif

C’est quand même mieux, non ?

Mais cela ne suffit pas pour assigner ce design à l’ensemble de vos fiches produit. Avec cette méthode, encore, vous devrez toujours recommencer le design pour chaque produit…

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

3 – Les modules Divi utilisés au sein d’une fiche produit

Une fiche produit basique est composée de divers éléments « obligatoires » – ou plutôt nécessaires – comme le prix ou le bouton d’ajout au panier par exemple. D’autres éléments peuvent devenir facultatifs si vous le décidez…

Divi modules constituant une fiche produit

En fait, comme vous pouvez le voir sur cette capture, la plupart des modules du WooCommerce Builder sont utilisés au sein d’une fiche produit. Dans celle-ci, nous trouvons :

  1. Woo Breadcrumb
  2. Woo Cart Notice
  3. Woo Images
  4. Woo Title
  5. Woo Rating
  6. Woo Price
  7. Woo Description
  8. Woo Add To Cart
  9. Woo Meta
  10. Woo Tabs
  11. Woo Upsell
  12. Woo Related Product

D’autres modules existent mais n’apparaissent pas ici car cette fiche ne le nécessite pas. C’est souvent le cas pour les produits dématérialisés (pas de stock) ou pour des produits qui n’ont pas encore d’avis (Woo Reviews) par exemple :

  • Woo Stock
  • Woo Reviews
  • Woo Additional Info
  • Woo Gallery

Donc si vous construisez de toute pièce le layout de votre fiche produit, faites attention à ne pas supprimer certains modules importants.

4 – Créer un modèle pour l’ensemble de vos fiches produit

Voilà une fonctionnalité qui va ravir la plupart des propriétaires d’un site WooCommerce avec Divi : la possibilité de créer un modèle applicable à l’ensemble (ou non) des produits de la boutique (ceux déjà publiés comme ceux à venir).

L’idée est de ne pas construire le design, produit par produit, comme vu dans les précédents chapitres, mais de le construire une fois pour toute et de l’enregistrer comme « modèle ».

Pour cela, il vous suffira de créer une template de thème depuis l’onglet Theme Builder.

Template de Theme "All Produits"
Template « All Produits » : s’applique à toutes les fiches produit de votre boutique

En cliquant sur l’icône « + » Add New Template, il vous suffira de l’assigner à l’option « All Produits ».

Cette template de thème va agir par défaut sur toutes les fiches produit de votre boutique.

Dans l’absolu, l’ajout d’un Global Header et d’un Global Footer est facultatif. Ce qui nous intéresse vraiment ici, c’est d’ajouter un « Custom Body » et de le configurer 1 seule fois, pour qu’il s’applique à l’ensemble des fiches produit.

Lorsque vous éditerez ce Custom Body, vous vous retrouverez dans l’environnement du Visual Builder et vous pourrez ajouter des sections, des lignes et des modules, comme vous le feriez lors de la construction d’un layout de page.

Mais il y a plusieurs choses à savoir :

4.1 – Utiliser des modules WooCommerce pour construire le modèle

Vous construisez votre fiche produit donc autant utiliser les modules WooCommerce mis à disposition par Divi…

Module Woo Price
Insertion d’un module « Woo Price » mais la procédure est similaire pour les autres modules
  1. Insérez un module Woo…
  2. Dans le cas du module Woo Price, un prix « fictif » apparaît.
  3. Choisir « This Produit » : important !
  4. Changez le style : couleur, taille du texte, ombre, animation etc.
  5. Ajoutez des paramètres avancés si besoin.
  6. Sauvegardez.

Lorsque vous insérez les modules Woo, choisissez « This Produit ».

« This Produit » permet de faire appel aux infos du produit affiché. Donc peu importe sur quelle fiche produit on se trouve, le prix variera en fonction des informations saisies lors de sa création (chapitre 2.1 de cet article).

4.2 – Utiliser le contenu dynamique

Dans une fiche produit, vous pouvez également ajouter d’autres modules Divi : texte, image etc.

utiliser le contenu dynamique

D’ailleurs, certains modules deviennent intéressants si vous les utilisez pour afficher du « contenu dynamique ».

  1. Ajouter un module Texte
  2. Cliquez sur l’icône « Utiliser le contenu dynamique »
  3. Sélectionnez le contenu dynamique que vous voulez afficher. Dans la capture d’écran, il s’agit du « Post Categories ».
  4. Cela affichera les catégories assignées à chaque produit.

En savoir plus au sujet du contenu dynamique.

4.3 – Le rôle du module Post Content dans la fiche produit

module Post Content dans la fiche produit WooCommerce

Vous l’avez compris, la plupart des modules WooCommerce sont indispensables. Mais à quoi sert le module Post Content, apparu depuis la version 4.0 de Divi ?

Si vous l’insérez, votre fiche produit affichera la « longue description » (pastille n°2 du chapitre 2.1 de cet article).

Cette longue description utilise un éditeur de texte classique dans lequel vous pourrez ajouter du texte et des images.

5 – Créer un modèle en fonction des catégories de produits

Dans le chapitre précédent, on a paramétré le design de l’ensemble des fiches produit de la boutique.

Toutefois, vous n’êtes pas obligé d’utiliser le même design pour l’ensemble de vos produits. Vous pourriez créer plusieurs modèles (toujours depuis le Theme Builder) et les assigner à certains types de produit.

Vous pouvez créer des dispositions en fonction des catégories de produits par exemple.

Template "Produits in Specific Categories De Produits"
Template « Produits in Specific Categories De Produits » : s’applique seulement aux fiches produit de cette catégorie.

Dans la capture ci-dessus, un design a été attribué à la catégorie nommée « Cuisine Traditionnelle » et un autre à la catégorie « Cuisine Légère ».

Le choix de l’affectation de template se décide lors de sa création mais vous pouvez changer cela grâce aux paramètres de la template (icône de la roue dentée).

custom Theme Builder Category
Fiche produit différente en fonction de la catégorie sélectionnée.

Dans ce cas, les produits classés dans la catégorie « A » auront une apparence différente de ceux classés dans la catégorie « B ».

6 – D’autres options sont disponibles

Lors de la création de template de thème pour votre fiche produit, vous avez diverses options : pas seulement « All Produits » et « Produits in Specific Categories De Produits »…

modèles de produits
Sélectionner les modèles de produits pour créer le design

Vous pourrez créer des designs de fiches produit en fonction des étiquettes, de produits spécifiques (uniques), de la page d’archive de produits etc.

Pour bien débuter avec Divi, découvrez tous les articles pour commencer sereinement !

WooCommerce Fiche Produit
WooCommerce Produit
WooCommerce Product Template Divi

1,580 mots

6

Ça devrait vous plaire aussi :

Projet Divi : à quoi ça sert ?

Projet Divi : à quoi ça sert ?

À quoi servent les « Projets » Divi ? Devez-vous les utiliser ? Dans quels cas ? Je vous explique tout dans cet article.

Formation Divi PDF : un guide pas à pas

Formation Divi PDF : un guide pas à pas

Quoi de mieux qu’une formation Divi PDF pour maitriser ce thème WordPress, son Visual Builder et son Thème Builder ? C’est comme si un formateur s’invitait chez vous… Découvrez son contenu !

38 Commentaires

  1. LC

    Mille merci encore pour ce tuto.
    J’ai suivi les étapes mais après je me suis rendu compte que (a priori, sauf erreur) je ne peux pas passer par le Theme Builder car sur chacune de mes pages, j’ai des trailers différents, des « vous aimerez peut-être » différents etc. Donc, en faisant le modèle, cela ne colle plus. J’ai l’impression qu’en chargeant mon modèle de page depuis la bibliothèque DIVI, je vais aussi vite.
    Par contre, j’ai hâte de voir vos astuces pour la page « boutique » ! (je patiente 🙂 )

  2. Lycia Diaz

    Merci LC !
    Effectivement, il faut que tu voies ce qui colle le mieux à ton projet. Enregistrer le layout est une bonne solution aussi, sauf si tu as beaucoup de produits et qu’un jour tu veux modifier un élément, tu devras rééditer chaque produit. L’avantage avec le template de thème c’est que tu peux modifier un petit élément sur toutes tes pages/produits à la fois. C’est un vrai gain de temps.
    Je ne veux pas dire de bêtises mais est-ce que les « vous aimerez peut-être » ne dépendent-ils pas de la fiche produit que tu crées dans le back-office ? Ce sont les related et upsell non ? Donc a priori, ils devraient être suivis avec la création du modèle dans le thème builder ??? Je ne suis pas sûre, à voir…
    Oui, la page boutique : semaine prochaine 😉
    Bon week-end 😉

  3. Jean-Luc

    Hello Lycia
    Merci pour ce tuto.
    Mais j’ai une question, si on crée un modèle pour l’ensemble des fiches produit, est-ce que je doit aussi utiliser le générateur DIVI dans chaque fiche ?
    Merci d’avance

  4. Lycia Diaz

    Salut Jean-Luc.
    Comme expliqué dans mon article, si tu crées un modèle de fiche produit via le thème builder, celui-ci récupèrera le contenu de tes fiches produit, peu importe avec quoi elles ont été faites : en natif ou avec le Visual Builder. Donc, c’est toi qui choisi.
    😉

  5. NERAUD

    Bonjour Lycia !
    Merci pour tout vos tutos…
    Existe t’il une possibilité « simple » d’afficher les produits dans la boutique selon un ordre précis, dériré… J’ai utilsé plusieurs méthode sans résultats…
    J’ai les dernières versions : WP / Divi / Woo
    Bien cordialement,

    Philippe

  6. Lycia Diaz

    Salut Neraud, je ne connais pas tes besoins exacts mais peut-être que tu as besoin d’une recherche à facette ? Regarde ça : https://wpgridbuilder.com/

  7. Eric Raymond

    Merci pour ce tuto !

    Je suis entrain de créer une boutique avec Woo pour la première fois. J’avais déjà une dizaine de produits avant de voir ton articles.

    Quand je crée un layout pour ma page produit et que je l’applique aux thème builder pour tous les produits bien je perds le contenu existant de mes pages.

    Même chose pour mes pages. J’ai déjà une dizaine de page créer et quand j’applique le layout au theme builder et que je sélection Pages bien tout le contenu de mes pages disparaîts.

    Comment fais-tu pour lui dire de garder le contenu ?

    Ensuite comment il faut faire pour éditer la page Catégorie des produits ? J’ai créé le layout pour la page produit mais j’aimerais créer un layout identique pour la page catégorie mais l’option visuel Builder n’est pas disponible.

    Merci pour ton aide !

  8. Lycia Diaz

    Salut Eric.
    Alors, si tu perds le contenu de tes pages, c’est certainement parce que tu as oublié d’insérer le module Publier un contenu : https://astucesdivi.com/module-post-content/
    Concernant la page de catégorie de produits, tu ne peux pas activer le visual Builder, c’est normal… par contre, tu peux créer le design de tes catégories directement dans le thème Builder ! Comme tu as fait pour le reste 😉

  9. Isableue

    Bonjour Lycia,
    Merci pour tous tes tutos !
    J’ai créé plusieurs templates pour mon site (articles, archives…) mais je bloque pour le template des produits. Chacune de mes fiches produit affiche une couleur différente en fonction de la couleur principale du produit.
    J’aimerais pouvoir choisir la couleur de la fiche lors de sa création (en ajoutant un champ avec ACF par exemple ?) puis répercuter cette couleur sur le titre du produit, les encadrés, le prix, les dividers… ou tout autre élément finalement.
    Existe-t-il une astuce me permettant de réaliser cela ?

  10. Lycia Diaz

    Salut Isableue,
    Houla, ce que tu demandes est peut-être faisable avec un développement sur-mesure (????) mais pas avec Divi. Disons pas en automatique… Tu devras décliner ta fiche manuellement avec la nouvelle couleur, je suppose que ce n’est pas ce que tu recherches ?

  11. Isableue

    Salut Lycia,
    De fait, toutes mes fiches produit sont déjà déclinées manuellement selon une couleur spécifique… et je cherche une façon plus efficace de les gérer.
    Je repars en quête de solution 🙂 !
    Merci de ta réponse.

  12. Haga Raza

    Bonjour,
    Je suis artisan pâtissier, et je suis en train de créer un site pour vendre des gâteaux d’anniversaire.
    Comment pourrais-je faire en sorte que lors du passage de la commande, le client puisse indiquer le prénom et l’âge de la personne (pour personnaliser le gâteau).
    J’avais pensé à créer un attribut sur la fiche produit, mais en fait ce n’est pas un champ Texte libre…
    Merci de votre aide.

  13. GAM

    Bonjour Lycia,
    Dans l’onglet Thème Builder – corps personnalisé – Tous les Produits, j’ai voulu personnaliser d’un coup toutes mes fiches-produits.

    Si c’est bon sur certaines fiches :
    https://graphic-international.fr/produit/rollup-classic-en-85×200-cm-100-et-120-avec-visuel/
    (mise à part le texte qui vient se rajouter tout en bas)
    Ce n’est pas bon sur d’autres
    https://graphic-international.fr/produit/rollup-design-85×200/
    Le texte de la description longue est déstructuré.
    Il me signal : Module de contenu ( Post Content) Post manquant (« Publier le contenu »)
    En ajoutant ce module j’ai plein de doublons.
    Impossible d’arranger les choses « manuellement ».
    Comment faut-il procéder pour que tout rentre dans l’ordre ?
    Merci d’avance pour ton aide.
    Belle journée.

  14. Lycia Diaz

    Salut GAM, en fait, je pense que tu as dû écrire du texte en dur directement dans ton modèle de fiche produit créé avec le thème builder. Comme expliqué dans cet article, tu dois créer un template avec seulement le modules WOO. Par exemple Woo Prix, Woo Titre etc. Sans rien saisir comme texte. Si tu mets le module Woo Description + le module publier un contenu alors tu auras des doublons. Ensuite, tu crées tes fiches produits depuis le back office de WordPress, mais tu ne les édites pas avec le Visual Builder. Alors, la mise en forme héritera du modèle créé avec le thème Builder, mais les données sont bien saisies depuis WooCommerce.

  15. Cuesta Christian

    Bonjour Lycia,

    J’ai fait une page produit avec le Thème Builder et cela fonctionne parfaitement. Toutefois, j’ai un besoin particulier. Il faudrait que je propose de télécharger des produits en pdf qui sont gratuits. Je dois le faire sans passer par ajouter au panier. Je ne trouve pas de solution. J’ai bien renseigné le produit comme téléchargeable et j’ai « Ajouter un fichier », mais je ne sais pas récupérer ces données pour télécharger le fichier directement. Existe-t-il une solution? Faut-il utiliser un plugin de gestion de téléchargement pour ces produits?

    Merci pour ton aide, bonne journée.

  16. Annabelle Vauvrecy

    Bonjour Lycia,

    J’avais commencé par copier la première fiche produit que j’avais crée directement dans Woo dans le thème pour ne pas refaire toute la mise en page. Je me suis aperçue en relisant ton article plus les commentaires, qu’il fallait absolument que je rajoute « publier le contenu » mais quand je l’ai fait je me suis retrouvée avec des doublons. Je l’ai enlevé et maintenant c’est ok (???) par contre je ne peux rien modifier directement sur mes fiches produits.

    Autre souci : je ne trouve pas où insérer les informations complémentaires quand je crée la fiche produit avec Woocommerce.

    D’avance MERCI pour tes réponses et bonne journée 🙂

  17. Lycia Diaz

    Salut Annabelle.
    Le module Publier un Contenu fait doublon avec la Woo Description. Donc, c’est soit l’un soit l’autre. Pour modifier tes produits, il faut passer par la fiche produit de WooCommerce, en back-office. Évite d’activer le Visual Builder sur les produits si tu as créé une fiche produit via le Theme Builder.

  18. Cuesta Christian

    Bonjour Lycia,

    Merci pour ta réponse. Je vais essayer, mais je ne suis pas certain du résultat. Je voudrais pouvoir télécharger un produit, que j’ai rendu téléchargeable en sélectionnant l’option, puis en indiquant le nom du fichier et l’URL du fichier. Je n’arrive pas à récupérer cette donnée et la positionner sur un bouton pour faire un lien.
    Merci encore.

  19. Lycia Diaz

    C’est bizarre, les produits téléchargeables sont natif dans WooCommerce. C’est quoi qui marche pas ? Il suffit de télécharger le fichier ou d’attribuer son URL.

  20. Annabelle Vauvrecy

    Merci pour ta réponse Lycia mais je ne trouve toujours pas, via l’éditeur de Woocommerce où insérer les informations complémentaires, qui ensuite se trouvent dans le module Tab avec la description longue et les avis. Je peux juste renseigner les descriptions et les données du produit. Ça m’embête beaucoup parce que je ne peux pas les rajouter avec Divi, je ne peux plus rien modifier avec Divi depuis que mes pages produits sont soumises au thème.
    Tu aurais une idée ?

    D’avance Merci 🙂

  21. Cuesta Christian

    Je ne peux qu’ajouter le produit dans le panier. Je voudrais le télécharger directement, sans utiliser le panier, en bénéficiant des avantages des modules du WooCommerce Builder, mais aucun ne permet le téléchargement. Je ne peux pas utiliser l’aspect dynamique des modules (Titre, prix, description, etc.), mais pas URL.

  22. Cuesta Christian

    Re-bonjour Lycia,
    Je récupère le lien du fichier à télécharger unique dans le mail que reçoit le client. Je voudrais télécharger le fichier en cliquant sur son image ou sur un bouton. J’ai plusieurs produits gratuits qui doivent être téléchargeables. La difficulté est que l’URL est variable en fonction du produit. Si je n’arrive pas à le faire avec WooCommerce, je vais créer une page par produit et faire un lien avec le fichier, ce qui fonctionne.
    Merci encore

  23. Lycia Diaz

    Oui Christian tu dois créer un produit par fichier téléchargeable ou un produit variable avec plusieurs options de téléchargement. Ou bien, tu utilises une extension du genre DDownload qui évite de passer par WooCommerce.

  24. Lycia Diaz

    Salut Annabelle, normalement, l’éditeur de WooCommerce te donne 2 champs pour les descriptions : 1 en haut de la fiche produit et l’autre tout en bas de la fiche produit. As-tu rempli les 2 ?

  25. ASCIONE

    Bonjour Lycia,
    Merci pour toutes ces infos très utiles. J’ai créé mes modèles de fiches produits et mon client souhaite pouvoir imprimer les fiches produits.
    Y a t’il un plugin qui le permet ? et qui permet de choisir les blocs à faire apparaître. (même payant)
    Merci bien de votre aide,
    Delphine

  26. Lycia Diaz

    Bonjour Delphine. Je ne connais pas de tel plugin. Peut-être que ça existe ?

  27. val_01

    Bonjour Lycia,

    J’ai un problème lorsque je crée un modèle pour une catégorie de produit. En effet le visuel sur la catégorie principale ne correspond pas à celui que j’ai crée mais se répercute bien sur les sous catégories. Et quand je construis un modèle pour les sous catégories, les modifications ne sont pas prises en compte… Une idée de ce qui peut poser problème ?

  28. Lycia Diaz

    Salut Val. C’est bizarre. Je vois pas. Tu es sûre que tout est bien paramétré ?

  29. miko

    Salut Lycia,
    Pas mal de choses intéressantes merci.

    Jusqu’à maintenant tout avait l’air de bien fonctionner, je n’avais pas de template particuliers, autre qu’un header et footer.

    Mais il m’arrive un drôle de truc, je ne sais pourquoi mais maintenant quand je crée un nouveau produit (mode basique) et que je bascule sur Divi en cliquant sur « Utiliser le générateur Divi » je me retrouve avec un contenu vide !!

    1. Si je fais un template en amont dans le Theme Builder (avec tous les modules woo nécessaires) ça me dit « Un modèle a été attribué à cet article à l’aide du Générateur de thèmes. Toutefois, le modèle utilisé ne contient pas de module « Publier le contenu»… » donc suis soit redirigé vers le Theme Builder soit je reste sur une page vide…

    2. Si je fais un template en amont dans le Theme Builder avec le module « Publier le contenu» activer divi sur le produite me donne une page vide…

    La seule solution qui fonctionne est de dupliquer un produit, sinon pas de Divi…

  30. Lycia Diaz

    Salut Miko. C’est bizarre. Est-ce que Divi est à jour ? Alors normalement, si tu crée un template avec le Thème Builder et que tu met tous les modules requis, tu n’as pas besoin (et tu ne dois pas) activer le Divi Builder sur ton produit. Il te suffit de saisir toutes les infos de ta fiche produit depuis l’administration de celle-ci. Et tout doit fonctionner. Si tu n’utilises pas le Thème Builder, tu devrais pouvoir activer le Divi Builder sur chaque fiche produit. Du coup, es-tu sûr que dans le thème Builder il n’y aurait pas un template assigné aux produits avec rien dedans ?

  31. Marius Ferraton

    Bonjour,

    Tout d’abord merci pour ce tutoriel. J’ai un petit soucis avec les images et je vois le même sur ton tuto.

    Mon image produit est beaucoup trop grande par rapport à ma description, j’ai donc ajouté ce code dans mon css :

    .woocommerce div.product div.images img {
    width: 50%;
    }

    Maintenant elle est réduite de 50% ce qui est parfait ( https://joliecoccinelle.fr/produit/gillet-grosse-maille-paillettes-beige/ )

    Je voudrais donc centrer mon image mais également rapprocher mes miniatures les unes des autres car elles sont maintenant trop espacé.

    J’ai également vu qu’il était possible de « zoomer » l’image en passant seulement la souris dessus, comment puis je faire cela ? (Un plugins peut être ?)

    Voir à 01:02:15 pour le zoom : https://www.youtube.com/watch?v=nvcsnygvm5s&ab_channel=MAK

    Merci d’avance pour votre réponse en esperant que vous ayez réponse à mes problèmes.

    Marius

  32. Lycia Diaz

    Salut Marius,

    Je viens de regarder et d’inspecter le code. Ta grande image me semble centrée et l’espacement entre tes miniatures n’est pas modifiable car elles sont placées dans des li (liste) et l’espace est dû à la taille des miniatures qui est positionnée à 30%. Donc dans ce cas elles ne peuvent pas se toucher.

  33. Sophie lepinay

    Bonjour,
    Je souhaite acheter DIVI pour un site Ecommerce. Sur les démos, on ne voit pas la possibilité de créer des categories de produits.
    Est il possible de créer des catégories de produits facilement ?
    Merci pour votre aide 🙂

  34. Lucie

    Bonjour,

    J’ai inséré le module publier du contenu dans le thème builder puisque je n’aime pas du tout la présentation de la description longue. Sauf qu’en fait, je ne vois pas comment on peut faire pour afficher la description longue à la place du texte pré-renseigné du module. J’ai sauvegardé comme ça mais rien ne s’affiche dans mes pages produits.
    Comment fait-on ?
    Merci

  35. Lycia Diaz

    Salut Sophie.
    Oui, tout à fait, pour créer des catégories de produit, tu le fais directement dans WooCommerce (Produits > Catégorie de produit). Pour le Design, le Thème Builder de Divi te sera d’une grande aide.

  36. Lycia Diaz

    Salut Lucie, tu as une URL en exemple ?

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