Add New Step For Multi-Step Checkout

Add new step’ feature is one of the key features of the plugin. It helps you to add custom steps for checking out on your checkout page. You can access this feature from ‘Multi-Step Checkout’ settings. While the plugin is activated, it displays three steps as default.
  • Billing Details
  • Shipping Details
  • Order Review
To add an extra step, Navigate to WooCommerce →  Multistep Checkout →  Checkout Steps. Click on the ‘+ Add new step’ button. In the pop up window which appears, you can add the Step Name (mandatory), Display Name, Display index and Logged in Index in the ‘Create New step’ pop up. To Display the Checkout Step in checkout page there are 2 different ways: 
  1. Linking a custom step with a custom section from WooCommerce Checkout field editor plugin.
  2. Create a custom step with custom content using ‘Use only Custom Content for this step’ feature

Linking a custom step with a custom section from WooCommerce Checkout field editor plugin

After adding the steps, the section created using the WooCommerce Checkout Field Editor Pro plugin should be assigned to a step from the plugin itself. The default steps are assigned a display name and index by default, which can be edited manually. The default sections (Billing, Shipping and Order Review) are already assigned to corresponding steps and cannot be edited. Instead, you can rearrange these steps to display an added step before, after or in between the default steps. To assign a new section to a step, go to the settings of WooCommerce Checkout Field Editor Pro plugin (WooCommerce Checkout Form). While adding the section, choose the step in which the section is to be displayed, from the ‘Display Position’ pull down and save the settings. You can always change the step by editing the section.
  1. Navigate to WooCommerce Multistep Checkout General Settings.
  2. Click on +Add new step.
  3. Enter the step name, display name and display index (optional) in the pop-up window opening (The step name field must begin with a lowercase letter [a-z] and followed by any number of lowercase letters, digits [0-9] or underscores [_]).
  4. Save the changes.
  5. To add a section to the step, create a new section from WooCommerce Checkout Field Editor Pro and set the section’s display position as the newly created custom step.
Note: Only when a field(s) is added to the custom section of a custom step, it would be displayed in the checkout page.

Watch this video to learn the setup.

Create a custom step with custom content  using ‘Use only Custom Content for this step’ feature

Steps to include plain text as content for custom steps without using the Checkout Field Editor for WooCommerce plugin.
  1. Navigate to WooCommerce  → Multistep checkout  → Checkout steps
  2. Choose the custom step and click on the edit pencil icon (✎). Edit step pop up appears.
  3. Enable or disable the feature by turning on/off switch checkbox ‘Use only Custom content for this step’.
  4. Fill in the text for Custom Content.
Click on Update and Save the changes.