WooCommerce Multi-Step Checkout | Multi-step Checkout

The steps in a checkout form can be arranged into divisions using the Multi-Step Checkout plugin. The checkout process has three primary sections: 1. Billing details 2. Shipping details and 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 Infosection. 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.

General Settings

The general settings of the plugin include primary settings like adding, renaming and rearranging the 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. 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 ‘+ Add new step’ button. In the pop up window which appears, you can add the name, step title and display index of the step and save it.

Rearranging The Steps

The steps can be rearranged by dragging and dropping the steps clicking and holding the three-lines icon on the left side of the step name in general settings.

Disabling/ Enabling The Steps

The steps can be easily disabled and enabled by checking and unchecking the checkbox named ‘Enabled’ in general settings.

Deleting Custom Steps:

Steps to delete custom step:

  1. Confirm to delete.
  2. Save the changes.

Editing Step Title And Step Index

You cannot edit the step name after creating the step. You can always edit the step title and display index by just clicking on them in the general settings of the plugin.

Display Settings

Multistep Feature

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.

  1. Check/ Uncheck the ‘Enable Multistep’ checkbox.
  2. Save the changes.

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.

Button Style

Button style includes options to define classes for extra customization. You can further decide if you need any extra customization by checking or unchecking ‘Do you want to style button?’ 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.

Backup And Import Settings

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

  1. Copy the text from the Plugin Settings Data that you want to import.
  2. Insert the copied data to the Plugin Settings Data of the current plugin.
  3. Click Import Settings. The plugin settings will be copied.

ThemeHigh develops plugins to customize the product and checkout pages of a WooCommerce Online Store.https://www.themehigh.com/