Checkout elements
Split WooCommerce's checkout into elements you can arrange freely: contact, addresses, shipping, payment and the order summary. Payment gateways, express buttons and WooCommerce's live updates keep working.
- Builder with the Checkout page selected
- The section holding Billing details selected on the canvas
- Its settings in the panel on the right, with the Page › Section breadcrumb
What every checkout needs
A checkout must collect customer details and take payment. Each Checkout page needs at least one visible element from each group:
Customer fields
Billing Address (modern, split) or Customer Details (classic).
Payment
Payment Methods (modern, split) or Order Review & Payment (classic).
At a glance
| Element | Group | Notes |
|---|---|---|
| Checkout Notices | — | Validation errors and messages |
| Returning Customer Login | — | Guests only, when WooCommerce allows login at checkout |
| Contact Information | — | Email (and phone) |
| Billing Address | Customer fields | Plus account creation for guests |
| Shipping Address | — | Ship to a different address, order notes |
| Customer Details (classic) | Customer fields | All fields together |
| Shipping Methods | — | Only when the cart needs shipping; updates live |
| Order Items | — | Updates live |
| Coupon (Checkout) | — | When coupons are enabled |
| Totals | — | Updates live |
| Payment Methods | Payment | List or accordion |
| Terms & Privacy | — | From WooCommerce settings |
| Place Order Button | — | Place anywhere in the form |
| Order Review & Payment (classic) | Payment | Items, totals, payment together |
| Trust Badges | — | Conversion; can be used several times |
| Steps Progress | — | Multi-step indicator |
All of these except Trust Badges can be used once per page. The content elements are available too.
Checkout Notices
Validation errors and other WooCommerce messages. Notice style: "Full-width banner" (default) or "Inline".
Returning Customer Login
A collapsible login form for guests. It shows only to logged-out shoppers, and only when WooCommerce's "Allow customers to log into an existing account during checkout" setting is on.
Default "Returning customer? Log in".
Default "If you have shopped with us before, enter your details below."
Contact Information
The email address, and phone, as their own section. Use it with Billing Address; the billing section then leaves these fields out.
Icon (default Email), custom icon image and badge colours. See Section badges.
Billing Address
The billing fields and, for guests, the "Create an account?" checkbox and account fields. Heading: default "Billing details". Section badge icon: Address.
Shipping Address
The shipping fields behind a "Ship to a different address?" checkbox, plus order notes (under "Additional information" when the order doesn't need shipping).
Default "Ship to a different address?"
Customer Details (classic)
Contact, billing and shipping fields together, exactly as WooCommerce's own templates render them. Choose it for maximum compatibility with plugins that expect the classic layout.
Shipping Methods
Lets the shopper choose a shipping method. It updates as the address changes, and shows only when the cart needs shipping. Heading: default "Shipping method". Section badge icon: Shipping.
Order Items
The products being ordered, with a quantity badge, variation details and "Qty N × price". It updates live.
A small remove button on each line.
Coupon (Checkout)
Listed as Coupon in the element picker. Apply a coupon without leaving checkout. The settings are the same as the Cart coupon: label, placeholder, button label, dropdown, shape and border. It is hidden when coupons are disabled in WooCommerce.
Totals
Subtotal, discounts, shipping, fees, tax and total. It updates live. With a Shipping Methods element on the page, shipping shows as one amount; without one, WooCommerce's shipping chooser appears here. Heading: empty by default.
Payment Methods
The payment method choice. It also includes the terms and the Place Order button, unless their own elements are on the page.
Section badge icon: Payment.
"Plain list" or "Accordion".
Used only when the design has no separate Place Order Button element, which has its own label.
Terms & Privacy
The privacy policy text and the terms checkbox, from WooCommerce → Settings → Advanced and Accounts & Privacy. When it's on the page, the terms are removed from the payment section.
Place Order Button
The Place Order button, placed anywhere in the form. When present, WooCommerce's own button is removed and this element's label is used.
Empty falls back to "Place order".
Default "Secure checkout. Your details are protected."
Default icon: a lock on the left. See Button styles.
Order Review & Payment (classic)
Order items, shipping, totals, payment, terms and Place Order together, as WooCommerce's own templates render them. Settings: Heading (default "Your order"), Show item thumbnails, Let shoppers remove items, Payment methods style and Place order button label.
Trust Badges
Short reassurances such as secure checkout or free returns. You can add it more than once. In Trust badges, write one badge per line as Title | Description:
Secure Checkout | Your information is safe. Free Returns | 30 days, no questions asked. Fast Delivery | Ships within 24 hours.
Steps Progress
The checkout steps, with the current one highlighted. It is available on Checkout and Thank You. On Thank You it uses your published Checkout steps and shows every step as complete. On Checkout it is hidden when Page settings → Show step progress is off. See Multi-step checkout.
The final step's name.
Center, Left or Right.
Section badges
Contact, Billing, Shipping Methods and Payment Methods show a numbered or icon badge beside their heading. Choose the style for the whole page in Page settings → Section headings. Each of these elements can override it:
- Section icon: Person, Email, Address, Shipping, Payment, Lock, Shield, Cart, Gift, Review, Star or Check.
- Custom icon image: a small square SVG or PNG used instead.
- This section's badge background and number / icon color. "Default" uses the page badge colours.
Preview sample data
The editor shows sample fields and an order of a "Sample T-shirt" (Color: Navy · Size: M, 2 × 24.00) and a "Sample cap" (15.00), with "Direct bank transfer" and "Cash on delivery" as payment methods.