The Checkout Page Builder allows you to create and customize your WooCommerce checkout page using Elementor or WPBakery Page Builder with a drag-and-drop interface.
The checkout page consists of two separate layout areas, each customized independently:
- Checkout Form – contains all checkout fields and action buttons
- Checkout Top Content – used for customer login and coupon forms
This separation gives you full flexibility over the checkout experience.
Quick Steps: Create a Checkout Layout #
Step 1 #
Go to:
Dashboard → Layouts → Checkout
Click Add New.
Step 2 #
Set the Layout Type to Checkout Form and enter a layout name.
Step 3 #
Click Create Layout.
Step 4 #
Design your checkout form by adding sections and dedicated checkout elements.
You can also enhance the layout with additional content such as text blocks, images, trust badges, reviews, or banners.
Checkout Form Elements #
The Checkout Form layout includes the following special elements:
- Billing Details – Displays all customer billing fields
- Shipping Details – Displays shipping address and delivery fields
- Order Review – Shows a summary of the cart contents
- Payment Methods – Displays available payment gateways and the place-order button
Checkout Top Content Layout #
To add login and coupon functionality, repeat the same steps but choose Checkout Top Content as the layout type.
This layout includes three dedicated elements:
- Checkout Steps – Progress indicator showing:
- Cart
- Checkout
- Complete Order
- Login Form – Allows customers to log in directly on the checkout page
- Coupon Form – Enables customers to apply discount coupons during checkout
By combining Checkout Form and Checkout Top Content layouts, you can create a fully customized, conversion-optimized checkout experience that matches your brand and business needs — all without writing any code.
