Design Funnel Steps Easily

  1. Home
  2. Docs
  3. Design Funnel Steps Easil...
  4. Design Your Funnel Steps ...
  5. How to Use Multi-Step Checkout – Gutenberg

How to Use Multi-Step Checkout – Gutenberg

During the checkout, customers are generally required to add a lot of details on the same page and this process might seem long and confusing.

With WPFunnels, you will be able to use a Multi-step Checkout that helps to split your funnel checkout form into multiple steps so that buyers do not get confused with what information to input.

It is a very useful feature that is one of the solutions to abandoned carts as people often abandoned the site when they are confused with the long checkout form.

In this documentation, you’ll learn how to use a multi-step checkout form during the checkout for your sales funnel.

So, Let’s get started.

Step 1 – Edit Your Funnel Checkout Page

  1. On the drag and drop canvas, click on the Checkout step to select it.
  1. Next, click on the Edit icon.
Checkout Step edit option

And it will open the checkout page in Gutenberg edit mode.

Step 2 – Assign The Checkout Form Layout As Multi-Step

  1. On the checkout page, first, add the Checkout block to your page if you haven’t already. (If you have imported a template, then the form is already added.)
  1. Click on the checkout form and you will get its block options on the right side.
Gutenberg checkout block
  1. Here, look for the option called ‘Select Layout‘.
  1. Click on its drop-down options and choose Multistep.
Gutenberg-Select layout-Multistep

5. Click Update and then reload the page.

You will see that the form layout has changed into a Multi-step format.

Multistep checkout gutenberg

Your form will be broken down into four sections:

  • Login/Register (if you allow customers to login during checkout in WooCommerce > Settings > Accounts & Privacy)
  • Billing Information
  • Shipping Inormation
  • Order & Purchase Details

That’s it. You have enabled the Multi-step checkout format for your checkout page.

Right now, the multi-step checkout gives you four steps. Soon we will work on three steps and two steps checkout.

If you want to edit the fields in your Checkout step, you may use the checkout field editor.

How can we help?