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:
- Enable Custom Checkout Layout?
Click yes to use our custom layout styles.
- 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.
- Checkout Style
Here you can choose the style you want to use. We currently have the following styles:
- One Page (cart and checkout)
- Payment Right
- 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.
- 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
- Multi-Step Style
Here you can choose the style of the progress bar. We currently have the following styles:
- Multi-step mobile numbers style
Here you can select how you want the multi-step numbers to change on mobile.
- 100% width, one of top of each other
- 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. Login 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 letter below. <br>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 color of the open title text
Open Title Background Color
Change the color of the open background color
Closed Title Font Size
Change the size of the closed title font
Closed Title Font Color
Change the color of the closed title text
Closed Title Background Color
Change the color of the closed background color
One Page Checkout Specific Settings
- Checkout Columns
Change the number of columns you want on the one page.
- One will make the cart at the top.
- Two will make the cart on the left.