Premade Checkout Styles

Written by the Divi Engine Documentation Team

Watch This Video

Introduction

Divi BodyCommerce provides you with multiple ways of building the checkout page for your online store. You can either build a layout in the Divi Library using relevant modules (CHP modules) or you can use the Multi-Step, Accordion, One Page, Payment Right or Shopify methods. 

Premade Layout

If you would like to use one of our premade layouts, go to BodyCommerce > Checkout and enable a custom checkout layout. Next, you will need to select your style from the drop-down list.

Customization

Your last task will be to customize the checkout page using the options available for you in BodyCommerce > Checkout as well as by using the Theme Customizer and additional CSS.

Shopify Example

Below is a video showing you an example using the Shopify style.

Premade Checkout Settings

Below are a list of settings on the page and what they do.

  • Remove checkout title: Enable this to remove the checkout titles.
  • Make checkout page fullwidth: Enable this if you want the checkout page to be fullwidth.

Multi-Step Specific Settings

  • Multi-Step Style: Here you can choose the style of the progress bar. We currently have the following styles.
    1. Circles
    2. Arrows
  • Multi-step mobile numbers style: Here you can select how you want the multi-step numbers to change on mobile.
    1. 100% width, one on top of each other.
    2. One line and hide titles of not active tabs. It will hide the titles of the other steps apart from the active one, this will make it so that you can fit them all on one line and it is smaller in height.
  • Multi-Step Order: Change the order of the steps. Log in and complete will stay 1st and last.
  • Multi-Step Validation Error Message: Change the text that will be shown when there is an error or a field not filled in when using multistep.
  • Guest checkout introduction text: Change the text that appears just above the login form when a guest tries to checkout.
  • Next Button Text: Change the text of the "next" button.
  • Previous Button Text: Change the text of the "previous" button.
  • Progress Bar Login Title: Change the name of the Login title on the progress bar.
  • Step 1 Title: Change the name of the Step 1 title on the progress bar (billing).
  • Step 2 Title: Change the name of the Step 2 title on the progress bar (shipping).
  • Step 3 Title: Change the name of the Step 2 title on the progress bar (order information).
  • Progress Bar Payment Info Title: Change the name of the Payment Info title on the progress bar.
  • Progress Bar Title Text Color: Change the colour of the names of the steps.
  • Progress Bar Background Color: Change the colour of the default colour of the circles or the arrows.
  • Progress Bar Background Active Color: Change the colour of the active colour of the circles or the arrows - this is when the process is complete.
  • Progress Bar Text Color: Change the colour of the text on top of the default background (numbers in circles) & (numbers and text in arrows).
  • Progress Bar Text Active Color: Change the colour of the text on top of the active background (numbers in circles) & (numbers and text in arrows).

Accordion Specific Settings

  • Toggle Icon: Enter in the number for the accordion icon - You can see a full list HERE. Just scroll down till you see the icons and some letters below. Copy the numbers and letters that appear after "x". So "!" - copy just the "21". "" - copy the "e016"
  • Toggle Icon Color: Change the colour of the icon.
  • Open Title Font Size: Change the size of the open title font.
  • Open Title Font Color: Change the colour of the open title text.
  • Open Title Background Color: Change the colour of the open background colour.
  • Closed Title Font Size: Change the size of the closed title font.
  • Closed Title Font Color: Change the colour of the closed title text.
  • Closed Title Background Color: Change the colour of the closed background colour.

One Page Checkout Specific Settings

  • Checkout Columns: Change the number of columns you want on one page.
    1. One will make the cart at the top.
    2. Two will make the cart on the left.

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.