---
title: Advanced Checkout Overview
description: "The [DiviMerc Advanced Checkout module](https://divimerc.com/modules/advanced-checkout/) lets you build and customize your WooCommerce checkout form using Divi. You can manage customer information, billing and shipping details, payment methods, and more. **Important Note:** - Add the module to your WooCommerce checkout page…"
url: "https://divimerc.com/docs/advanced-checkout/"
updated: "2026-10-27"
category: Modules
---

# Advanced Checkout Overview

The [DiviMerc Advanced Checkout module](https://divimerc.com/modules/advanced-checkout/) lets you build and customize your WooCommerce checkout form using Divi. You can manage customer information, billing and shipping details, payment methods, and more.

**Important Note:**

- Add the module to your WooCommerce checkout page or a Divi Theme Builder template assigned to it. The module won't display on other pages.
- Only one Advanced Checkout module can appear on a checkout page. If you add multiple instances, only the first one will display.

Let's see the settings in brief and how to make better use of them —

## Content Tab

The Content tab lets you select a checkout layout, manage form components, customize fields, and more.

### Template

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-1.webp)

- **Select Template:** Choose how the checkout form appears.
  - **Minimal:** Display all checkout components in a single-page layout.
  - **Stepper:** Display one checkout step at a time with navigation buttons and step indicators.
  - **Accordion:** Display checkout components as collapsible panels, with one panel open at a time.

### Components

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-2.webp)

Add, remove, and rearrange checkout components to customize your checkout form. You can also use **Custom** components to add other Divi modules. For details on each component, see the **[Advanced Checkout Components](#Advanced-Checkout-Components)** section below.

**Note:** You can add each component only once, except **Custom**, which can be added multiple times.

### Steps & Panels

The Steps & Panels settings let you control step navigation and required field information. (Available when Stepper or Accordion is selected as a template.)

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-3.webp)

- **Step Numbers Placement:** Choose where step indicators appear. (Available in the Stepper layout.)
  - **Top bar:** Display step indicators horizontally above the form.
  - **Left timeline:** Display steps vertically beside the form.
- **Upcoming Steps:** Choose how upcoming checkout steps appear. (Available in the Stepper layout.)
  - **Hide until reached:** Hide upcoming steps until customers reach them.
  - **Show collapsed:** Display upcoming steps as collapsed sections showing their titles.
- **Name the Next Step on Continue:** Display the next step's name on the Continue button, such as "Continue to Shipping method."
- **Required Field Note:** Show a note explaining the required field indicator at the top of steps containing required fields.
  - **Note Text:** Customize the required field note.

**Note:** Customers must complete the required fields in each step before proceeding. If a required field is missing or invalid, the checkout remains on that step and highlights the field.

### Fields

The Fields settings let you customize how form labels and common WooCommerce checkout fields behave across all components.

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-4.webp)

- **Label Style:** Choose how field labels appear.
  - **Above the field:** Display labels above input fields.
  - **Floating:** Display labels inside fields that move upward when customers enter information.
  - **Placeholder only:** Display placeholder text instead of visible labels.
- **Required Marker:** Show or hide the asterisk (*) beside required fields.
- **Hide "(optional)" Text:** Show or hide the optional text beside non-required field labels.
- **Full Name Field:** Combine the first and last name fields into a single Full Name field.
- **Company:** Choose whether the company field is displayed and required.
  - **WooCommerce default:** Follow your WooCommerce field settings.
  - **Hidden:** Hide the company field.
  - **Optional:** Display the field without requiring it.
  - **Required:** Make the field mandatory.
- **Address Line 2:** Choose whether the second address field follows WooCommerce defaults, is hidden, optional, or required.
- **Phone:** Choose whether the phone field follows WooCommerce defaults, is hidden, optional, or required.

**Note:** These field settings apply across the checkout components. Even when Full Name Field is enabled, WooCommerce receives separate first and last names when the order is submitted.

**Background:** Customize the background of the entire module using Divi's standard background settings.

**Element Label:** Set a custom admin label to easily identify the module in the Divi Builder.

## Design Tab

The Advanced Checkout parent module's Design tab lets you customize the shared appearance of component titles, form fields, labels, checkboxes, and more.

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-5.webp)

**Sections:** Customize the background, border, spacing, and box shadow of individual checkout sections. You can also customize the Component Card's background, border, spacing, and box shadow. (Available in the Minimal layout.)

### Steps & Panels

Customize the appearance of step navigation, step indicators, and navigation buttons. (Available in Stepper and Accordion layouts.)

#### Steps

Customize the card background, border, spacing, and box shadow of checkout steps. You can also customize the required field note's appearance.

#### Numbers

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-6.webp)

- **Number Size:** Adjust the size of step number indicators.
- **Current Step Fill:** Set the background color of the current step indicator.
- **Current Step Number:** Customize the number color of the current step.
- **Upcoming Step Outline:** Set the outline color of upcoming steps.
- **Upcoming Step Number:** Customize the number color of upcoming steps.
- **Completed Step Fill:** Set the background color of completed steps.
- **Completed Step Number:** Customize the number color of completed steps.
- **Line Color:** Set the color of the line connecting step indicators.
- **Line Width:** Adjust the thickness of the connecting line.

You can also customize the step number typography.

#### Buttons

Customize the Continue button's typography, background, border, and spacing. You can also customize the Back button's typography.

**Title:** Customize the typography and spacing of checkout component titles, including step titles.

### Fields

Customize the appearance of input fields across the checkout form using the following settings.

#### Default

- **Required Marker Color:** Set the color of the asterisk (*) beside required fields.
- **Optional Text Color:** Customize the color of the "(optional)" text beside field labels.
- **Arrow Color:** Set the color of dropdown arrows in select fields.

You can also customize label typography and spacing, along with field text, border, spacing, and background using Divi's standard design settings.

**Error:** Customize the background, border, label typography, and error messages of invalid fields.

**Placeholder:** Customize the typography of placeholder text inside form fields.

### Checkboxes

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-9.webp)

- **Checkbox Size:** Adjust the size of checkboxes.
- **Checkbox Color:** Set the checkbox color.
- **Check Mark Color:** Customize the color of the checkmark.
- **Outline Color:** Set the checkbox outline color.
- **Outline Color (Checked):** Customize the outline color when a checkbox is selected.

You can also customize the label typography of checkboxes.

### Radio Buttons

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-10.webp)

- **Radio Size:** Adjust the size of radio buttons.
- **Radio Color:** Customize the radio button color.
- **Outline Color:** Set the outline color of unselected radio buttons.
- **Outline Color (Selected):** Set the outline color of selected radio buttons.

**Note:** These settings apply to all radio button fields across the Checkout Form, including Shipping Methods and Payment.

### Notices

Customize the appearance of WooCommerce checkout messages using three tabs:

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-11.webp)

**Info:** Customize informational messages, such as login and coupon prompts.

**Error:** Customize error messages, such as missing required fields.

**Success:** Customize success messages, such as applied coupon confirmations.

Each tab includes styling options for Text, Background, Border, Spacing, and Notice Button appearance.

**Sizing:** Adjust the width, height, and alignment of the module.

**Spacing:** Add custom margin and padding to the module's container.

**Border:** Customize the border style, width, and color. You can style each side separately or apply the same style to all sides.

**Box Shadow:** Add shadow effects to the module.

**Filters:** Apply color filters to enhance the module's appearance.

**Transform:** Scale, rotate, move, or skew the module.

**Animation:** Apply animation effects and customize the delay, duration, repeat settings, and animation type.

## Advanced Tab

The Advanced tab provides additional controls, including Custom CSS, Position, Visibility, Conditions, and other standard Divi settings.

## Advanced Checkout Components

The Advanced Checkout module includes separate components for customer information, shipping, payment, and order placement. You can add, remove, rearrange, and customize each component to build your checkout form.

### Contact Information

The Contact Information component lets you collect customer email addresses and customize the login form for returning customers.

#### Content Tab

##### Content

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-12.webp)

- **Title:** Enter a custom title for the Contact Information section.
- **Guest Notice Text:** Customize the message shown to customers checking out as guests. (Applies when guest checkout is allowed in WooCommerce.)
- **Create Account Label:** Customize the text beside the account creation checkbox. (Applies when WooCommerce allows optional account creation during checkout.)
- **Display:** Choose how the returning-customer login form appears.
  - **Collapsed, with a link:** Hide the login form behind a clickable link.
  - **Always open:** Keep the login form visible.
- **Prompt:** Customize the text displayed before the login link. (Collapsed layout only.)
- **Link Text:** Customize the link text used to open the login form. (Collapsed layout only.)
- **Close Link Text:** Customize the link text used to close the login form. (Collapsed layout only.)
- **Message:** Add a message above the login fields.
- **Button Text:** Customize the login button text.
- **Guest Link Text:** Customize the link that lets customers close the login form and continue as guests. (Collapsed layout only.)

**Note:** To display the returning-customer login form, enable **Enable log-in during checkout** under **WooCommerce > Settings > Accounts & Privacy**. The form only appears to customers who are not logged in.

#### Design Tab

**Guest Notice:** Customize the typography of the guest checkout notice. (Applies when guest checkout is allowed.)

**Login Prompt:** Customize the prompt text and login link typography. (Applies when Display is set to Collapsed, with a link.)

**Login Form:** Customize the form's background, border, and spacing. You can also style the message text and error messages, including their typography, background, border, and spacing.

**Login Button:** Customize the login button's typography, background, border, spacing, and box shadow.

**Login Links:** Customize the typography of the Lost Password and Guest links. (The Guest link applies to the collapsed layout only.)

You can also adjust the component's Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation using Divi's standard design settings.

### Billing Details

The Billing Details component lets you collect customer billing information and manage account creation during checkout.

#### Content Tab

##### Content

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-13.webp)

- **Title:** Enter a custom title for the billing details section.
- **Create Account Label:** Customize the text displayed beside the account creation checkbox.

**Note:** The Create an account checkbox only appears when WooCommerce allows optional account creation during checkout. If registration is required, WooCommerce handles it automatically.

#### Design Tab

Customize the component's Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation.

### Shipping Address

The Shipping Address component lets customers enter a different shipping address when needed.

#### Content Tab

##### Content

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-14-1.webp)

- **Title:** Enter a custom title for the shipping address section.
- **Checkbox Label:** Customize the text displayed beside the shipping address checkbox, such as "Ship to a different address?"

**Note:** The Shipping Address component only appears when the order requires shipping and WooCommerce allows a separate shipping address.

#### Design Tab

Customize the component's Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation.

### Additional Information

The Additional Information component lets customers add notes or special instructions to their orders.

#### Content Tab

##### Content

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-26-1.webp)

- **Title:** Enter a custom title for the additional information section.

**Note:** To let customers add special instructions during checkout, make sure order notes are enabled in WooCommerce.

#### Design Tab

Customize the component's Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation.

### Shipping Methods

The Shipping Methods component lets customers select from the available WooCommerce shipping options.

#### Content Tab

##### Content

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-16-1.webp)

- **Title:** Enter a custom title for the shipping methods section.
- **Methods Style:** Choose how shipping methods appear.
  - **Radio List:** Display shipping methods as a list with radio buttons.
  - **Cards:** Display shipping methods as selectable cards.
  - **Compact:** Display shipping methods in a compact list.
- **No Rates Yet Text:** Customize the message displayed when shipping rates aren't available yet.

**Note:** Shipping options depend on the customer's address and the shipping methods configured in WooCommerce. If both the Advanced Checkout and Advanced Checkout Details include shipping methods, the options appear only in the Checkout Form to avoid duplication.

#### Design Tab

**Shipping Method:** Customize shipping method typography, including labels and prices, along with backgrounds, borders, and spacing.

##### Selected Method

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-17.webp)

- **Selected Color:** Set the color used to highlight the selected shipping method.

You can also customize the selected method's background, border, and box shadow.

**No Rates Yet Text:** Customize the typography of the message displayed when shipping rates aren't available.

You can also adjust the component's Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation.

### Payment

The Payment component lets you display available WooCommerce payment methods, customize their appearance, and configure payment information.

#### Content Tab

##### Content

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-18.webp)

- **Title:** Enter a custom title for the payment section.
- **Methods Style:** Choose how payment methods appear.
  - **Radio Cards:** Display each payment method in a selectable card.
  - **Classic List:** Display payment methods in WooCommerce's standard list layout.
  - **Tiles:** Display payment methods as selectable tiles.
    - **Tiles Per Row:** Choose how many payment tiles appear in each row.
  - **Minimal:** Display payment methods in a simple list with dividers.
- **Gateway Icons:** Show or hide the logos provided by payment gateways.

**Note:** Available payment methods depend on the gateways enabled in WooCommerce. Gateway logos are provided by each payment provider, but you can customize them using the DiviMerc Payment Gateway Icons extension.

##### Secure Note & Text

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-19.webp)

- **Secure Note:** Show or hide a security message below the payment methods.
  - **Secure Note Text:** Customize the security message.
- **Custom Text:** Show or hide additional information in the payment section.
  - **Text:** Enter custom information, such as refund policies or accepted payment methods.

##### Place Order Button

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-20.webp)

- **Show Place Order Button:** Display a Place Order button inside the Payment component.
  - **Button Text:** Customize the button text. Use {total} to display the current order total.
  - **Show Order Total:** Display the current order total after the button text.
    - **Separator:** Customize the separator between the button text and order total.
  - **Full Width:** Make the Place Order button span the full available width.
  - **Enable After Terms Accepted:** Keep the button disabled until customers accept the terms and conditions.

**Important Note:**

- Only one Place Order button appears per checkout page. The Advanced Checkout takes priority over Advanced Checkout Details. If multiple Checkout Form components have the button enabled, only the last component's button appears.
- The Payment component's Place Order button is disabled by default. Enable it if you want customers to place orders from this component instead.
- The terms checkbox only appears when a Terms and conditions page is configured in WooCommerce. Without one, the button won't wait for terms acceptance.

#### Design Tab

**Payment Method:** Customize payment method backgrounds, borders, spacing, box shadows, and method name typography.

##### Gateway Icons

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-21.webp)

- **Icon Size:** Adjust the size of payment gateway logos.
- **Icon Position:** Choose where gateway logos appear.
  - **After Name:** Display logos after the payment method name.
  - **Before Name:** Display logos before the payment method name.
  - **Above Name:** Display logos above the payment method name.
  - **Below Name:** Display logos below the payment method name.
  - **Far End:** Display logos at the far edge of the payment method.
- **Icon Gap:** Adjust the spacing between payment method names and their logos.

You can also customize logo backgrounds, borders, spacing, and box shadows. (Available when Gateway Icons is enabled.)

**Selected Method:** Customize the selected payment method's background, border, box shadow, and method name typography.

##### Payment Details Box

Customize the appearance of payment information using the following settings:

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-22.webp)

**Box:** Customize the details container's typography, background, border, and spacing.

**Fields:** Customize the typography, background, border, and spacing of payment fields.

**Field Labels:** Customize the typography of labels inside the payment details box.

**Place Order Button:** Customize the button’s typography, background, border, spacing, and box shadow. You can also style the terms and privacy text and links in the second tab. (Available when Show Place Order Button is enabled.)

**Secure Note:** Customize the security message's typography and spacing.

**Custom Text:** Customize the typography of additional payment information.

You can also adjust the component's Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation using Divi's standard design settings.

### Review & Place Order

The Review & Place Order component lets customers review their checkout information and place their orders.

#### Content Tab

##### Content

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-23.webp)

- **Title:** Enter a custom title for the Review & Place Order section.
- **Order Details Summary:** Show or hide a summary of the customer's contact, shipping, and payment information.
- **Summary Style:** Choose how the checkout details appear.
  - **Rows:** Display labels, values, and Edit links in separate rows with dividers.
  - **Card:** Display the information inside a bordered card.
  - **Stacked:** Display labels above their values, with Edit links beside the labels.
  - **Compact:** Display the information in compact rows without dividers.

**Note:** The order details summary updates as customers enter their information. Customers can use Edit links to return to the relevant checkout steps.

##### Place Order Button

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-24.webp)

- **Show Place Order Button:** Show or hide the Place Order button.
  - **Button Text:** Customize the button text. Use {total} to include the current order total.
  - **Show Order Total:** Display the current order total after the button text. (Not needed when Button Text includes {total}.)
    - **Separator:** Customize the separator between the button text and order total.
  - **Full Width:** Make the button span the available width.
  - **Enable After Terms Accepted:** Keep the button disabled until customers accept the terms and conditions.
  - **Secure Note:** Show or hide a security message below the Place Order button.
    - **Text:** Customize the security message. (Available when Secure Note is enabled.)

**Important Note:**

- The Place Order button is enabled by default and takes priority over buttons in the **Payment** component and **Advanced Checkout Details** module.
- To use the Payment component's button instead, disable this button and enable the one in Payment.
- For **Stepper** and **Accordion** layouts, keep the component with the active Place Order button as the final step.
- The terms checkbox appears only when a Terms and conditions page is configured in WooCommerce.

#### Design Tab

##### Order Details Summary

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-25.webp)

- **Divider Color:** Customize the color of dividers between checkout details. (Not displayed in the Compact layout.)

You can also customize label, value, and Edit link typography, along with the summary's background, border, and spacing. (Applies when Order Details Summary is enabled.)

**Place Order Button:** Customize the button's typography, background, border, spacing, and box shadow. The second tab lets you style the terms and privacy text and links. (Available when Show Place Order Button is enabled.)

You can also adjust the component's Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation using Divi's standard design settings.

### Custom

#### Content Tab

##### Content

![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-26.webp)

- **Title:** Enter a custom title for the component.

**Elements:** Add Divi modules, such as Text, Image, or Divider, inside the Custom component.

**Note:** You can add multiple Custom components. Empty Custom components won't appear on the live checkout.

#### Design Tab

Customize the component's Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation settings. Each module added inside the Custom component also has its own design settings.

## Need Help?

If you have any questions or need assistance, contact our support team: support@wprio.com.