Skip to main content
Documentation/Elements & Controls Reference/Elements/WooCommerce/Checkout Builder/Checkout Billing Form

Checkout Billing Form

Checkout Billing Form displays WooCommerce's billing fields inside Checkout Builder. Field availability follows the store's checkout configuration. WooCommerce must be installed and active.

Add and configure Checkout Billing Form

  1. Click Add, choose Checkout Billing Form, and place it in the container.
  2. Place the element inside Checkout Builder.
  3. Configure Design > Billing Details and Spacing.
  4. Review field labels and validation styling in the checkout context.
  5. Save your changes.
Checkout Billing Form controls in the Breakdance editor
Checkout Billing Form controls in the Breakdance editor

Keep the required parent context

Checkout Billing Form must be inside Checkout Builder. Layout containers can sit between the parent and this element. Configure the product or checkout context on the parent.

This element has no children; use its own controls.

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 > 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 > Spacing

Setting Purpose and options Behavior
Spacing spacing controls. See linked controls

Troubleshooting

The element cannot be added here

It must be a descendant of Checkout Builder.

A billing field differs from the design sample

Check WooCommerce and checkout-field extensions. The element styles the actual fields supplied to checkout.