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!
- 1 - What does the WooCommerce/Divi shop page look like without customization?
- 2 - Create a "shop" theme template
- 3 - Add a Custom Body
- 4 - Option 1: Add a Blog Module in the body of the Shop page
- 5 - Option n°2 : Add a shop module in the body of the page
- 6 - Final appearance of the WooCommerce shop page
- 7 - Continue to customize the shop page
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.
The Divi theme itself has not been customized either.
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".
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.
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".
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.
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?
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.
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,
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.
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
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...
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!