ThemeHigh
  • Plugins
  • Bundles New
    Documentation
    WooCommerce Essential Bundle
    Feature request
    WooCommerce Checkout page Bundle
    Translation project
    WooCommerce Product page Bundle
    Build your own Bundle
    Build Your Own Bundle (BYOB)
    New
    WooCommerce Essential Bundle
    WooCommerce Checkout page Bundle
    WooCommerce Product page Bundle
    Build Your Own Bundle (BYOB)

    Best Value

    An essential WooCommerce plugins bundle to boost your performance and sales.

    • Checkout field editor for WooCommerce - $49
    • Extra product option for WooCommerce - $39
    • Email customizer for WooCommerce - $39
    • Multistep checkout for WooCommerce - $39
    • Multiple Shipping address for WooCommerce - $39
    • Variation swatches for WooCommerce - $39
    $244$122 Only
    Know more

    Best Value

    An checkout WooCommerce plugins bundle to boost your performance and sales.

    • Checkout Field Editor for WooCommerce - $49
    • Multistep Checkout for WooCommerce - $39
    • Multiple Shipping Address for WooCommerce - $39
    $127$109 Only
    Know more

    Best Value

    An product WooCommerce plugins bundle to boost your performance and sales.

    • Extra Product Option for WooCommerce - $39
    • Variation Swatches for WooCommerce - $39
    • Email Customizer for WooCommerce - $39
    • Schedule Delivery for WooCommerce - $49
    $166$119 Only
    Know more

    HOT SALE

    Your Money, Your Choice - The Savings Are On Us!

    BYOB Offer

    Get the flexibility to create your perfect plugin bundle! Pick the plugins you need and enjoy an exclusive discount —only pay for what you use!

    $100 - $149: 25% Discount

    $150 - $199: 30% Discount

    $200 - $249: 40% Discount

    Above $250: 50% Discount

    *Min 2 quantity is required to claim this offer.

    Know more
  • Documentation
  • Support
  • Partners
  • Login
  • Getting Started
    • Overview...
  • Checkout Steps
    • How to display a Custom Section ...
    • Delete Newly Added Checkout Step...
    • Rearrange Checkout Steps...
    • How to Add a New Checkout Step?...
    • Default Checkout Steps...
  • Display Settings
    • Multistep Layout...
    • Display Progress Bar...
    • Step Index Style...
    • Additional Settings...
  • Advanced Settings
    • Other Step Settings...
    • Review Step Details...
    • Backup & Import Settings...
  • Button Settings
    • Next and previous button setting...
    • Place order Button Settings...
    • Back to cart Button Settings...
  • FAQ
    • Having trouble with the Latest V...
    • Frequently Asked Questions...
  • Compatible Plugin & Themes
    • Plugins & Themes...

Documentation/Multi-step Checkout For WooCommerce/Multistep Layout

Multistep Layout

Last updated on December 31, 2022

How to Choose a layout for the checkout step?

Navigate to WooCommerce > Multistep Checkout > Display Settings > Multistep Layout.

multistep_layout

Choose your favorite style from the fourteen different layouts based on whether you prefer it to show horizontally, vertically, or in accordion.

vertical_layout

Click on the Horizontal, Vertical, or Accordion display style based on your preference. Select the preferred checkout layout from any of the mentioned displayed styles.

https://www.themehigh.com/docs/wp-content/uploads/2022/12/checkout3-1.mp4

Horizontal Layouts

https://www.themehigh.com/docs/wp-content/uploads/2022/12/vertical-layout2-1.mp4

Vertical Layouts

https://www.themehigh.com/docs/wp-content/uploads/2022/12/accordion-1.mp4

Accordion Layouts

Once the layout is chosen, configure the display style options of the layout from the same page itself. Based on the layout you choose, the display style options get varied.

When the changes are made, click on the Save Changes button.

 

To know how to configure the display style for layout, see the below table.

Display Style for Layout

Step background color

Select a background color for the checkout steps.

Step background color – Active

Select a background color for the active checkout step.

Step text color

Select a text color for the checkout steps.

Step text color – Active

Select a text color for the active step from the corresponding colorpicker.

Content background color

Select a background color for the step content from the corresponding colorpicker.

Step font size

Provide the required font size for the checkout steps.

Step line height

Provide the required line height for the checkout steps.

Step font weight

Choose the apt font weight from the corresponding dropdown.

Step text transform

From the dropdown, choose whether the checkout steps needs to be shown in uppercase, lowercase, or in any other formats.

Step padding

Provide an apropriate padding for the checkout step.

Show different color for completed tabs

Enable the option to show the completed tabs in different color.

Completed Tab background color

Select a background color for the steps completed.

Note: This option only works if the ‘Activate Step-click Navigation’ option in the Additional Settings is disabled.

Completed Tab Text color

Select a background color for the text of completed steps.
Get the plugin

On this page

  • How to Choose a layout for the checkout step?

This article posted in Display Settings, Multi-step Checkout For WooCommerce, Pro Documentation

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

ThemeHigh

We develop innovative WordPress plugins and themes for e-commerce and other WordPress websites.

Resources
  • Documentation
  • Support
  • Blog
  • Bestsellers
  • Affiliates
  • Partners
Policy Information
  • Terms & Conditions
  • Privacy Policy
  • Support Policy
  • Refunds Policy
  • Licenses
Security
Payment Options

© 2025 ThemeHigh. All rights reserved.

Terms and conditions, features, support, pricing, and service options subject to change without notice.