Thanks to these two features you will be able to create theme templates and assign them to page templates on your site.
So, in a few clicks, you will change the appearance of your product sheets, whether you have 1 or 1000!!!!
In this article, I'm not going to explain to you how to create an online store with WooCommercemy ebook-training "WooCommerce: the Guide". is here for that. I recommend it if you want to add a shop to your showcase site and you don't know how to do it...
So in this article, we will focus on the product sheet itself and see what possibilities Divi offers.
- 1 - Can we act on an existing WooCommerce store?
- 2 - Create a WooCommerce product sheet
- 3 - The Divi modules used within a product sheet
- 4 - Create a template for all your product sheets
- 5 - Create a model based on product categories
- 6 - Other options are available
Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.
1 - Can we act on an existing WooCommerce store?
If you set up an online store on a site WordPress using Divi 4.0 today, the question does not arise....
On the other hand, if you already have a store with dozens or hundreds of products, I understand that you are reluctant to consider update Divi.
Don't worry, you can easily update Divi and start enjoying its new features.
And this is what we will see in the rest of this article....
2 - Create a WooCommerce product sheet
If you have just installed and configured WooCommerceyou can create your first product by going to the "Products" tab. All you have to do is click on "Create a Product".
If you already have a WooCommerce store, this tab will list all your existing products...
2.1 - Product sheet with the default WordPress editor
This is what your product sheet looks like in the back office:
In this editor (classic/default WordPress editor), you will need to fill in all the information for your product:
- Enter the title of your product.
- Write a so-called "long" description.
- Fill in all the fields necessary for the sale: price, product type, stock, taxes, etc.
- Write a so-called "short" description.
- Add the main product image.
- Add more images to create the product image gallery (optional).
- Assign a category to your product.
- Choose the page template: with or without sidebar. This action becomes optional because we will build the design of this sheet using the Builder Theme.
- Publish your product.
At this point, here is what your front-end product sheet looks like:
This site is "blank", it has not been customized and the design presented is the basic one of Divi.
It's not very glamorous, is it?
2.2 - Product sheet with the Divi Builder
Still from the back office, if you click on the purple button "Use the Divi generator"here is what appears:
We then discover the former Divi Builder, the one who was available in the back office…
By using the "drag & drop" (drag and drop), you can easily reorganize the structure of your WooCommerce product sheet.
You can also open the settings of each module in order to customize them...
Note: for now, the changes you make in this product sheet will only appear within it. If you use this method, you will then have to repeat the design for each of your product sheets. This would be counterproductive....
2.3 - Product sheet with the Visual Builder
If you click on the button "Building on the front-end"you will be able to edit your product sheet in visual mode.
It's still better, isn't it?
But this is not enough to assign this design to all your product sheets. With this method, again, you will always have to repeat the design for each product....
Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"
3 - The Divi modules used within a product sheet
A basic product sheet is composed of various "mandatory" - or rather necessary - elements such as the price or the add to basket button for example. Other elements may become optional if you decide to do so...
In fact, as you can see from this capture, most of the WooCommerce Builder modules are used within a product sheet. In this one, we find:
- Woo Breadcrumb
- Woo Cart Notice Notice
- Woo Images
- Woo Title
- Woo Rating
- Woo Price
- Woo Description
- Woo Add To Cart
- Woo Meta
- Woo Tabs
- Woo Upsell
- Woo Related Product
Other modules exist but do not appear here because this sheet does not require it. This is often the case for dematerialized products (no stock) or for products that do not yet have an opinion (Woo Reviews) for example:
- Woo Stock
- Woo Reviews
- Woo Additional Info
- Woo Gallery
So if you are building the layout of your product sheet from scratch, be careful not to delete some important modules.
4 - Create a template for all your product sheets
This is a feature that will delight most owners of a WooCommerce site with Divi: the ability to create a template applicable to all (or not) of the store's products (those already published and those to come).
The idea is not to build the design, product by product, as seen in the previous chapters, but to build it once and for all and save it as a "model".
To do this, you just need to create a theme template from the Theme Builder tab.
By clicking on the icon " + " Add New Templateyou will just have to assign it to the option "All Products".
This theme template will act by default on all the product sheets of your shop.
In absolute terms, the addition of a Global Header and a Global Footer is optional. What really interests us here is to add a "Custom Body" and configure it only once, so that it applies to all product sheets.
When you edit this Custom Body, you will be in the Visual Builder environment and you can add sections, lines and modules, as you would when building a page layout.
But there are several things to know:
4.1 - Using WooCommerce modules to build the model
You build your product sheet so you can use the WooCommerce modules provided by Divi....
- Insert a Woo module....
- In the case of the Woo Price module, a "fictitious" price appears.
- Choose "This Product": important!
- Change the style: color, text size, shadow, animation etc.
- Add advanced settings if necessary.
When you insert the Woo modules, choose "This Product".
"This Product" allows you to call up the information of the displayed product. So no matter what product sheet you are on, the price will vary according to the information entered when it was created (chapter 2.1 of this article).
4.2 - Using dynamic content
In a product master record, you can also add other Divi modules Text, image, etc.
Moreover, some modules become interesting if you use them to display "dynamic content".
- Add a Text module
- Click on the "Use dynamic content" icon
- Select the dynamic content you want to display. In the screenshot, this is the "Post Categories".
- This will display the categories assigned to each product.
4.3 - The role of the Post Content module in the product sheet
As you can see, most WooCommerce modules are essential. But what is the purpose of the Post Content modulethat has appeared since version 4.0 of Divi?
If you insert it, your product sheet will display the "long description" (tablet n°2 of chapter 2.1 of this article).
This long description uses a classic text editor in which you can add text and images.
5 - Create a model based on product categories
In the previous chapter, the design of all the product sheets in the shop was configured.
However, you are not required to use the same design for all your products. You could create several models (still from the Theme Builder) and assign them to certain product types.
You can create layouts based on product categories, for example.
In the above capture, one design was assigned to the category named "Traditional Cooking" and another to the category "Light Cooking".
The choice of template assignment is made when creating it, but you can change this using the template settings (gearwheel icon).
In this case, products classified in category "A" will look different from those classified in category "B".
6 - Other options are available
When creating theme templates for your product sheet, you have various options: not only "All Products" and "Products in Specific Product Categories"...
You will be able to create product sheet designs based on labels, specific (unique) products, product archive page etc.
To get started with Divi, discover all the articles to start serenely!