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?
- 2 - Create a store theme template
- 3 – Add a Custom Body
- 4 - Option 1: Add a Blog Module in the body of the Boutique page
- 5 – Option n°2 : Add a Boutique module in the body of the page
- 6 - Final appearance of the WooCommerce shop page
- 7 - Continue to customize the shop page
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.
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.
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.
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)).
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.
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?
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.
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.
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.
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...
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!
102 Comments