The WooCommerce Builder plugin gives you a lot of options to build your products’ layouts very easily. Even if you have thousands of products, you can change all these products’ layouts with a few clicks. Let’s start with importing the free layouts we provide to get you started very quickly.

Import the free layouts

If you haven’t already, download the free layouts from here, to see these layouts in action, click here. After downloading the layouts, go to Divi Library, at the top of the page, click “Import & Export“, Clicking this button will launch the portability popup.

From within this popup, click the “Import” tab to reveal the import options.

Once inside the Import tab, click the “Choose File” button and locate the .JSON file that you just downloaded. Once you have selected the file, click the “Import Divi Builder Layouts” button to begin importing. Once the import process has completed, you will notice that the Divi Library items have been added to your library and included images have been imported into your WordPress Media Library. 

Set the default layouts for all products

If you have a lot of products and you don’t have the time to build a layout for every one of them, don’t worry, we have got you covered. The WooCommerce Builder plugin will allow you to set one layout to be used for all of your products at once.

Not just that, you can also set default layouts for products based on their category.

Go to your website’s admin dashboard -> Wc Builder -> Products tab and you will get 2 main options:

 

1- General default layout: This is the layout to be used for all of your products at once, you don’t have to build a layout for every single product you have. Just select the layout and you are done!

2- Based on the product category: Under this option, you will have a full list of WooCommerce products categories, next to each one, you have a drop-down menu of all saved layouts in your Divi Library, select the layout you want and all products under this category will use this layout and override the general default one.

Create layouts for specific products

So, you have set the default layouts but you want a specific product/s to have a different layout than the default? you can do that very easily, just go to the product editing page and there, you have 2 options:

select-woocommerce-product-layout

 

1- Use The Product Description Builder.

What is that description builder?

Product pages are different, they are not like normal WordPress pages or posts. The product page has a lot of parts like the gallery slider, price, variations, short description, description, attributes …etc. The content area on the product editing page is just a single part of the page, it is the product description.

After activating the WooCommerce Builder plugin, Divi Builder will be enabled for that area. You can use this description area/builder to build the entire product page or just leave it as it is for the product description.

Why select this option?

  1. Simple! you will build the product layout just like posts or pages, you don’t have to go to Divi Library to do that.
  2. You can use the visual builder to build the page, all product modules support the visual builder and most of the product modules will display the real data of the product in the visual builder.

Disadvantages of using the description builder:

  1. In the description Builder you don’t have access to 2 modules; the Woo Product Description & Woo Product Tabs. Because both modules output the product description ( anything inside the description area/builder ) in the front-end, imagine using these modules in the description builder, they will output themselves which will create a loop, the page will keep loading and crashes at the end. So, you can’t use them there.
  2. You know Divi, it relies on shortcodes. Every section, row, and module is actually a shortcode. If you intend to use Divi all the time on your website, then you are fine. But if you decided at any point to switch to any other theme, your product description will be full of shortcodes that are visible in the front-end and removing them will be hard and time-consuming.

2- Select a Layout.

Selecting this option will keep the description area/builder just for the product description and this option is selected by default and we recommend it. With this option, you have to build the product layout in Divi Library, save the layout and select it from the drop-down menu.

This layout will override the general default layout and the layout for products based on their categories you have set under the plugin settings page.

The available options are

  1. Category Default Layout. Selected by default.
  2. General Default Layout.
  3. WooCommerce Default Layout ( if you like it! ).
  4. A list of all saved layouts in Divi Library.

 

Why use this option?

  1. If you decided to move to another theme or plugin, your products will remain clean of Divi shortcodes. And if you deactivate the plugin, everything will be back to normal.
  2. You have the option to make the product uses the General default layout, the category layout or even the WooCommerce default layout, you have more control here.
  3. Since you will build the layout in Divi Library, you have access to all product modules including the product description and the product tabs modules.
  4. You can still use the visual builder in Divi Library, but in this case, the modules will display dummy data in the visual builder just for the purpose of demonstration, but when you apply the layout to the product, of course, the product actual data will be displayed.

Essential modules to add to the layout

Using Divi builder, you can design the page as you like, add any module you want depending on your needs. The following modules are essentials for almost any product layout you build.

1- The “Woo Notices” module.

When a client adds a product to the cart, WooCommerce displays a message to tell the client what happened, did the product got added to the cart successfully? or the product stock does not allow? …etc

This “Woo Notices” module will display these messages for you. 

2- The “Woo Add To Cart Button” module.

This is the most important module and its name tells you what it does. This module display the “Add to cart” button and the quantity input for all product types. If the product is a variable product, this module will display the variations’ drop-down menus.

3- The “Woo Product Price” module.

The module will display the product price, if there are any discounts, the old price and the new price will be displayed.

4- The “Woo Product Images Slider” module.

This module will display the product gallery images. It is essential if your product is a variable product and each variation has its own image. When the client selects a variation, the main image will change to the variation image.

A Real World Scenario

1- You have a website with 100 products, you don’t have time to build a layout for every single product, you can just build one layout in Divi Library, let’s call it “Default Product Layout”, save it and go to the plugin settings page WC Builder -> Products tab -> Select this layout as the General default layout. Now, all your products will use this layout.

2- You want all products to use that “Default Product Layout” but you also want the products under a specific category – Music for example – to have a different layout, okay, build a layout in Divi Library, let’s call it “Music Layout”, now, got to WC Builder -> Products tab -> Based on the product category -> Look for your category and select the layout.

3- Now, all your products use the “Default Product Layout” except products under the Music category, they are using the “Music Layout”. Easy!

4- But what if you want a specific product/s to be different, not to use the general default nor the category specific layout? Simple, go to the product editing page and select one of the above options ( Use The Product Description Builder or Select a Layout ).