In the past, the WooCommerce store page in Divi wasn't really appealing, admittedly.
Now it's a breeze 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 store 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 Store page
- 5 - Option n°2: Add a shop module in the body of the page
- 6 - Final appearance of the WooCommerce store page
- 7 - Continue to customize the shop page
Announcement: 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 store page look like without customization?
Here is a screenshot of a WooCommerce store page that has not yet been customized using the Divi Theme Builder.
The Divi theme itself has not been customized either.
The 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 so ... How to say? Ugly!
In short, we're going to remedy all this without further delay!
2 - Create a "shop" theme template
Everything will happen from the tab Divi > Theme Builder tab available in your back office.
Here, it's very simple, just click on "+ Add New Template".
A window will open and ask you to choose which type of template you want to create: check "Shop".
A new theme template has 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, don't worry, you can take care of it later. It is even optional.
In the screenshot above, the appearance of the shop page has already evolved from the screenshot in Chapter 1 of this article.
This is normal since my Global Header and Global Foot er 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 is framed in pink.
And it is precisely this Custom Body that will allow us to customize the appearance of our shop.
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 Divi > Theme Builder tab and add a Custom Body to your Store" theme template.
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 Store page
Of course, you can insert all the modules you want: text 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.
Divi's Blog module allows you todisplay your store's products under certain conditions...
From the "Content" tab of the Blog module, you can define the type of content to display (Post Type). Choose "Products".
You can then set up this module in the same way as you did when you used it to display your blog posts.
You can choose the number of products to display, the categories, the date, the image, etc.
From the Style tab, you can change the appearance of the blog module:
- Display it according to a "grid",
- Add a color and an overlay icon,
- Add a shadow or an animation,
- Round off the corners,
- 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 good one if the Blog module could display the prices of each product right from the shop page.
Unfortunately, this is not the case: depending on the project, it could be, but in most cases, shops display product prices before you even visit the listing.
So, if this module does not suit you, it would be more appropriate to insert a Shop module within the Custom Body of your template.
Thus, you will be able to customize all the options that this module offers:
- Font size
- Size, font and color of the price
- Type of product to be displayed
- Sales badge
- And so on.
Note: you can create any type of template with the theme builder! Discover also how to create a stylized article template.
6 - Final appearance of the WooCommerce store page
Once you have finished setting up the Shop module (or Blog module) within your theme template (shop template), you will be able to see the new look of your Shop page.
For that, it will be necessary obviously that products are available, if not, you will not see anything...
On the screenshot above, you can see that the entire shop page has been customized: the header, the body and the footer.
Getting started with Divi, discover all the articles to start with peace of mind!
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, now nothing is impossible!
Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!