WP SmartPay offers two checkout layouts that control how the payment form looks on the frontend: Stacked (single column) and Split (two columns). You choose the layout per form in the editor Options panel.

Stacked Layout (Default)

All checkout fields — name, email, amount selector, gateway, and pay button — are displayed in a single vertical column. This is the default for all new forms.

Best for:

  • Narrow page columns or sidebar embeds
  • Mobile-first audiences (single column reads naturally on phones)
  • Simple donation forms with few fields

Split Layout

The form is divided into two columns side by side:

  • Left column — Customer details (name, email, amount input) and any custom blocks you have added to the form canvas.
  • Right column — Gateway selector (if multiple gateways are active on the form) and the pay button.

Best for:

  • Full-width page embeds where the extra space improves readability
  • Forms with lots of fields — spreading them across columns reduces scroll
  • Visually separating "what you're paying for" from "how you're paying"

How to Change the Checkout Layout

  1. Open the form in the editor: SmartPay → Forms → Edit.
  2. In the right sidebar, click the Options panel to expand it.
  3. Locate the Checkout Layout setting.
  4. Select Stacked or Split.
  5. Click Update to save.
Screenshot of WP SmartPay forms list showing available forms to edit
Open the Forms list, then click Edit on any form to access the Checkout Layout option.

Mobile Behaviour

On screens narrower than 768 px, both layouts collapse to a single column regardless of the setting. SmartPay's checkout stylesheet handles this automatically — no custom CSS is required.

Tip: Use your browser's developer tools (press F12 and toggle the mobile device view) to preview how a form looks at different screen sizes before publishing.