Checkout Page

Checkout Page displays the complete WooCommerce checkout interface in one element. Use it when the built-in layout meets the store's needs. WooCommerce must be installed and active.

Add and configure Checkout Page

1. Click Add, choose Checkout Page, and place it in the container.
2. Place Checkout Page on the page assigned as WooCommerce's checkout.
3. Configure Design > Layout and the Coupon, Billing Details, Shipping Address, Additional Info, Your Order, Totals, and Payment sections.
4. Set Typography and Spacing, then review Advanced options.
5. Save your changes.

This element has no children; use its own controls.

Content and front-end behavior

Use Checkout Builder with its separate checkout parts when you need a custom arrangement. Keep the real WooCommerce form components: a static imitation of checkout fields does not create a working checkout.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Design > Layout

Setting	Purpose and options	Behavior
Single Column	On/off.	Shared
Stack Vertically At	Breakpoint. When: Single Column is unset.	Shared

Design > Coupon

Setting	Purpose and options	Behavior
Disable	On/off.	Shared
Override Global Styles	woocommerce global styles.	See linked controls

Design > Billing Details

Setting	Purpose and options	Behavior
Background	Color or supported fill.	Shared
Padding	spacing controls.	See linked controls
Borders	borders controls.	See linked controls
Override Global Styles	woocommerce global styles.	See linked controls

Design > Shipping Address

Setting	Purpose and options	Behavior
Background	Color or supported fill.	Shared
Padding	spacing controls.	See linked controls
Borders	borders controls.	See linked controls
Override Global Styles	woocommerce global styles.	See linked controls

Design > Additional Info

Setting	Purpose and options	Behavior
Background	Color or supported fill.	Shared
Padding	spacing controls.	See linked controls
Borders	borders controls.	See linked controls
Override Global Styles	woocommerce global styles.	See linked controls

Design > Your Order

Setting	Purpose and options	Behavior
Background	Color or supported fill.	Shared
Padding	spacing controls.	See linked controls
Borders	borders controls.	See linked controls
Override Global Styles	woocommerce global styles.	See linked controls

Design > Totals

Setting	Purpose and options	Behavior
Rows > Spacing	Spacing and unit.	Responsive
Rows > Separator	On/off.	Shared
Rows > Separator Color	Color or supported fill. When: Separator is set.	Shared
Rows > Separator Height	Separator height and unit. When: Separator is set.	Shared
Override Global Styles	woocommerce global styles.	See linked controls

Design > Payment

Setting	Purpose and options	Behavior
Sticky	On/off. When: Layout ≠ 1.	Shared
Sticky Offset	Sticky offset and unit. When: Sticky is set.	Responsive
Background	Color or supported fill.	Shared
Padding	spacing controls.	See linked controls
Borders	borders controls.	See linked controls
Button > Size > Size	Custom, Small, Default, Large.	Responsive
Button > Size > Padding	Padding. When: Size = Custom.	Responsive
Button > Size > Override Width	Override width and unit.	Shared
Button > Size > Full Width At	Breakpoint.	Shared
Button > Background	Color or supported fill.	Hover
Button > Outline	On/off.	Shared

Shown when Outline is set.

Setting	Purpose and options	Behavior
Button > Color	Color or supported fill.	Hover
Button > Width	Width.	Shared
Button > No Fill On Hover	On/off.	Shared

Setting	Purpose and options	Behavior
Button > Typography	typography controls.	See linked controls
Button > Corners	Square, Round, Custom.	Shared
Button > Corner Radius	Corner radius and unit. When: Corners = Custom.	Responsive
Button > Effects > Transition Duration	Transition duration.	Responsive
Button > Effects > Scale On Hover	Set scale on hover. Range: 0–3.	Responsive
Button > Effects > Shadow	Shadow offset, blur, spread, color.	Responsive, Hover
Button > Icon > Icon	Icon.	Shared
Button > Icon > Position	Before, After.	Shared
Button > Icon > Size	Size and unit.	Responsive
Button > Icon > Color	Color or supported fill.	Hover
Button > Icon > Space Before	Space before and unit.	Responsive
Button > Icon > Space After	Space after and unit.	Responsive
Button > Icon > Hover Transform	Hover transform and unit.	Shared
Override Global Styles	woocommerce global styles.	See linked controls
Payment Info > Background	Color or supported fill.	Shared
Payment Info > Padding	spacing controls.	See linked controls
Payment Info > Borders	borders controls.	See linked controls

Design > Typography

Setting	Purpose and options	Behavior
Headings	typography controls.	See linked controls
Your Order > Table Heading	typography controls.	See linked controls
Your Order > Labels	typography controls.	See linked controls
Your Order > Prices	typography controls.	See linked controls
Your Order > Total Label	typography controls.	See linked controls
Your Order > Total Value	typography controls.	See linked controls
Payment	typography controls.	See linked controls
Payment Info	typography controls.	See linked controls

Design > Spacing

Setting	Purpose and options	Behavior
Container	spacing controls.	See linked controls
Gap	Space between items.	Responsive
Below Headings	Below headings and unit.	Responsive

Design > Advanced

Setting	Purpose and options	Behavior
Override Global Styles	woocommerce global styles.	See linked controls
Force Full Width Form Fields	On/off.	Shared

Troubleshooting