WooCommerce Multi-Step Checkout
The WooCommerce MultiStep Checkout Editor splits the checkout form into simple and easy steps
. The checkout process has three primary sections:
- Billing details
- Shipping details
- Order Info.
If a user is not logged in to the account before placing the order, the checkout form displays a Login
section and Coupons
section just above the billing details sections. The Order Info section is followed by a Payment Info
section. All these sections of checkout can be arranged and customised in different formats as sections using the plugin.
To Navigate to the Plugin settings, hover on WooCommerce
in the Dashboard and choose Multi-Step Checkout
Dashboard → Woocommerce → Multi-Step Checkout
The general settings of WooCommerce MultiStep Checkout Editor
include primary settings like adding, renaming and rearranging the steps.
Following are the topics discussed in this article.
- Adding a new step
- Editing a step
- Rearranging steps
- Action Hooks
- Disabling/Enabling default and custom steps
- Deleting custom steps
Add New Step feature
‘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.
- Navigate to WooCommerce → Multistep Checkout → Checkout Steps. While the plugin is activated, it displays three steps, i.e. Billing Details, Shipping Details and Order Review as default.
- To add an extra step, click on the ‘+ Add new step’ button.
- In the pop-up window which appears, Enter the Step Name (mandatory), Display Name, Display index and Logged in Index in the ‘Create New step’ pop up Note: 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 [ _ ]
- Save the step.
After adding the steps, there are 2 different methods for displaying a custom step in the checkout page.
- Linking a custom step with a custom section from WooCommerce Checkout field editor plugin.
- Create a custom step with custom content using ‘Use only Custom Content for this step’ feature
Each 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 Checkout Field Editor Pro plugin in the dashboard. 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.
Else, create a custom step with custom content using the ‘Use only custom content for this step’ feature in WooCommerce Multi-Step Checkout.
For step by step instructions click here
Rearranging the Steps
The steps can be rearranged by dragging and dropping the steps clicking and holding the drag affordance on the left side of the step name in general settings.
Note: As Confirm Order is the final step before checking out, this step cannot be rearranged. All other default steps and custom steps can be rearranged above the Order Review step.
- Click and hold the drag affordance (☰) on the left side to drag and position the steps.
- After arranging the steps as required, Save changes
Disabling/ Enabling the Steps
The steps can be easily disabled and enabled by checking and unchecking the checkbox named ‘Enabled
’ in general settings. Save the changes after making the necessary changes.
Note: Order info tab cannot be disabled
Deleting Custom Steps
The custom steps can be deleted. Following are the steps for deleting custom steps.
Steps to delete custom step:
- Click on Delete button displayed alongside the custom step.
- Confirm to delete.
- Save the changes.
- Order info tab cannot be deleted.
- The Display Position of the Sections assigned to this Step would become blank in Checkout field editor. So these sections must be reassigned accordingly.
Editing Step Title and Step Index
You can always edit the Step Title
and Step index
by just clicking on them in the general settings of the plugin. More information on setting Step Index, refer URL
Note: You cannot edit the Step Name after creating the step.