Quickstart Guide

Written by the Divi Engine Documentation Team

BodyCommerce

Divi BodyCommerce is a comprehensive plugin with multiple features. It is because of its complexity that you might feel overwhelmed. Please don't be scared. Once you learn how BodyCommerce works you will appreciate how fast you can use it to build an online store.

Step 1: Install BodyCommerce

1. Download the plugin from your account.
2. Go to the Plugins section on your WordPress Divi website and add a new plugin.
3. Select BodyCommerce zip file and install.

Now the plugin will be installed and you will be able to see the Divi Engine menu on the left-hand sidebar. Please click HERE for more information on how to install Divi BodyCommerce.

Step 2: Overview of the different sections

Divi Engine > BodyCommerce 

If you head over to Divi Engine > BodyCommerce you will find the main settings of the plugin. Here you will be able to assign key pages, create your account page, checkout and more.

Divi Engine > BodyCommere Mods 

If you head over to Divi Engine > BodyCommerce Mods you will find some extra smaller modifications. Here you will be able to change the colour of the WooCommerce Notices and more.

Divi > Theme Builder

If you head over to Divi > Theme Builder you will be able to create templates for category pages, product pages and more. Please know that you can also do this through the Divi Library.

Divi > Divi Library

If you head over to Divi > Divi Library you will be able to create a Custom Loop Layout (or multiple layouts) and templates for category pages, product pages and more. If you go this route then remember to assign your key pages in BodyCommerce.

Divi Engine > BodyCommerce Checkout Fields 

If you head over to Divi Engine > BodyCommerce Checkout Fields you will be able to create custom fields for your checkout page.

Step 3: The Custom Loop Layout

The Custom Loop Layout is a card-style layout built in the Divi Library that you will use throughout your website built with Divi BodyCommerce. In the images below the custom loop layout is the one card inside the red box. This layout is being repeated on this page through the Product Loop Module, accessing information from different products.

Build A Custom Loop Layout

Make your way to the Divi Library and create a new layout naming it something like "Custom Loop Layout". Add a Section, Row and the modules that work in the Custom Loop Layout such as the Title, Price and Thumbnail. Please click HERE to find out what modules to add to your Custom Loop Layout.

Step 4: Create Pages For Your Store

Do not use Divi Builder on the pages themselves - only the default editor and shortcodes. The way that WooCommerce works is that when you enable the Divi Builder on the "my account" or "checkout" page for example it will cause issues. All Divi modules should be added in the Divi Library and assigned in our settings.

• Incorrect (Divi Builder used)

• Correct

Module Overview

Divi BodyCommerce comes with tons of modules for a variety of purposes. Please click HERE for more information on the modules.

Create A Shop Page Template

Head over to the Divi Library, create a layout called "Shop" and add the modules of your choice - start off with the Product Loop module. Then go to Divi Engine > BodyCommerce > Shop/Category Pages and assign this layout to the Shop section. To view this layout on the front end add the extension /shop/ to your URL. Click HERE for more information.

Create A Product Page Template

Head over to the Divi Library, create a layout called "Product Page" and add the modules of your choice - start off with the Product Title module. Then go to Divi Engine > BodyCommerce > Product Page and assign this layout to the Product Page section. To view this layout on the front end open up one of your products. Click HERE for more information.

Create A Category Page Template

Head over to the Divi Library, create a layout called "Category Page" and add the modules of your choice - start off with the Product Loop module. Then go to Divi Engine > BodyCommerce > Shop/Category and assign this layout to the Category section. To view this layout on the front end open up one of your categories. Click HERE for more information.

Create A Cart Page Template

Head over to the Divi Library, create a layout called "Cart Page" and add the modules of your choice - start off with the Cart Totals module and Cart Products module. Then go to Divi Engine > BodyCommerce > Cart and assign this layout to the Cart section. To view this layout on the front end add a product to the cart and view the /cart/ extension. Click HERE for more information.

Create A Checkout Page

Head over to BodyCommerce > Checkout and enable one of our premade Checkout pages. To view this layout on the front end open up one of your products, add it to the cart and then go to checkout. Click HERE for more information.

Create Other Pages

To create other pages like the Thank You Page view the rest of our documentation.

More Support?

Please email us at [email protected] if you are unable to get Divi BodyCommerce working.