The WooCommerce MultiStep Checkout Editor splits the checkout form into simple and easy steps. The checkout process has three primary sections:

  1. Billing details
  2. Shipping details
  3. 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. DashboardWoocommerceMulti-Step Checkout.

General Settings

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.

  1. 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.
  2. To add an extra step, click on the ‘+ Add new step’ button.
  3. 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 [ _ ].
  4. Save the step.

After adding the steps, there are 2 different methods for displaying a custom step in the checkout page.

  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

    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.

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.

  1. Click and hold the drag affordance (☰) on the left side to drag and position the steps.
  2. fter 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.

Deleting Custom Steps

The custom steps can be deleted. Following are the steps for deleting custom steps. Steps to delete custom step:

  1. Click on Delete button displayed alongside the custom step.
  2. Confirm to delete.
  3. Save the changes.

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.

WooCommerce Multi-Step Checkout - Display Settings

  • Enable Multi-Step

    In the display layout section, there are options to enable the multistep feature, forward navigation with step click and mobile compatible layout. You can also choose between different available layouts for styling the checkout steps. The multistep feature allows you to display the checkout form as different steps. Disabling this feature will display a long and step-less checkout form in a continuous flow. You can enable or disable the Multistep feature by ‘Enable Multistep’option in Display Settings Steps to Enable/Disable Multistep feature:

    1. Navigate to WooCommerce → Multistep Checkout → Display Settings.
    2. Enable/Disable the ‘Enable Multistep’ option.
    3. Save the changes.
  • Forward Navigation

    With the latest version of WooCommerce Multi-Step Checkout plugin, you can navigate through the steps without clicking on the next button. To enable forward navigation by step click, turn on/off switch to ‘Enable forward navigation on step click’.

  • Layout for Mobile View

    For easiness of handling in handheld devices, the Multi-Step Checkout is designed with a custom Accordion layout for mobile compatibility. To enable Accordion for mobile view, turn on/off switch checkbox ‘Force accordion layout for mobile view’. All styles applied to default layouts will be automatically applied to the responsive layout as well

  • Display Style

    Display style includes options to set the font size, font color, active text color, font weight, text transform, background color, active background color, content background color and padding.

    Color: The color of step background, active step background, step text, active step text and content background are customisable. The Color can be chosen from the color palette or the color code can be entered manually. Step font size: The size required for the font in a step title can be entered here. Enter the text size along with px as unit. Step font-weight: Step title font weight can be chosen from the drop-down menu. Four different font weights are available: Lighter, Normal, Bold and Bolder. Step text transform: The step title text can be transformed changed to Capitalized, Lowercase or Uppercase using Step text-transform option. Step line height: Enter the amount required as step line height with px as a suffix. Step padding units: Enter the dimensions required for step padding (px or em). Button Style: Button style includes options to define classes for extra customization. You can further decide if you need any extra customization by turn on/off the ‘Enable button styling’ switch checkbox.

    After checking the box, you can further set the font size, font color, hover font color, background color, hover background color, border width, border color, border radius, border style and padding. Adding values in button style is similar to that of the display style. The plugin gives you three different button border styles to choose from: Dashed, Dotted and Solid. You can choose none or any of them from the pull-down menu.

  • Step Index Style

    Step index style have options to perform extra customization on index display settings. Here, you can set the step index roundness, step index width/height, space between border and index, and also the active and inactive colors for index text, border and background, and more.

  • Step Progress Indicator

    The steps can be displayed with check-marks on the step indexes to mark the completion of each step. To enable this feature, enable the Enable step progress with check-mark symbols for completed steps switch checkbox inside Step Index style. For smooth working, it should be taken care of to disable forward navigation on step click before enabling the feature.

Backup and Import Settings

The saved settings of the plugins can be Imported by using the Backup and Import settings feature.

Steps to Backup and Import settings:

  1. Go to Advanced Settings → Backup and Import settings.
  2. Copy the text from the Plugin Settings Data that you want to import.
  3. Insert the copied data to the Plugin Settings Data of the current plugin.
  4. Click Import Settings, the plugin settings will be copied.