ThemeHigh
  • Plugins
  • 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

© 2021 ThemeHigh. All rights reserved.

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