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
- Download the plugin from your account
- Go to the Plugins section on your WordPress and click on "Add New"
- 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
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
- You create a Library layout that will become the "template" that each product will look at.
- 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)
- 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
- Do not use Divi Builder on the pages themselves - only the default editor and shortcodes
- 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.
- All Divi modules should be added in the Divi Library and assigned in our settings.
Incorrect (Divi Builder used)
- Disable Static CSS File Generation in Divi > Theme Options > Builder > Advanced
- 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
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
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