Checkout Builder

Replace the default WooCommerce classic checkout form with a fully customizable, multi-step checkout experience — drag and drop 28 element types, create section-based layouts, apply conditional visibility, and style every element to match your brand.

Availability: Pro

Page Navigation

• Current guide: Checkout Builder
• Where to open it: Storefront checkout and WordPress Admin -> ArraySubs -> Checkout Builder
• Direct route: /wp-admin/admin.php?page=arraysubs-mainadmin#/checkout-builder
• Section overview: Open overview
• Previous guide: field-types
• Next guide: use-cases
• Troubleshooting: Audits, Logs, and Troubleshooting

Overview

The Checkout Builder lets you redesign your classic WooCommerce checkout page without writing code. It provides a visual drag-and-drop editor where you arrange fields, sections, and layout elements into single-step or multi-step checkout flows. Custom field data captured at checkout flows through to orders, subscriptions, and renewal invoices automatically.

For the builder layout to apply on the frontend, use the classic WooCommerce checkout page or place the [woocommerce_checkout] shortcode on your checkout page. WooCommerce Checkout block and Store API flows can still participate in supported data handling, but the visual builder layout and multi-step arrangement are not applied the same way.

Navigation: ArraySubs → Checkout Builder

When to Use This

• You need to collect information at checkout that WooCommerce doesn't provide (company size, dietary preferences, delivery instructions, file uploads, T-shirt sizes, etc.)
• You want a multi-step checkout to reduce form fatigue and increase conversions
• You need to reorganize the default WooCommerce checkout layout (move fields, group them differently, add section headings)
• You want to customize the checkout's visual design — colors, spacing, border radius, and step navigation style
• You need conditional fields that only appear based on what the customer has already entered

---

The Builder Interface

Opening the Builder

Go to ArraySubs → Checkout Builder and click Open Builder. The editor opens in full-screen mode with a toolbar at the top for Save, Discard, and Reset actions.

Layout

The builder has two main areas:

Left sidebar (~320px) — switches between two tabs:

When you select a field in the editor, the left sidebar switches to show that field's settings (label, key, placeholder, required toggle, CSS class, type-specific options, and Show When visibility rules when another input field can be referenced). Click the back arrow to return to the Elements palette.

Right panel (editor area) — shows the step tabs at the top and the field grid below. Drag elements from the palette into this area to build your checkout form.

Steps and Multi-Step Checkout

• One step: The checkout renders as a single page with no step navigation
• Two or more steps: The checkout becomes a multi-step form with navigation buttons (Previous/Next) and a step indicator

To add a step, click + Add Step in the step tab bar. Each step has a name and an icon that appear in the step indicator. Steps can be reordered by dragging their tabs.

Step navigation behavior:

• Customers can move between steps freely (Previous/Next buttons or clicking a step in the indicator)
• Validation runs only when the customer submits the final step — not during step transitions
• This reduces friction for customers who want to review earlier steps before submitting

Drag-and-Drop

Adding fields: Drag an element from the left palette and drop it into the step's field grid.

Reordering: Drag fields within a step to change their order. Drag between steps by moving a field to a different step tab.

Sections with columns: Section elements are container blocks that support 1, 2, or 3 column layouts. Drop fields into any column within a section for side-by-side layouts.

---

Field Categories and Types

The builder includes 28 element types across three categories. See the Field Types Reference for complete details on every field.

Standard Input Fields (9 types)

These are traditional form inputs that the customer fills in:

Advanced Input Fields (9 types)

Specialized inputs for richer data collection:

Layout Elements (10 types)

Structural and display elements that don't collect data:

---

Locked Fields

Four WooCommerce fields are locked and cannot be removed from the checkout:

• Billing Email
• Billing First Name
• Billing Last Name
• Billing Country

These fields appear with a lock icon in the builder. You can reorder them, move them to a different step, or change their position in a section, but you cannot delete them. WooCommerce requires these for order processing.

---

Conditional Visibility

Any field can have visibility rules that show or hide it based on the value of another field.

How to Add Rules

1. Select a field in the editor
2. In the left sidebar, scroll to Visibility
3. Click Add Condition under Show When
4. Configure: reference field → operator → value → logic

Available Operators

Rule Behavior

• Rules include a Logic selector. Use AND when all conditions must match, or OR when any condition should allow the field to show. Empty or omitted logic defaults to AND.
• Rules are evaluated in real time as the customer fills in the form
• Hidden fields are not validated and not submitted — they are as if they don't exist when hidden
• You can reference any field within the same step or any previous step

Example

A "Company Name" text field that only appears when a "Customer Type" select is set to "Business":

• Reference field: customer_type
• Operator: is
• Value: business

---

Section Columns

Section elements support multi-column layouts for side-by-side field placement.

Drop fields into any column within a section. Fields within a column stack vertically. The layout is responsive — columns collapse to full width on mobile devices.

---

Design Panel

The Design tab in the left sidebar controls the visual appearance of the entire checkout form.

Color Settings

Layout Settings

Step Navigation Settings

All design changes apply via CSS custom properties and update in real time as you adjust them in the builder.

---

Checkout Builder Settings

A separate settings page at ArraySubs → Checkout Builder → Settings controls global behavior.

Master Toggle

Data Flow Settings

File Upload Settings

---

Data Flow: From Checkout to Subscription

Custom field data follows a clear path through your system:

At Checkout

1. Customer fills in custom fields during checkout
2. On form submission, all custom fields are validated (type-specific checks: email format, number range, phone pattern, date parsing, file type/size)
3. Custom field values are saved as order meta with the prefix _arraysubs_cf_ (e.g., _arraysubs_cf_company_name)

After Checkout

4. If Copy Custom Fields to Subscriptions is enabled, all _arraysubs_cf_* meta values are copied from the order to the subscription post meta
5. On each future renewal, if Copy Custom Fields to Renewal Orders is enabled, values are copied from the subscription to the new renewal order

Display

6. Admin order edit screen shows custom fields if Show on Admin Order Details is enabled
7. Customer order detail page shows custom fields if Show on Customer Order Details is enabled
8. Subscription detail REST response includes custom fields if Show on Subscription Details is enabled

File Uploads

Uploaded files are stored in wp-content/uploads/arraysubs-checkout-uploads/{order_id}/ as private WordPress attachments, not publicly browsable. The meta value stores the attachment ID, and files can be downloaded from the order or subscription detail view.

---

Frontend Rendering

Classic Checkout

The builder hooks into WooCommerce's woocommerce_checkout_fields filter at high priority (999) to patch the default checkout fields. It:

• Reorders fields according to the builder layout
• Injects custom fields at the appropriate positions
• Adds CSS step classes for multi-step navigation
• Relocates the coupon form and notices according to builder config

Non-standard field types (File Upload, Image Select, Color Picker, etc.) are rendered through additional hooks after the billing and shipping address sections.

WooCommerce Checkout Block

The current admin UI warns that the builder layout is intended for the classic checkout page or the [woocommerce_checkout] shortcode. Store API / block checkout integration can save supported custom field data, but the editor's layout, element order, and multi-step flow are not rendered the same way as the classic checkout builder layout. Use classic checkout when you need the visual arrangement shown in the builder.

Assets

These CSS/JS bundles are loaded on the checkout page as needed:

• arraysubspro-checkout-builder.css — Layout and design styles
• arraysubspro-checkout-builder.js — Step navigation, conditional visibility, and interactions
• arraysubspro-checkout-upload.js — File upload handling (loaded only when upload fields are present)

---

Product Table Field

The Product Table is a special layout element that displays a list of products directly on the checkout page, allowing customers to add products to their cart without leaving checkout.

Configuration

Behavior

• Products shown in the table have "Add to Cart" buttons
• When a product is added, the cart updates via AJAX without page reload
• Products already in the cart show their current quantity
• Unavailable products (out of stock, restricted) show the unavailability reason

---

Real-Life Use Cases

See Checkout Builder Use Cases for 15+ detailed real-world examples covering subscription boxes, SaaS onboarding, membership portals, event registrations, and more.

---

Edge Cases and Important Notes

• Builder disabled: When the Checkout Builder is turned off in settings, the standard WooCommerce checkout renders normally. All previously saved builder configuration is preserved and restored when you re-enable it.
• Missing Order Info and Payment: If you delete the Order Info and Payment element, the builder automatically adds it back at the end of your last step on save. The checkout form cannot render without it.
• Conditional fields not submitted: Fields hidden by conditional visibility rules are excluded from both validation and submission. The customer can never submit data for a hidden field, even if it was partially filled before being hidden.
• Renewal orders and upload fields: File attachments referenced by attachment ID are copied as meta to renewal orders, but the physical file is not duplicated. The renewal order links to the same attachment.
• WooCommerce address fields: The Billing Address and Shipping Address elements render WooCommerce's native address fields. You can configure which address fields are visible, their labels, and which countries are available — but the actual field rendering is WooCommerce's responsibility.

---

Troubleshooting

---

Related Docs

• Field Types Reference — Complete reference for all 28 element types
• Checkout Builder Use Cases — 15+ real-world examples
• Subscription Checkout — Core checkout rules and subscription creation
• Subscription Detail Cards — How custom fields appear on the admin subscription view

---

FAQ

Does the Checkout Builder work with Block Checkout? Use classic checkout or the [woocommerce_checkout] shortcode when you need the builder layout, design settings, and multi-step flow to match the editor. Store API / block checkout paths can save supported custom field data, but the visual layout is not applied the same way.

Are custom fields included in WooCommerce order exports? Custom fields are stored as order meta with the _arraysubs_cf_ prefix. WooCommerce's built-in CSV export includes custom meta fields, so they appear in exports.

Can I use the builder for non-subscription checkouts? Yes. The Checkout Builder modifies the WooCommerce checkout globally. All orders — subscription and regular — go through the customized form when the builder is enabled.

What happens to existing orders if I change the builder layout? Existing orders keep their saved custom field data. Layout changes only affect future checkouts. The display of custom fields on old orders depends on their meta keys, not the current layout.

Can I reset the builder to WooCommerce defaults? Yes. Use the Reset button in the builder toolbar to clear all custom configuration and return to the default WooCommerce checkout field layout.

How many steps can I create? There is no hard limit. In practice, 2–4 steps works best for most checkout flows. A minimum of 1 step is required.