Autrefois, la page boutique WooCommerce sous Divi n’était pas vraiment séduisante, il faut le reconnaitre.

À présent, c’est un jeu d’enfant de customiser cette page pour la rendre sexy et attrayante !

C’est ce que nous allons voir dans ce nouveau tutoriel qui se réalise en 3 étapes seulement !

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 – À quoi ressemble la page boutique WooCommerce/Divi sans customisation ?

Voici une capture d’écran d’une page boutique WooCommerce qui n’a pas encore été customisée à l’aide du Thème Builder de Divi.

page boutique classique
Apparence de la page boutique sans customisation

Le thème Divi lui-même n’a pas été customisé non plus.

Vous voyez donc une page boutique « basique », celle disponible lorsque vous installez WooCommerce sur WordPress et Divi.

L’en-tête du site est classique, le logo personnalisé n’a pas été ajouté, mais surtout, le corps de la page n’est pas attrayant et présente cette sidebar si … Comment dire ? Vilaine !

Bref, on va remédier à tout cela sans plus tarder !

2 – Créer une template de thème « boutique »

Tout va se passer depuis l’onglet Divi > Theme Builder disponible dans votre back-office.

Ici, c’est tout simple, il vous suffit de cliquer sur « + Add New Template ».

Une fenêtre va s’ouvrir et vous propose de choisir quel type de modèle vous souhaitez créer : cochez « Boutique ».

Créer une template de thème "boutique"
Ajouter une nouvelle template de thème « boutique »

Une nouvelle template de thème vient d’être créée. Si vous avez déjà défini un « Global Header » et un « Global Footer », ceux-ci apparaitront en vert.

Si non, pas de soucis, vous pourrez vous en occuper plus tard. Cela est même facultatif.

page boutique header + footer custom
Apparence de la page boutique avec un header et un footer customisé grâce au « global header » et au « global footer ». Le corps de la page n’est pas encore customisé.

Sur la capture d’écran ci-dessus, l’apparence de la page boutique a déjà évolué par rapport à la capture d’écran du chapitre 1 de cet article.

C’est normal puisque mon « Global Header » et mon « Global Footer » avaient été définis.

Sur cette image, le « Global Header » est encadré en vert, le « Global Footer » est encadré en violet et le corps de la page ou « Custom Body » est encadré en rose.

Et c’est justement ce Custom Body qui va nous permettre de personnaliser l’apparence de notre boutique.

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

3 – Ajouter un Custom Body

Retournez alors dans l’onglet Divi > Theme Builder et ajoutez un Custom Body à votre template de thème « Boutique ».

Cliquez sur « Add Custom Body ».

Ajouter un "custom body"
Ajouter un « custom body » à la template de thème

Choisissez « Build Custom Body » dans la fenêtre surgissante.

L’éditeur visuel va s’ouvrir et vous pourrez commencer à ajouter des modules Divi pour construire le corps de cette page boutique.

4 – Ajouter un Blog Module dans le Custom Body de la page Boutique

Bien évidemment, vous pouvez insérer tous les modules que vous souhaitez : des modules texte, des modules image, des modules code etc.

Mais le plus important, si vous voulez que votre page affiche les produits de votre boutique, est d’insérer un module Blog.

insérer un module de blog dans sa page boutique
Insérer un module de blog au sein du « custom body » de la page boutique

C’est le module Blog de Divi qui va afficher les produits de votre boutique selon certaines conditions…

À lire absolument : comment créer une fiche produit WooCommerce personnalisée avec Divi ?

définir le "post type" du Blog Module
Définir le Post Type du Blog Module : choisir « Produits »

Depuis l’onglet « Contenu » du module Blog, vous pourrez définir le type de contenu à afficher (Post Type). Choisissez « Produits ».

Vous pourrez ensuite paramétrer ce module de la même manière que vous le faisiez lorsque vous l’utilisiez pour afficher vos articles de blog.

Améliorer l'apparence du Blog Module
Améliorer l’apparence du Blog Module depuis l’onglet Contenu et Style : choisir « grille »

Vous pourrez choisir le nombre de produits à afficher, les catégories, la date, l’image, etc.

Depuis l’onglet Style, vous pourrez modifier l’apparence du module blog :

  • L’afficher selon une « grille »,
  • Ajouter une couleur et une icône de superposition,
  • Ajouter une ombre ou une animation,
  • Arrondir les angles,
  • Ajouter une bordure,
  • etc.
sauvegarder la template de thème
N’oubliez pas de sauvegarder la template de thème

Avant de quitter l’éditeur du Custom Body, n’oubliez pas de sauvegarder vos modifications.

5 – Apparence finale de la page boutique WooCommerce

Une fois que vous avez fini de paramétrer le module Blog au sein de votre template de thème, vous pourrez découvrir la nouvelle apparence de votre page Boutique.

Pour cela, il faudra bien évidemment que des produits soient disponibles, sinon, vous ne verrez rien…

Apparence de la page boutique customisée
Apparence de la page boutique customisée

Sur la capture d’écran ci-dessus, vous pouvez voir que la page boutique entière a été customisée : le header, le corps de la page ainsi que le footer.

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

6 – Continuer à customiser la page boutique

Comme je vous l’ai suggéré plus tôt dans cet article, votre page boutique peut accueillir plus que le simple affichage de vos produits.

N’hésitez pas à rajouter d’autres modules au sein de cette page lors de la construction de votre Custom Body.

Cela peut être l’occasion d’ajouter un appel-à-l’action, des images, du texte, une vidéo, un formulaire, etc.

Bref, à présent, plus rien n’est impossible !

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos !

page boutique personnalisée avec Divi
customiser la page boutique avec Divi

Pin It on Pinterest

Shares
Share This