How to Set Up Multistep Checkout in CartFlows

CartFlows includes a Multistep Checkout layout that guides customers through checkout one short screen at a time: Information, Shipping and Payment. The order summary stays visible beside every step, so customers always know what they are paying for.

This guide shows you how Multistep Checkout works, how to turn it on for a checkout step, and what your customers see on each step.

How Multistep Checkout Works

Multistep Checkout is built on the Modern Checkout design. A step bar at the top of the form shows Information » Shipping » Payment, with the current step highlighted in your Primary Color.

• Information — Customers enter their email address and billing details, then click Continue to shipping.
• Shipping — Customers confirm their contact details, choose a shipping method and add order notes, then click Continue to payment.
• Payment — Customers review their contact and address details, choose a payment method and click Place Order.

Customers can go back at any time with the back links, the step bar, or the Change links next to their contact and address details.

Before You Start

Multistep Checkout is included with CartFlows Pro. In the free version, you’ll see it listed as Multistep Checkout (Available in higher plan).

Where to Set the Layout

Where you choose the Multistep Checkout layout depends on how your checkout page is built.

• Using the CartFlows checkout shortcode — If your checkout page uses the CartFlows checkout shortcode, you set the layout and its design from the Design tab in your checkout step settings. This tab appears when CartFlows → Settings → General → Show Ready Templates for is set to Other. Follow the steps in the next section.
• Using a page builder with the CartFlows Checkout Form widget or block — If you built your checkout page with Elementor, the Block Editor, Bricks or Beaver Builder, the CartFlows Checkout Form widget or block on the page controls the layout. Open the checkout page in your page builder, select the Checkout Form widget or block, and choose MultiStep Checkout under Layout → Select Layout. The design options for this layout then appear in the same widget or block settings.

Here is how it looks in Elementor, with the Checkout Form widget selected:

In the Block Editor, select the Checkout Form block and pick Multistep Checkout from Select Layout in the block settings sidebar. To learn more about the Design tab, see How to Modify the Checkout Page Using Backend Settings.

How to Set Up Multistep Checkout (Shortcode)

Use these steps if your checkout page uses the CartFlows checkout shortcode.

Step 1. From the WordPress admin, go to CartFlows → Funnels and open the funnel that contains your checkout step.

Step 2. Click the gear icon on the checkout step to open its settings.

Step 3. In the left menu, click Design → Checkout Design and turn on Enable Design Settings.

Step 4. Open the Checkout Skin dropdown and select Multistep Checkout.

Step 5. Optionally, set a Primary Color and Font Family. The step bar, buttons and links use the Primary Color.

Step 6. Click Save Settings at the top right.

Multistep Checkout is now active on that checkout step. Tip: Multistep Checkout shows when Instant Layout is off for the funnel. You can check this under Funnel Settings → Instant Layout.

Multistep Checkout in Action

Step 1: Information

The first step shows the Customer information section and the billing fields. Logged-in customers see a short welcome message with their email address instead of the email field. The order summary and coupon field sit in the right column.

Step 2: Shipping

The second step shows the customer’s email with a Change link, the available shipping methods, the option to ship to a different address, and the order notes field.

Step 3: Payment

The last step shows the contact and address details, each with a Change link, followed by the payment methods and the Place Order button.

On Mobile Devices

On phones, the order summary moves into a collapsible Show Order Summary bar at the top of the checkout. It shows the order total, and customers can tap it to see the full summary and the coupon field.

How the Steps Adjust to the Order

Multistep Checkout adapts to what is in the cart, so customers only see the steps they need.

• If the cart has no physical products, or your store ships only to the billing address, the middle step becomes Order notes and the button reads Continue to order notes.
• If no shipping is needed and the order notes field is turned off under Checkout Form → Form Settings → Enable Additional Field, the checkout uses two steps: Information and Payment.

Frequently Asked Questions