Skip to main content

Quickstart Guide

Divi BodyCommerce is a large WooCommerce toolkit. This page is the shortest path from install to a working shop and product layout.

Divi 5 first

On Divi 5, prefer Theme Builder templates and the Divi Engine settings hub. Divi 4 still uses Divi Library layouts assigned in BodyCommerce settings. Module names differ: see Divi 5 modules vs Divi 4 modules.

Step 1: Install BodyCommerce​

  1. Download the plugin ZIP from your Divi Engine account.
  2. Upload and activate it under Plugins.
  3. Activate your license under Divi Engine → Licenses.

Details: Install.

Step 2: Open the settings hub​

Go to Divi Engine → BodyCommerce.

Use:

  • Product, Shop and archives, and Account for store templates and page behavior
  • Cart, Mini cart, Cart icon, and Checkout for purchase-flow templates and behavior
  • Shopper features pages for wishlist, compare, badges, swatches, Ajax add to cart, coupons, and free shipping
  • Site-wide, Form fields, and Custom CSS / JS for store-wide changes
  • Checkout fields for extra checkout fields
  • Divi 5 Migration Tool only when moving Divi 4 layouts to Divi 5

Full map: Settings hub.

Step 3: Theme Builder vs assigned layouts​

Divi 5 (recommended): Create templates in Divi → Theme Builder for WooCommerce product, shop, and related views, then add BodyCommerce modules in those templates.

Divi 4 (and optional on Divi 5): Create layouts in the Divi Library and assign them on the matching Product, Shop and archives, Account, Cart, or Checkout settings page.

Do not turn on the Divi Builder on the default WooCommerce cart, checkout, or My Account pages. Those pages should stay as WooCommerce pages; BodyCommerce layouts wrap them.

Step 4: Custom loop card (optional)​

A custom loop layout is a single product card you reuse on shop, category, and related-product grids.

  1. In the Divi Library (or a Theme Builder loop), add a section and row.
  2. Add card modules such as Price, Add to Cart, View Product, and Ajax Filter Thumbnail / Post Title when using Archive Loop.
  3. Select the layout as the Custom Layout Loop Style in Archive Loop, Related Products, Up-Sell, or Recently Viewed Products.

For a faster card, select a ready-made Loop Template instead. On Divi 5 you can also design cards with Loop Builder and connect Filter Posts to the same page.

Card modules: Divi 5 module overview and Divi 4 module overview.

Step 5: Shop and product templates​

Shop / category​

  1. Add Archive Loop (Divi 5) or ARP Product Loop (Divi 4).
  2. Optionally add Filter Posts, Order By, Archive Header, Breadcrumbs, and Notices.
  3. Assign the layout in Shop and archives, or apply a Theme Builder shop/archive template.

Product​

  1. Start with BC Gallery, Add to Cart, Price, and BC Tabs.
  2. Add Sticky Add to Cart if you want a bar that stays on screen while scrolling.
  3. Assign the layout in Product, or use a Theme Builder product template.

Cart and checkout​

Use Products and Totals on the cart, and Billing, Shipping, Order Review, Payment, and Coupon on checkout. You can also enable a premade checkout style in checkout settings.

The settings hub identifies WooCommerce Blocks cart and checkout pages. Block pages can use BodyCommerce features, but custom module layouts belong in Theme Builder or an assigned Divi Library layout—not inside the WooCommerce page content.

What's next​