Divi Tips 75

Customize the WooCommerce Store Page with the Divi Theme Builder

Updated on 10/01/20

1060 words

4 minutes of reading

This article contains affiliate links recognizable by the percentage icon (%) → I am an affiliate link

In the past, WooCommerce shop page Under Divi was not really attractive, we must recognize it.

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

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

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

Here is a screenshot of a WooCommerce shop page which has not yet been customised with the help of the Divi Builder Theme.

classic shop page
Appearance of the shop page without customization

The Divi theme itself was not customised either.

So you see a page shop « basic », the one available when you install WooTrade on WordPress and Divi.

Site header is classic, the custom logo has not been added, but above all, the body of the page is not attractive and presents this sidebar if ... How can I say that? Bad!

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

2 - Create a store theme template

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

Here, it's simple, just click on « + Add a new model » (Add New Template).

A window will open and offers you to choose which type of model you want to create: check Shop.

Create a "shop" theme template
Add a new "shop" theme template

A new theme template (new model) has been created. If you have already defined a Global Header (Global header) and one Global Footer (Pied de Page global), these will appear in green.

If no, no worries, you can take care of it later. This is even optional.

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

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

This is normal since my Global Header and my Global Footer were 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 is framed in pink.

And that's exactly what Personalized body (Custom Body) which will allow us to Customize the appearance of our shop.

Do you know you can test Divi for free? See you on 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 Personalized body (Custom Body) to your « Shop » theme template.

Click "Add a new model" (Add Custom Body)).

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

Choose "Add a Custom Body" in the pop-up window.

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

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

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

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

insert a blog module in its shop page
Insert a blog module within the custom body of the shop page

The Divi Blog module allows toshow the products of your shop Under certain conditions...

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

define the "post type" of the Blog Module
Set Blog Post Type Module: Choose "Products"

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

Then you can setting this module in the same way as you did when you used to show your blog articles.

Improve the appearance of the Blog Module
Improve the appearance of the Blog Module from the Content and Style tab: choose "grid"

You can choose the number of products to display, the categories, the date, the image, etc.

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

  • L "grid",
  • Add a color and an overlay icon,
  • Add a shadow or animation,
  • Rounding the angles,
  • Add border,
  • etc.
save theme template
Remember to save theme template

Before leaving the Custom Body editor, remember to save your changes.

5 – Option n°2 : Add a Boutique module in the body of the page

The previous solution would be a suitable solution if Blog module permitted 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 display the prices of the products before even visiting the sheet.

So if this module doesn't suit you, it would be more appropriate to insert a Boutique module within the Personalized body Your model.

Boutique Divi Module

Thus, you can customize all the options that this module offers:

  • Font size
  • Size, font and price color
  • Type of product to display
  • Sales badge
  • Etc.

Note: you can create all types of template with the Builder theme! Also discover how create a stylized article template.

6 - Final appearance of the WooCommerce shop page

Once you have finished setting the Boutique module (or Blog module) within your theme template (shop model), you can discover the new appearance of your Boutique page.

This will obviously require products to be available, otherwise you won't see anything...

Appearance of the customised shop page
Appearance of the customised shop page

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

To start with Divi, discover all the articles to start calmly!

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.

Anyway, now nothing is impossible!

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

personalized shop page with Divi
customize the shop page with Divi

Get Divi

Divi training

Ebook Divi PDF

Free tips

Divi Quiz

Live coaching

icon 256x256
Discover my wpLingua plugin, which makes your websites multilingual in just a few clicks! SEO-Friendly / Automatic / Editable


  1. Jean-Luc Robert
  2. Lycia Diaz
  3. LC
  4. Lycia Diaz
  5. LC
  6. Yoann
  7. LC
  8. Lycia Diaz
  9. Lycia Diaz
  10. Yoann
  11. Lycia Diaz
  12. Lycia Diaz
  13. LC
  14. Lycia Diaz
  15. LC
  16. LC
  17. Lycia Diaz
  18. LC
  19. LC
  20. LC
  21. Lycia Diaz
  22. Lycia Diaz
  23. LC
  24. Lycia Diaz
  25. guillaume
  26. Lycia Diaz
  27. guillaume
  28. Lycia Diaz
  29. Lucie
  30. Lycia Diaz
  31. salomé
  32. Lycia Diaz
  33. HugoGlitch
  34. HugoGlitch
  35. Lycia Diaz
  36. cyril
  37. Lycia Diaz
  38. David
  39. Lycia Diaz
  40. Lycia Diaz
  41. Milea
  42. Bruno Soulé
  43. Lycia Diaz
  44. Bruno Soulé
  45. Lycia Diaz
  46. Bruno Soulé
  47. Lycia Diaz
  48. stephane
  49. Lycia Diaz
  50. Paco
  51. Lycia Diaz
  52. Milea
  53. Lycia Diaz
  54. Milea
  55. Marie
  56. Lycia Diaz
  57. Lycia Diaz
  58. Milea
  59. Lycia Diaz
  60. Hubert
  61. Lycia Diaz
  62. Hubert
  63. AlzaTek
  64. Lycia Diaz
  65. AlzaTek
  66. Lycia Diaz
  67. LioC
  68. Lycia Diaz
  69. LC
  70. Lycia Diaz
  71. LC
  72. Lycia Diaz
  73. Mils
  74. Marius Ferraton
  75. Marius Ferraton
  76. Lycia Diaz
  77. Lycia Diaz
  78. Steve
  79. Lycia Diaz
  80. Steve
  81. Lycia Diaz
  82. Bica Sylvain
  83. Lycia Diaz
  84. Clémence
  85. Lycia Diaz
  86. julien
  87. Lycia Diaz
  88. julien
  89. Lycia Diaz
  90. Caro
  91. Lycia Diaz
  92. Cyril
  93. Lycia Diaz
  94. Cyril
  95. Lycia Diaz
  96. david
  97. Lycia Diaz
  98. Lou
  99. Lycia Diaz
  100. Lycia Diaz
  101. Lou
  102. Marie-Sandra

Submit a comment

Your email address will not be published. Required fields are indicated with *

This site uses Akismet to reduce undesirables. Learn more about how your feedback data is used.