Step style

On this page, we can see how to choose the best style for your multi-step checkout and make sure it fits your theme style.

Go to the plugin panel in YITH > Multi-step Checkout > Steps options > Steps Style to select your favourite style among the five available ones and choose whether you prefer it to show horizontally or vertically.

Horizontal styles
Vertical styles

Let’s take a look at the available styles one by one:

Text style

Text style – horizontal
Text style – vertical

Style 1

Style 1 – horizontal
Style 1 – vertical

Style 2

Style 2 – horizontal
Style 2 – vertical

Style 3

Style 3 – horizontal
Style 3 – vertical

Style 4

Style 4 – horizontal
Style 4 – vertical

Mobile layout

Besides the style for your site desktop version, if you want to, you can also choose a different style to show on mobile devices that will automatically be set vertically.

On the same page, you can find more options to customize the style of your steps:

Based on the selected style you will see custom sets of options to customize the steps:

Text style

  • Separate steps with
  • Step text color

Style 1

  • Step text alignment
  • Step background color
  • Step text color
  • Square color
  • Square text color

Style 2

  • Step text alignment
  • Step background color
  • Step text color
  • Step border color
  • Circle color
  • Circle border color
  • Circle text color

Style 3

  • Step text alignment
  • Step background color
  • Step text color
  • Step border color

Style 4

  • Step text color
  • Step separator color


The following options, instead, apply to all styles:

  • Show the step number: enable this option to show the step number in the step. Keep it disabled to just show step name.
  • FadeIn and FadeOut Transition speed: set the transition speed in milliseconds.
  • Activate Ajax Validation: enable this option to make sure that the customer can go on with the next step only after all the mandatory fields have been filled out.
  • Use cookies in checkout: enable this option to save the details added by the customer in the checkout fields when they leave the checkout. In this way they will not have to start the checkout process from the very beginning and add all the details again.