Quickstart Guide

Introducing to BodyCommerce 

Hi, welcome to our quick start guide! 

Divi BodyCommerce is such a comprehensive plugin - we offer so many features. The idea behind BodyCommerce is to offer one plugin that would normally take 5+ plugins.

Because of this complexity, it can seem overwhelming or difficult to understand at first. Don't be scared!

This guide should help you get up and running quickly

1. Installing BodyCommerce 

Follow these steps to install BodyCommerce 

  1. Download the plugin from your account
  2. Go to the Plugins section on your WordPress and click on "Add New"
  3. Select BodyCommerce zip file and click on "Install Now"

Now the plugin will be installed and you can see the Divi Engine menu on the left-hand sidebar.

Check this video to see the steps visually step by step: https://www.youtube.com/watch?v=U9gPHMvQ2Js&list=PL9My989q_-K_ikFVdps6YmADZwxKBD121

2. Overview of the different sections

We have a lot of settings (because we have so many awesome features) - below is how we break down where you will be working with Divi BodyCommerce.

a) Divi Engine > BodyCommerce 

Here are our main settings for our features and template overrides. You can find things like assigning product templates, creating custom cart icons, enabling Mini Cart Settings and so much more.

b) Divi Engine > BodyCommere Mods 

Here are the smaller modifications that you can use. These are some great things you can do but they are not essential to get going with BodyCommerce - be sure to check these out.

c) Divi > Theme Builder

Here you can create templates for your product pages, category, or shop pages. You can use our settings (in Divi Engine > BodyCommerce) or in the theme builder. The choice is yours.

d) Divi > Divi Library

One of the best things about BodyCommerce - here you will have your layout for your custom loop layout (See Point 3)

e) Divi Engine > BC Checkout Fields 

Again, not essential but here you can create some custom fields for your checkout page.

3. Understanding the Custom Loop Layout

Understanding the concept of the custom loop layout is one of the most important things to understand - as this will really help make your site shine and get the most out of our plugin. It can be first seen as confusing, but by the time you understand it, you practically have mastered BodyCommerce.

The main function of the Custom Loop Layout is to customise the way your products are displayed on the shop or category pages in WooCommerce. By default, Divi and WooCommerce provide a predefined design of the products when you insert the store module, that is, the title comes, price, product image, etc ...

What if you want to make it better, what if you want to add other elements to the way it looks, for example, the add to cart button?

This is where the custom loop layout really comes into play - you can define exactly what you want all within the Divi Library. 

The idea is this

  1. You create a Library layout that will become the "template" that each product will look at.
  2. In this layout you add the modules you want to show for each product - for example, you might want the thumbnail, title, price and add to cart (see below)
  3. Then you add the product loop module and choose custom layout and then select this Divi Library layout you created. I will now look at this template and replicate it for each product (see below)

See this video which will explain it: https://www.youtube.com/watch?v=mLiUJ_hvBjE&feature=emb_logo&ab_channel=DiviEngine

Here is another webinar that goes into more detail: https://www.youtube.com/watch?v=UFg5uD1F0YU&list=PL9My989q_-K_ikFVdps6YmADZwxKBD121&index=25&ab_channel=DiviEngine

4. How to create templates for your store

Important !!!!!

  1. Do not use Divi Builder on the pages themselves - only the default editor and shortcodes
    1. The way WooCommerce works, when you enable the Divi Builder on the "my account" or "checkout" page for example. It can cause issues with other plugins or styling. 
    2. All Divi modules should be added in the Divi Library and assigned in our settings.

      Incorrect (Divi Builder used)
  2. Disable Static CSS File Generation in Divi > Theme Options > Builder > Advanced
    1. This can cause issues with CSS rendering correctly

a) Introduction to our modules

We have a lot of modules which can seem overwhelming at first. The most important thing to remember is that you can only use our modules on the templates where they are designed for. 

For example, "LL Thumbnail" module can be used on the archive (Loop Layout) and on the Product page but NOT on the cart page. Another example could be "CHP Billing" - this can be used on the Checkout Page but not on the Product Page. If you use the wrong modules, this can cause errors on your website.

In the link below you can find all about the different modules you can use: https://help.diviengine.com/article/10-divi-bodycommerce-modules

b) Creating your Shop Page 

Divi BodyCommerce allows you to customize the shop/category page templates of WooCommerce using the Divi builder and our custom modules. 

In the link below you can find all the complete tutorial step by step of how to create your custom Shop Page with BodyCommerce: https://help.diviengine.com/article/11-shop-category-page-templates

c) Creating your Archive (category, tags) Pages

To create your custom Category page just follow the steps of this tutorial: https://help.diviengine.com/article/11-shop-category-page-templates

To create your custom Tags Page just follow the steps of this tutorial: https://help.diviengine.com/article/13-tags-page-template

d) Creating your Product Page

To create your custom Product page just follow the steps of this tutorial: https://help.diviengine.com/article/8-product-page-template

e)  Creating your Cart Page 

To create your custom Cart Page just follow the steps of this tutorial: https://help.diviengine.com/article/17-cart-page-template

f) Creating your Checkout

To create your custom Checkout Page just follow the steps of this tutorial: https://help.diviengine.com/article/18-checkout-page-template

g) Creating your Account Section 

To create your custom Checkout Page just follow the steps of this tutorial: https://help.diviengine.com/article/15-account-section-templates

5.  Final thoughts and extra features

Congratulations now you know all the basics of BodyCommerce! There is so much more you can do with our plugin! If you want to learn all features, here are some extra tutorials you can check and learn! 

Ajax add to cart feature: https://help.diviengine.com/article/25-bodycommerce-mods-global

Custom cart Icon: https://help.diviengine.com/article/21-custom-cart-icon

Mini cart: https://help.diviengine.com/article/20-mini-cart

Variation swatches: https://help.diviengine.com/article/23-variation-swatches

Ajax filters: https://help.diviengine.com/category/138-ajax-filters

Custom sales, new, free badge: https://help.diviengine.com/article/22-custom-sale-free-free-badges

Creating Order Bumps: https://help.diviengine.com/article/64-checkout-funnel-order-bump

Creating Thank You Page: https://help.diviengine.com/article/35-thank-you-page-template

Sharing Icons: https://help.diviengine.com/article/24-sharing-icons

Custom Email templates: https://help.diviengine.com/article/19-email-template

Creating Search Results Page: https://help.diviengine.com/article/29-search-results-page

Be sure to check out our YouTube videos: https://www.youtube.com/watch?v=U9gPHMvQ2Js&list=PL9My989q_-K_ikFVdps6YmADZwxKBD121&ab_channel=DiviEngine

Videos in Spanish: https://www.youtube.com/watch?v=FRgV_9hvFRM&list=PL9My989q_-K-H2GhsbblEZ9jARyrwe1Ji&ab_channel=DiviEngine

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us