The checkout page is the page where your clients enter their billing and shipping details and complete their order by paying you money using any of the available payment gateways.
This page must be simple and focused on the payment, any distractions on this page may result in losing the client.
Before you start
Your website must have a checkout page. When you install WooCommerce, it creates that page for you. Basically, it is a normal page under your admin dashboard -> Pages. If you don’t have a checkout page, go and create one.
The content of the checkout page is just a simple shortcode [woocommerce_checkout]. we will keep that page as it is and will not use Divi builder on it. Divi Library is the place to build the checkout layout.
Build the checkout layout
Now, let’s build the layout.
Get started
1- Go to your admin dashboard -> Divi -> Divi Library.
2- At the very top, click “Add new,” a new layout popup will open. Here you can set the layout name and the layout type.
You can name the layout whatever you want but make sure you select “Layout” as the layout type. And then, click the “Submit” button.
3- Divi Builder will open, you can use the back-end builder or the front-end build, it’s completely up to you.
Checkout modules
This is a list of the essential modules you need to add to your layout.
1- Woo Notices
This is a very important module to add to every WooCommerce layout you build using the WooCommerce Builder plugin. This module displays a variety of messages from WooCommerce like when a product is added to the cart or there is no enough stock of a specific product and so on.
You can place this module anywhere you want but it is recommended to add it to the top of the layout so it’s very obvious for your clients.
2- Woo Page Title
This module will display the page title. You don’t have to use this module, you can use a text module and add a custom title to your page.
3- Woo Breadcrumb
The breadcrumb module indicates the current page’s location, usually, it’ll be something like that “Home / Current Page”, this module is not required.
4- Woo Checkout
To display the checkout details, add the “Woo Checkout” module to the layout. This module will display the billing fields, the shipping fields & the payment options.
From the module’s options, you can display or remove any part you want and you can customize the look and the feel of all the module’s elements.
Apply the checkout layout
After creating the layout, go to your admin dashboard -> Wc Builder -> Checkout & Thank you tab -> Checkout Layout.
Select the layout you just created from the drop-down menu and save the changes.