Multistep Checkout

Long checkout forms overwhelm customers and drive up cart abandonment. Multistep Checkout splits your WooCommerce checkout into clear, organized steps with a progress indicator, custom layouts, and optional login or coupon steps, making the buying process smoother and easier to complete.

Installation

↑ Back to top

Follow these steps to install the plugin on your WooCommerce store:

1. Log in to your WordPress admin dashboard.
2. Navigate to Plugins > Add New.
3. Click the Upload Plugin button at the top of the page.
4. Choose the plugin .zip file from your computer and click Install Now.
5. Once the installation is complete, click Activate Plugin.
6. After activation, the plugin settings will be available under the WooCommerce menu in the admin sidebar.

Configuration

↑ Back to top

After you have installed and activated the Multistep Checkout for WooCommerce extension, go to WooCommerce > Settings > Multistep Checkout tab. Here, you have multiple tabs, which are General, Checkout Steps, Display Settings, Advanced Settings, and Button Settings.

General Settings

↑ Back to top

• Enable/Disable: Enable multistep checkout to break down the checkout process into organized, user-friendly steps.
• Include Cart Step: Add a cart review step to the checkout process
• Include Login Step: Add a customer login/registration step to the checkout process
• Include Coupon Step: Add a dedicated coupon application step to the checkout process
• Combine Billing & Shipping: Merge billing and shipping information into a single step
• Activate Step Validation: Enable to block next button and forward step navigation until the current step passes validation

Checkout Steps

↑ Back to top

In this section, you can edit default checkout steps and also create new custom steps with custom content. For custom steps, click on an Add New Step Button and configure the following settings.

• Enabled: Checkbox option to enable this step
• Name: Enter the name of the step
• Step Title: Enter a title for this step

Index Type:

↑ Back to top

• Text Index: Choose this option to use a text index
• Icon Index: Choose this option to use an icon index
• Display Index/Upload Image: Enter the index text or upload an image for the index icon
• Enable Content Settings: Check this option to enable additional content settings for this step
• Custom Background Color: Choose a custom background color for the content.
• Custom Font Color: Choose a font color for the content
• Use only custom content for this step: Check this option to use custom content in this step
• Custom Content: Enter any custom content you want for this step

Display Settings

↑ Back to top

Multistep Layout:

↑ Back to top

• Layout: Select the layout for the multistep checkout. You can choose between the following:
  • Horizontal
  • Vertical
  • Accordion
• Layout Design: Select a design based on the layout type. You can choose the design based on the layout selected. For each layout, you will have the following options:
  • Horizontal Layout
    • Horizontal Box
    • Horizontal Arrow
    • Timeline
    • Looped Box
    • Custom Separator
  • Vertical Layout
    • Vertical Arrow
  • Accordion Layout
    • Classic Accordion
    • Accordion with Icon
• Tabs Position: Set the position of the tabs left, right, or center
• Step Background Color: Set the background color for the steps
• Step Background Color Active: Select the active background color for the steps
• Step Text Color: Choose the text color of the steps
• Step Text Color Active: Set the active text color for the steps
• Content Background Color: Select the background color of the content
• Step Font Size (px): Set the font size for the step label
• Step Line Height (px): Enter the line height in px
• Step Font Weight: Select font weight normal or bold
• Step Padding: Enter padding values for the top, right, bottom, and left in px

Progress Bar:

↑ Back to top

• Show Progress Bar: Display progress bar to track checkout completion
• Progress Bar Color: Select the color for the progress bar
• Progress Bar Background Color: Set the background color for the progress bar
• Progress Bar Height (px): Set the height of the progress bar in px

Step Index Style:

↑ Back to top

• Step Index width/height (px): Set the height and width of the step index in px
• Step Index Roundness (px): Set the roundness of the step index in px
• Index Font Color: Choose the font color of the step index
• Index Font Color Active: Set the active color of the step index
• Index Border Color: Select the border color of the step index
• Index Border Color – Active: Choose the active border color for the step index
• Index Background Color: Set the background color for the step index
• Index Background Color Active: Set the active background color for the step index

Additional Settings:

↑ Back to top

• Activate Step Click Navigation: Enable direct navigation between steps by clicking on step titles
• Force Accordion Layout for Mobile View: Automatically switch to accordion layout on mobile devices for better user experience

Button Settings

↑ Back to top

Next and Previous Button Settings:

↑ Back to top

• Previous Button Text: Enter the text for the previous button
• Next Button Text: Enter the text for the next button
• Button Position: Set the position of the button above or below the tab
• Button Alignment: Select button alignment left or right
• Hide the previous button on first step: Hides the previous navigation button only on the first checkout step for cleaner initial navigation
• Hide the next button for the last step: Hides the next navigation button only on the final checkout step
• Activate button styling: Enables custom styling options for the next/previous navigation buttons, including colors, borders, and hover effects
• Font size (px): Set the font size for the button text
• Font Color: Set the font color of the buttons
• Font Color Hover: Select hover font color for the buttons
• Background Color: Select the background color for the buttons
• Background Color Hover: Set the Hover Background color for the buttons
• Border Style: Select the border style of the button
• Border width (px): Set the border width in px for the buttons
• Border Color: Choose the border color for the buttons
• Border Radius (px): Set the border radius in px

Place Order Button Settings:

↑ Back to top

• Activate place order button styling: Enables custom styling specifically for the place order button, including colors and hover effects
• Font Color: Set the font color of the place order button
• Font Color Hover: Select the hover font color of the place order button
• Background Color: Set the background color of the place order button
• Background Color Hover: Choose the background hover color of the place order button
• Place Order Button Text: Write the text for the place order button