Checkout page builder

Checkout layouts replace the standard WooCommerce checkout with a custom structure. The required layout types depend on whether the website uses Gutenberg, Elementor, or WPBakery.

Choose the correct checkout structure

Gutenberg

Create one Checkout layout. Gutenberg keeps the login form, coupon form, customer details, order review, and payment area within the same layout.

Elementor and WPBakery

The checkout is divided into two layout types:

• Checkout form — contains billing and shipping details, the order review, payment methods, and the Place order button.
• Checkout top content — contains content displayed before the form, such as login and coupon forms. If no custom top-content layout exists, the default WooCommerce content is used.

Create the checkout layout

1. Navigate to Dashboard -> Layouts -> Checkout and click the add button.

2. Select Checkout when using Gutenberg, or Checkout form when using Elementor or WPBakery.

3. Enter the layout name, choose a predefined design or start with a blank layout, and click Create layout.

4. Add the required checkout elements and publish the layout.

Checkout elements

• Billing details — displays the customer billing fields.
• Shipping details — displays the shipping address fields when a separate shipping address is required.
• Order review — displays products, quantities, subtotals, shipping, and the order total.
• Payment methods — displays available payment gateways and the order submission controls.
• Login form and Coupon form — let returning customers sign in or apply a coupon.
• Checkout steps — displays the Cart, Checkout, and Complete order progress indicator.
• WooCommerce notices and hooks — preserve messages and third-party content where needed.

When using Elementor or WPBakery, create a separate Checkout top content layout only when you want to replace the default content displayed above the checkout form.

Layout availability

Checkout and Checkout top content are global layout types and do not have configurable Include or Exclude conditions. The order confirmation displayed after checkout is controlled by a separate Thank you page layout.

Plugin compatibility

Payment, shipping, and checkout extensions often use WooCommerce hooks. If an extension’s content is missing, see WooCommerce hooks and plugin compatibility.