Install & Edit A BodyCommerce Layout Pack

Written by the Divi Engine Documentation Team

Introduction

Follow this information to learn how to install and edit a BodyCommerce Layout Pack.

Watch This Video

Step 1: Select A Layout Pack

Head over to our BLOG, filter by Layouts and select a BodyCommerce Layout Pack.

Step 2: Download Layout Pack

Find the Download button and click to download.

Step 3: Read READ_FIRST file.

Drag the folder inside the ZIPPED folder into your Desktop and read the READ_FIRST or READ_ME file.

Step 4: Install Divi & WooCommerce

First, you will need to install Divi, WooCommerce (and Divi BodyCommerce) using the appropriate method. Please click HERE to install BodyCommerce.

Step 5: Get Your Website Ready

  • Disable all other plugins (apart from WooCommerce) while developing.
  • Please go to Divi > Theme Options > Builder > Advanced and turn off the Divi Static CSS File Generation.
  • Disable Divi performance options that are related to JQuery, CSS and JS (Javascript) in Divi > Theme Options.
  • Flush permalink structure by saving the permalink structure twice. Go to Settings > Permalinks > Save.
  • Remove extra custom CSS that might conflict with Divi BodyCommerce.

Step 6: Create Default WooCommerce Pages

Go to WooCommerce > Status > Tools and create default WooCommerce pages. These pages must NOT have the Divi Builder installed on them. They must be the default WooCommerce pages.

Step 7: Import Divi Library Layouts

Most of your DiviBodycommerce website is built in the Divi Library. You will need to import the layouts from the Layout Pack folder that you have downloaded. To do this head over to Divi > Divi Library > Import & Export > Import and select the Library Layouts JSON file from the Layout Pack (now on your Desktop).

Step 8: Import BodyCommerce Settings

Your next step is to import BodyCommerce settings by heading over to Divi Engine > BodyCommerce > Settings > BodyCommerce Tools and select the BodyCommerce Settings CSV file from the Layout Pack (now on your Desktop) and click the Save Settings button. Then scroll down and Save Changes. This will arrange your BodyCommerce settings.

Step 9: Select Layouts & Settings Manually

On some WordPress Divi websites, the settings CSV file does not upload correctly. We are not sure of exactly why some websites do not import the settings correctly. If this happens to you then you will need to work through our documentation to arrange BodyCommerce settings yourself and assign layouts. The good news is that you now have the layouts and so half the work has been done for you.

Step 10: Import Theme Builder Layouts

Some BodyCommerce Layout Packs have Theme Builder templates. To import them go to Divi > Theme Builder and find the double arrows to the right of the screen. Import the Theme Builder JSON file from the Layout pack (now on your Desktop).

Step 11: Add Products & Categories

Now you will need to add products and categories to your BodyCommerse store.
  • Click HERE to add products.
  • Click HERE to add categories.

Step 12: View Pages

To view your pages click on the link to view from the front. For example, to view your product page go to WooCommerce > Products and find a product and open it up to view the front. The same applies to categories, the account page, the checkout and shop page - among others.

Step 13: Edit Divi Library Layouts

To edit a Divi Library Layout for the shop page, product page or more visit the Divi Library and select the layout. Or, visit BodyCommerce and click on the Edit This Layout button.

Step 14: Continue Building Your Website

To continue editing your WooCommerce website visit our documentation.

More Support?

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

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