Personalizar la página de la tienda de WooCommerce con Divi Theme Builder

Actualizado 10/01/2020 | Publicado 31/10/2019 | 95 comentarios

En el pasado, la página de la tienda WooCommerce en Divi no era realmente atractiva, hay que reconocerlo.

Ahora es muy fácil personalizar esta página para hacerla más sexy y atractiva.

Esto es lo que veremos en este nuevo tutorial que se hace en sólo 3 pasos!

Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Qué aspecto tiene la página de la tienda WooCommerce/Divi sin personalizar?

Aquí hay una captura de pantalla de una página de la tienda de WooCommerce que aún no ha sido personalizada usando el Constructor de temas Divi.

page boutique classique
Aspecto de la página de la tienda sin personalizar

El tema Divi en sí tampoco ha sido personalizado.

Por lo que se ve una página de tienda "básica", la que está disponible cuando se instala WooCommerce en WordPress y Divi.

La cabecera del sitio es clásico, no se ha añadido el logotipo personalizado, pero sobre todo, el cuerpo de la página no es atractivo y presenta esta barra lateral tan... ¿Cómo decirlo? ¡Feo!

En definitiva, ¡vamos a poner remedio a todo esto sin más dilación!

2 - Crear una plantilla de tema "tienda"

Todo ocurrirá a partir de la ficha Divi > Constructor de temas disponible en su back office.

Aquí es muy sencillo, sólo hay que hacer clic en "+ Añadir nueva plantilla".

Se abrirá una ventana que le pedirá que elija el tipo de plantilla que desea crear: marque "Tienda".

Créer une template de thème "boutique"
Añadir una nueva plantilla de tema "tienda".

Se ha creado una nueva plantilla temática. Si ya ha definido un "Cabecera global (cabecera global) y un "Pie de página global (Pie de página global), estos aparecerán en verde.

Si no, no te preocupes, puedes ocuparte de ello más adelante. Incluso es opcional.

page boutique header + footer custom
Aspecto de la página de la tienda con una cabecera y un pie de página personalizados gracias a la "cabecera global" y el "pie de página global". El cuerpo de la página aún no está personalizado.

En la captura de pantalla anterior, el aspecto de la página de la tienda ya ha evolucionado con respecto a la captura de pantalla del capítulo 1 de este artículo.

Esto es normal ya que mi Encabezado Global y Pie de Página Global habían sido definidos.

En esta imagen, el "Cabecera global está enmarcado en verde, el "Pie de página global se enmarca en color púrpura y el cuerpo de la página o "Cuerpo a medida está enmarcado en rosa.

Y es precisamente esta carrocería personalizada la que nos permitirá personalizar el aspecto de nuestra tienda.

¿Sabías que puedes probar Divi gratis? Ir a esta página y haz clic en "PRUEBA GRATUITA

3 - Añadir un cuerpo personalizado

A continuación, vuelva a la Divi > Constructor de temas y añada un cuerpo personalizado a su Plantilla del tema "Tienda.

Haga clic en "Añadir cuerpo personalizado".

Ajouter un "custom body"
Añadir un cuerpo personalizado a la plantilla del tema

Elija "Construir cuerpo personalizado" en la ventana emergente.

El editor visual se abrirá y podrás empezar a añadir Módulos Divi para construir el cuerpo de esta página de la tienda.

4 - Opción 1: Añadir un módulo de blog en el cuerpo de la página de la tienda

Por supuesto, puede insertar todos los módulos que desee: módulos de texto, de imagen, etc. módulos de código etc.

Pero una de las soluciones, si quieres que tu página muestre los productos de tu tienda, es insertar un módulo Blog.

insérer un module de blog dans sa page boutique
Insertar un módulo de blog en el cuerpo personalizado de la página de la tienda

El módulo Blog de Divi le permitemostrar los productos de su tienda bajo ciertas condiciones...

Una lectura obligada: ¿Cómo crear un listado de productos WooCommerce personalizado con Divi?

définir le "post type" du Blog Module
Defina el tipo de entrada del módulo de blog: elija "Productos

Desde la pestaña "Contenido" del módulo Blog, puede definir el tipo de contenido a mostrar (Post Type). Elija "Productos".

A continuación, puede configurar este módulo de la misma manera que lo hizo cuando lo utilizó para mostrar las entradas de su blog.

Améliorer l'apparence du Blog Module
Mejore la apariencia del Módulo Blog desde la pestaña Contenido y Estilo: elija "cuadrícula".

Puede elegir el número de productos a mostrar, las categorías, la fecha, la imagen, etc.

Desde la pestaña Estilo, puedes cambiar la apariencia del módulo del blog:

  • Visualícelo según una "cuadrícula",
  • Añade un color y un icono de superposición,
  • Añade una sombra o una animación,
  • Redondea las esquinas,
  • Añade un borde,
  • etc.
sauvegarder la template de thème
No olvides guardar la plantilla del tema

Antes de salir del editor de carrocerías personalizadas, no olvides guardar los cambios.

5 - Opción n°2: Añadir un módulo de tienda en el cuerpo de la página

La solución anterior sería buena si el módulo Blog pudiera mostrar los precios de cada producto directamente desde la página de la tienda.

Desgraciadamente, no es así: dependiendo del proyecto, podría serlo, pero en la mayoría de los casos, las tiendas muestran los precios de los productos incluso antes de que usted visite el listado.

Por lo tanto, si este módulo no le conviene, sería más apropiado insertar un módulo de tienda dentro del cuerpo personalizado de su plantilla.

Module Boutique Divi

Así, podrá personalizar todas las opciones que ofrece este módulo:

  • Tamaño de letra
  • Tamaño, tipo de letra y color del precio
  • Tipo de producto a exponer
  • Insignia de ventas
  • Y así sucesivamente.

Nota: ¡puedes crear cualquier tipo de plantilla con el constructor de temas! Descubra también cómo crear una plantilla de artículo estilizada.

6 - Aspecto final de la página de la tienda WooCommerce

Una vez que haya terminado de configurar el módulo de la tienda (o el módulo del blog) dentro de su plantilla de tema (plantilla de la tienda), podrá ver el nuevo aspecto de su página de la tienda.

Para ello, será necesario obviamente que los productos estén disponibles, si no, no se verá nada...

Apparence de la page boutique customisée
Aspecto personalizado de la página de la tienda

En la captura de pantalla anterior, puede ver que toda la página de la tienda ha sido personalizada: la cabecera, el cuerpo y el pie de página.

Empezando con Divi, descubra todos los artículos para empezar con tranquilidad!

7 - Continuar con la personalización de la página de la tienda

Como he sugerido anteriormente en este artículo, la página de su tienda puede dar cabida a algo más que mostrar sus productos.

Siéntase libre de añadir otros módulos dentro de esta página cuando construya su cuerpo personalizado.

Esto puede ser una oportunidad para añadir una llamada a la acción, imágenes, texto, vídeo, formulario, etc.

En resumen, ¡ahora nada es imposible!

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales.

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

1.034 palabras

4

A ti también te debería gustar:

95 Commentaires

  1. Jean-Luc Robert

    Hello
    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

    Lycia

  5. LC

    Bonjour
    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
    https://editionslalchimiste.com/wp-content/uploads/2019/11/basic-shop-woocommerce-images-not-cropped.jpg
    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 https://editionslalchimiste.com/wp-content/uploads/2019/11/shop-with-DIVI-theme-builder-images-cropped.jpg
    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.
    https://editionslalchimiste.com/essai-classement-boutique/
    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

    Lycia,
    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…
    Merci

  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

    Bonjour,

    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 .
    Merci

  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 : https://astucesdivi.com/divi-theme-builder/ et notamment le chapitre 2.

  29. Lucie

    Bonjour,
    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 : https://wpgridbuilder.com/

  31. salomé

    Bonjour,
    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 : https://millanova.com/collection/milla-lorenzo-rossi-paris/

    Auriez-vous une idée .
    Merci

  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

    Bonjour,

    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

    David

  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

    Bonjour
    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
    Cdlt

  42. Bruno Soulé

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

  43. Lycia Diaz

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

  44. Bruno Soulé

    Bonjour
    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
    Cdlt

  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,
    Merci

  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
    https://www.milea-fantasy.com
    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

    Bonsoir,

    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!

    Marie

  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

    Bonjour
    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

  72. Mils

    Merci pour cet article dans lequel je n’ai pas trouvé ce que je cherchais…. a savoir un vrai moyen de customiser cette page shop.
    Genre en dessous de chaque produit, ajouter le bouton d’ajout au panier… etc … une vrai customisation de la page shop quoi.

  73. Marius Ferraton

    Bonjour,

    Je réalise actuellement un site sur WordPress avec le thème DIVI + Woocommerce (https://joliecoccinelle.fr/).

    Le catalogue produit affiche mes images correctement. Tandis que lorsque je vais sur mon produit l’image qui s’affiche est très grande et pixellisé. J’ai essayé de modifier la taille dans Apparence -> Personnalisé -> WooCommerce. Mais j’ai toujours le même problème, je fais le tour des forums et je ne trouve pas une réponse correspondant à mon soucis. Si vous pouvez m’aider s’il vous plait ça serait super.

    Merci par avance,

    Marius Ferraton

  74. Marius Ferraton

    Bonjour,

    Je réalise actuellement un site sur WordPress avec le thème DIVI + Woocommerce (joliecoccinelle.fr).

    Le catalogue produit affiche mes images correctement. Tandis que lorsque je vais sur mon produit l’image qui s’affiche est très grande et pixellisé. J’ai essayé de modifier la taille dans Apparence -> Personnalisé -> WooCommerce. Si vous pouvez m’aider s’il vous plait ça serait super.

    Merci par avance,

    Marius Ferraton

  75. Lycia Diaz

    Salut Marius,
    Alors, il faudrait que tu vérifies quelle taille d’image tu importes dans tes produits. Peut-être qu’il faudrait télécharger des images de meilleures qualité.
    Ensuite, si tu as modifié la taille des images dans WooCommerce, il faudrait que tu essayes de réimporter une image pour voir si le problème y est toujours. En fait quand tu modifies une taille d’image, il faudrait « régénérer les miniatures » à l’aide d’un plugin ou bien réimporter simplement les images afin qu’elles prennent la nouvelle taille que tu as défini dans les paramètres.
    Sinon, il faudrait aller encore plus loin en modifiant la taille des images de Divi grâce à ce tuto mais attention à ne pas faire des bêtises : https://astucesdivi.com/taille-images-de-divi/
    Voilà, j’espère que ça va t’aider.

  76. Steve

    Bonjour Lycia,

    Merci pour ce tuto d’une grande aide.
    Cependant, une fois que je suis sur ma page boutique que j’ai customisé via Divi theme builder, le menu principal en Header n’est plus apparent. Connais-tu la technique pour le faire apparaitre ?

    NB: j’ai tenté d’insérer un nouveau module Menu mais c’est simplement un module et ça n’a pas l’apparence de mon véritable menu header.

    https://www.wear-myclothes.com/

  77. Lycia Diaz

    Salut Steve. Tu dois soit utiliser un header dans la template boutique soit au contraire le supprimer. Tout dépend si tu utilises un global Header ou non.

  78. Steve

    Hello Lycia,

    Merci pour ton retour. J’utilise en effet un Header dans mon template boutique, il s’agit en l’occurence d’une image en pleine largeur qui « surplombe » mon catalogue.
    J’ai remarqué qu’en supprimant ce Header personnalisé, mon menu principal réapparaissait. Il n’y a donc pas moyen de conserver mon Menu principal + mon image pleine largeur en guise de Header personnalisé ?

    Merci à toi,

    Steve

  79. Lycia Diaz

    Dans le cas où tu veux utiliser un header personnalisé avec ton image, il ne faut pas oublier d’y placer le module Menu 😉

  80. Bica Sylvain

    Bonjour,
    J’ai développé le site https://16h24.fr avec Divi
    J’ai créé des lots groupés (https://16h24.fr/duos/) avec une remise calculée en % par rapport au prix régulier.
    Depuis, sur la page en question, j’ai une mention « Promo ! » qui apparaît.
    Comment peut-on la supprimer ?
    Merci d’avance,
    Sylvain

  81. Lycia Diaz

    En CSS ce doit être facile, si tu connais pas, partage ton URL et je regarderai

  82. Clémence

    Bonsoir Lycia 🙂
    tout d’abord merci beaucoup pour tous vos articles qui m’aident énormément dans la construction de mon site !
    J’aurai tout de même une petite question :
    j’essaye de créer une boutique en ligne, et j’aimerai une grille de produits, avec au dessus le nom des catégories (tirages d’art, cartes postales etc..) J’ai l’impression que c’est impossible 🙁
    J’ai bien créé mes fiches produits en y intégrant une catégorie que j’ai crée préalablement..
    J’ai cru voir dans une réponse au dessus que vous conseilliez de créer simplement un module de plusieurs colonnes avec à chaque fois le nom de la catégorie qui servira de lien vers une nouvelle page ? c’est bien ça ?
    Si j’ai bien compris, il faut que je crée autant de pages boutique que j’ai de catégories ? (je ne suis pas certaine d’avoir bien compris)
    Je vous remercie d’avance, et encore une fois, je vous félicite pour tout votre travail 😀

  83. Lycia Diaz

    Merci Clémence, en fait, tu pourrais simplement utiliser le Thème Builder pour personnaliser chaque page de catégorie de produit. Je pense que ça doit correspondre à tes besoins ?

  84. julien

    Perso je cherche toujours comment faire pour n’afficher que les catégories (et sous catégories) avec le module boutique… De ce que je vois ce module ne sait qu’afficher les produits d’une ou plusieurs catégories.

    Pour être clair, ma boutique est configuré dans le « personnaliseur de thème » pour n’afficher que les catégories, et dans chaque catégorie les sous catégories. Ca fonctionne très bien de base, mais impossible de personnaliser l’affichage qui est au mieux simpliste. Si je suis la méthode ci-dessus même en essayant différentes options du theme-builder, il n’est possible que de sortir les produits, par catégorie si ça vous amuse, mais que les produits et pas les catégories…

    Une idée ?

  85. Lycia Diaz

    Salut Julien, je sais pas si j’ai bien tout compris : tu veux afficher seulement les catégories et non les produits qui s’y trouvent dedans ? Dans ce cas, pourquoi s’utilises-tu pas des boutons, tout simplement ?

  86. julien

    Bonjour Lycia,

    Principalement parce que les catégories sont amenées à évoluer et qu’un affichage dynamique éviterait d’ajouter ou supprimer un bouton à chaque modification de celles-ci.

    J’ai plus où moins trouvé une solution en utilisant le widget « catégorie de produit » intégré dans une « zone de widget » perso elle même appelée dans le module divi « Barre latérale » que j’affiche du coup dans le corps de ma page à l’aide du theme builder.

    Ce n’est pas tout à fait ce que je voulais puisque visuellement j’ai le choix entre une liste déroulante ou une liste hiérarchisée de liens, mais j’ai quand même de quoi naviguer directement dans mes catégories tout en gardant l’affichage en pleine page. Avec un peu de css, je devrais pouvoir faire quelque chose de correcte visuellement sans aller bidouiller mon thème en php.

    Merci pour ton blog en tout cas, ça m’évite de perdre trop de temps dans les méandres des menus divi, de sa logique discutable et de ses traductions approximatives assez régulièrement 😀

  87. Lycia Diaz

    Merci pour ton retour Julien

  88. Caro

    Bonjour Lycia,
    Merci pour cet article (et tous les autres :).
    Je me demandais si avec la fonction « hover », on pouvait remplacer l’icone de superposition par une autre image, afin de faire apparaitre le recto puis le verso d’un produit par exemple avant d’ouvrir la fiche produit complète.
    Auriez-vous une DIVI-astuce à partager sur le sujet s’il vous plait? d’avance merci pour votre retour.

  89. Lycia Diaz

    Salut Caro, nativement ce n’est pas possible je pense. Après il existe des plugins qui gèrent cela, la fonctionnalité s’appelle FlipBox, comme celle proposée par Divi Suprême : https://divisupreme.com/features/flipbox-module/

  90. Cyril

    Bonjour Lydia,
    Tout d’abord bravo et merci pour tes tutos très précis et efficaces.
    Voici mon soucis : j’ai customisé dans le theme builder une page boutique, mais lorsque je la fait apparaitre sur une page en ajoutant le module boutique, ma page boutique customisée précédemment n’apparait pas.
    Je dois louper quelque chose…
    Merci pour ton retour si tu as le temps de me répondre.

  91. Lycia Diaz

    Salut Cyril, c’est normal tu ne peux pas afficher une page dans une page. Tu as la page boutique, ça c’est ok… et puis tu as le Module Boutique que tu peux afficher dans n’importe quelle page… voilà

  92. Cyril

    Bonjour Lydia, ok je crois comprendre mais quand j’ouvre ma page boutique en allant sur « visiter la boutique » en haut à gauche j’ai une erreur 404…

  93. Lycia Diaz

    C’est bizarre, il faut trouver d’où ça vient.

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

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

Pínchalo en Pinterest

Acciones
Comparte esto