Page settings
The look and behaviour of a whole page: colours, cards, fields, buttons, typography, and on Checkout, distraction-free mode and step navigation.
- Checkout page, Page settings on the Style tab
- Card style, Field shape, Accent and Button colors
Content
Cart page behavior Cart
Siteryn Customized Cart: your builder design. Standard WooCommerce Cart: WooCommerce's own page. Redirect Cart to Checkout: skip the Cart entirely.
This applies to your store right away, separately from publishing ("Cart page behavior saved.").
The redirect is protected against loops: it's skipped for an empty cart, and when the Checkout URL is missing or the same as the Cart URL. When the Cart isn't using your design, the editor says so.
Layout mode & steps
The Layout mode card: choose One page or Multi-step (Checkout only; Cart and Thank You just show "One page"), and open the layout picker with Choose a layout. On a multi-step checkout, the Steps panel appears below it. See Layouts & modes and Multi-step checkout.
Layout
Full width fills your theme's content area; Contained keeps a centered 1200 px column.
Whitespace between sections.
Hides the site header and footer navigation on the Checkout page to reduce drop-off.
Style
| Group | Setting | Options · default |
|---|---|---|
| Page | Page background | Transparent = your theme's background |
| Card style | Boxed (white cards with shadow), Outlined (border, no shadow), Soft (light panels, no border), Flat (no box, divider lines) | |
| Cards | Card background | #ffffff: billing, payment, cart and totals cards |
| Border & divider color | #dcdcde: card frames and the thin lines between rows | |
| Card shape | Square, Rounded, Custom (0–40 px, default 20) | |
| Form fields | Field background · Field border | #ffffff · "Default" = the border & divider color |
| Field height | Compact (44 px), Comfortable (52 px), Large (60 px), Custom (36–72) | |
| Field shape | Square, Rounded, Pill, Custom (0–40 px, default 12) | |
| Sections | Section headings Checkout | Number, Icon or None: the badge before the Contact, Billing, Shipping and Payment headings |
| Badge shape · Badge background · Number / icon color Checkout | Rounded, Square, Circle, No background, Custom (0–20 px, default 8) · "Default" = the accent color · "Default" = white on the badge | |
| Divider lines between sections | On. With the Flat card style they are the only separators. | |
| Shipping & payment options Cart · Checkout | Option style | Boxed, Divided rows, Plain (no borders). Cart default Plain, Checkout default Boxed. |
| Highlight the selected option | On: accent border and tint on the chosen option | |
| Highlight | Accent color | #2563eb: selected options, focus rings, step numbers and links |
| Buttons | Button style · Button color · Button text color | Filled or Outline · #2563eb (Proceed to Checkout, Place Order and other main buttons) · #ffffff |
| Button border radius (px) | 6 px (0–40) |
Typography
#1d2327 · empty = theme · empty = theme. These sit under the Text heading. The font family comes from your theme.
Step navigation Checkout
On the Layout tab, under the Multi-step and Back & Continue buttons headings. They apply when the Checkout uses the Multi-step mode.
Shows or hides the Steps Progress element on a multi-step checkout. Its look is set on the element itself.
Empty = "Continue to" + the next step's name. Type {step} where the name should go, for example "Next: {step}".
Empty = "Back".
Off: shoppers go back by clicking a finished step in the progress bar.
The divider between a step's form and its Back / Continue buttons.
Advanced
Also respected automatically when a visitor's system has "reduce motion" turned on.