How to Set Up Two Step Checkout in CartFlows

CartFlows includes a Two Step checkout layout that splits your checkout form into two short tabs. Customers enter their details first, then review their order and pay on the second tab, so the page never feels like one long form.

This guide shows you how Two Step checkout works, how to turn it on for a checkout step, and how to customize the note, step titles and button text.

How Two Step Checkout Works

Two Step places a numbered tab bar at the top of the checkout form. Each tab shows one part of the checkout.

• Step 1 (Shipping) collects the customer’s billing and shipping details. A large button at the bottom moves them to the next step once the required fields are filled in.
• Step 2 (Payment) shows the order summary, the coupon field, the payment methods and the Place Order button.
• A colored note box above the tabs gives you room for a short message, such as a reminder of what the customer is getting.

Customers can click the first tab at any time to go back and edit their details.

Before You Start

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

Where to Set the Layout

Where you choose the Two Step 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 Two Step 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 Two Step 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 Two Step 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 Two Step.

Step 5. Click Save Settings at the top right.

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

How to Customize the Two Step Design

After you save the Two Step skin, a new Two-Step Design item appears under Design in the left menu. Click it to change the text and look of each part of the layout.

Using a page builder? You’ll find the same options, such as the note text, step titles and offer button text, in the Two Step section of the Checkout Form widget or block.

You can change the following options:

• Enable Note Text — Show or hide the note box above the tabs.
• Note Text — The message inside the note box.
• Text Color and Note Box Background Color — The colors of the note box. By default, the box uses your Primary Color.
• Step One Title and Step One Sub Title — The label of the first tab. The defaults are Shipping and Where to ship it?
• Step Two Title and Step Two Sub Title — The label of the second tab. The defaults are Payment and Of your order.

Scroll down for the remaining options.

• Step Section Width — The width of the checkout form, in pixels.
• Step Border — Choose Solid to show a border around the form, or None to hide it.
• Offer Button Title and Offer Button Sub Title — The text on the button that moves customers to the second step.

Click Save Settings when you are done.

Two Step Checkout in Action

When customers open your checkout page, they see the note box, the two tabs, and the first step with their billing and shipping details. The button at the bottom takes them to the second step.

On the second step, customers see their order summary, the coupon field, the payment methods and the Place Order button.

On Mobile Devices

On phones and small tablets, the tab bar stretches to the full width of the screen and the spacing tightens, so both steps stay easy to use.

Frequently Asked Questions