Checkout Page

Divi BodyCommerce allows you to customise the checkout page of WooCommerce using the Divi Builder or one of the custom layouts we have created. 

Below is a video that demonstrates how to use the checkout page template in BodyCommerce.

Steps to change the look of your checkout:

1. Enable and choose your layout

Go to Divi Engine > BodyCommerce > Checkout Page.

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

  1. Enable Custom Checkout Layout? 
    Click yes to use our custom layout styles.
  2. Select Checkout Page Template
    If you want to create your own layout using the Divi Builder, use the modules we have created and assign the layout here.
  3. Checkout Style
    Here you can choose the style you want to use. We currently have the following styles:
    1. Multi-Step
    2. Accordion
    3. One Page (cart and checkout)
    4. Payment Right
  4. Remove checkout title
    Enable this to remove the checkout titles
  5. Make checkout page fullwidth
    Enable this if you want the checkout page to be fullwidth.
  6. Style Your Checkout Area
    Undert this section there are loads of settings to change the appearance of your checkout page such as input fields, buttons and text colours.

Multi-Step Specific Settings

  1. Multi-Step Style
    Here you can choose the style of the progress bar. We currently have the following styles:
    1. Circles
    2. Arrows
  2. Multi-step mobile numbers style
    Here you can select how you want the multi-step numbers to change on mobile.
    1. 100% width, one of 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.
  3. Multi-Step Order
    Change the order of the steps. Login and complete will stay 1st and last.
  4. 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.
  5. Guest checkout introduction text
    Change the text that appears just above the login form when a guest tries to checkout.
  6. Next Button Text
    Change the text of the "next" button.
  7. Previous Button Text
    Change the text of the "previous" button.
  8. Progress Bar Login Title
    Change the name of the Login title on the progress bar.
  9. Step 1 Title
    Change the name of the Step 1 title on the progress bar (billing).
  10. Step 2 Title
    Change the name of the Step 2 title on the progress bar (shipping).
  11. Step 3 Title
    Change the name of the Step 2 title on the progress bar (order information).
  12. Progress Bar Payment Info Title
    Change the name of the Payment Info title on the progress bar.
  13. Progress Bar Title Text Color
    Change the colour of the names of the steps.
  14. Progress Bar Background Color
    Change the colour of the default colour of the circles or the arrows
  15. 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
  16. Progress Bar Text Color
    Change the colour of the text on top of the default background (numbers in circles) & (numbers and text in arrows)
  17. 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

  1. 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 letter below. <br>Copy the numbers and letters that appear after "x". 
    So "!" - copy just the "21". "&#xe016;" - copy the "e016"
  2. Toggle Icon Color
    Change the colour of the icon
  3. Open Title Font Size
    Change the size of the open title font
  4. Open Title Font Color
    Change the color of the open title text
  5. Open Title Background Color
    Change the color of the open background color
  6. Closed Title Font Size
    Change the size of the closed title font
  7. Closed Title Font Color
    Change the color of the closed title text
  8. Closed Title Background Color
    Change the color of the closed background color

One Page Checkout Specific Settings

  1. Checkout Columns
    Change the number of columns you want on the one page.
    1. One will make the cart at the top.
    2. Two will make the cart on the left.
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