Skip to main content

Checkout Page

Divi Shop Builder comes with 5 Checkout Modules and the ability to customize your WooCommerce checkout page using the builder and its full array of design options. Now you can control the entire user experience, from viewing a product all the way through its purchase

You have to options to build the checkout page:

  • Create a standard Checkout, where all elements of the checkout process are displayed by default.
  • Develop a multistep checkout page which is segmented into various steps. See More
Warning

The following cases are not supported and could result in unexpected behavior:

  • Module with <form> tag in between checkout modules
  • Module with <form> tag in the same row as a checkout module
  • Module with <form> tag in the same section as a checkout module, if more than one section on the page contains a checkout module

In the above, checkout modules refers to only the following modules: Billing Info, Shipping Info, Order Review.

Standard Checkout Page​

Checkout Billing Module​

Next, coming to the checkout page modules, we have the ability to control the appearance of the billing section:

Checkout Coupon Module​

note

Checkout modules should all be placed in the same section except for the coupon code field which must be in separate section, and no other modules containing HTML <form>s can be in the same section as the checkout modules.

We can personalize the additional coupon section as well:

Checkout Order Module​

Using this module we can adjust the order placement section:

Checkout Shipping Module​

The module allows to customize the shipping form details and appearance:

WooCommerce Notices​

This module simply controls the notice shown on the cart/checkout page and Woo Shop + module. This module is optional, but allows stylizing notices.

Multi-Step Checkout (feature is currently in Beta).​

Multi-Step Checkout is currently in Beta. Contact [email protected] for additional information.

Divi Shop Builder also includes functionality for creating a multi-step checkout, which breaks up the checkout components over several separate views instead of showing them all at once on the same page, as WooCommerce does by default.

Multi-Step Checkout is implemented by the Woo Multi-Step Checkout module on the checkout page, using checkout step content that has been built on that page, or in the Divi Library, or a combination of both. The Woo Multi-Step Checkout module should be located in its own Divi section with no other content.

The basic process for creating steps in the Woo Multi-Step Checkout module is as follows:

  1. Add a new child item to the module
  2. In the child module, enter text in the Step Label field to identify the current step in the checkout process. For example, there might be separate steps for "Billing", "Shipping", and "Order Details".
  3. Enter a unique slug to identify the step in the Step Slug field. This is typically similar to the step label but it must be in lowercase and cannot contain spaces (and it's best to only use letters, numbers, dashes, and/or underscores).
  4. Under Step Content, specify whether the content for this step will come either from a Divi section on the current page, or a section layout that has been saved to the Divi Library. In order to use a section from the current page, it cannot be the same section that contains the Woo Multi-Step Checkout module, and the section must contain a Billing Info, Shipping Info, or Order Review module from Divi Shop Builder (it may contain other modules as well). The section will be hidden until the customer reaches the corresponding step in the checkout. If a section from the Divi Library is used instead, there is no requirement that it include any specific module.
  5. Ensure that the ID in the step content section corresponds to the Step Slug configured in the Multistep Checkout module under Step -> Step Slug. To do this, navigate to section settings, access the Advanced tab, and within the CSS ID & Classes toggle, locate CSS ID to modify the setting accordingly.
  6. If the content source is a section from the current page, choose which of the mandatory modules it contains using the Primary Module dropdown. Otherwise, choose a Divi library layout to use (only section layouts are avaialble for selection).

On the frontend, the multi-step checkout can be navigated by clicking the step names in the step navigation, using the 'Back' and 'Continue' buttons, or using the back and forward buttons in the browser (for previously visited steps). In order to proceed to the next step, all preceeding steps must validate successfully.

*Using multiple Woo Multi-Step Checkout modules on the same page is not supported.

Live Demos: https://demo.wpzone.co/divi-shop-builder/