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.

Step customization

In this section you will be able to customize the options related to each step.

So, go to YITH > Multi Step Checkout > Steps Options and scroll down to Steps Customization, where you will find the options grouped in a dropdown for each step.

Let’s look at them one by one.

Login

  • Login label: customize the name of the Login step.
  • Allow guest checkout: enable this option to allow customers to checkout as guest, so without creating an account. If you enable this option they will be able to see a Skip login button.
  • Allow customer login: choose whether to allow customer login here or not. If enabled, you’ll see the following options show up:
    • Message for returning customers (not available for “My Account” style): you will be able to set up a custom message to invite your customers to login. This message is only visible if you do not enable the login with the same style as in My Account page (option below).
    • Use the “My Account” login/register box: enable this option if you want to use the same Login box and Register box (if enabled below) that is shown on My Account page.
    • Enable customer registration for “My Account” Style: choose whether to include the Register box in the Checkout or not.
  • Login icon: in this option, you can choose whether to hide the icon, use one of the default one included in the plugin or upload your custom one:
    • No icon
    • Use default icon

    • Upload custom icon

Billing

  • Merge billing and shipping in a single step: enable this option to create just one step from the two related to “Billing” and “Shipping”. If you merge them there will only be one step and you can edit the name of the step in the option below.
  • Billing label: customize the name of the step here.
  • Billing icon: in this option, you can choose whether to hide the icon, use one of the default one included in the plugin or upload your custom one:
    • No icon
    • Use default icon
    • Upload custom icon

Shipping

This step will be automatically disabled if the Billing & Shipping steps have been merged in the Billing settings as explained above.

If they are kept separated, instead, you will be able to find the following options:

  • Hide shipping step: you can also decide whether to hide the shipping step and all its content. This is particularly useful when you sell digital products that do not need shipping.
  • Shipping label: customize the name of the step here.
  • Shipping icon: in this option, you can choose whether to hide the icon, use one of the default one included in the plugin or upload your custom one:
    • No icon
    • Use default icon
    • Upload custom icon

Order Info

  • Merge billing and shipping in a single step: enable this option to create just one step from the two related to “Order Info” and “Payment”. If you merge them there will only be one step and you can edit the name of the step in the option below.
  • Order Info label: customize the name of the step here.
  • Order info icon: in this option, you can choose whether to hide the icon, use one of the default one included in the plugin or upload your custom one:
    • No icon
    • Use default icon
    • Upload custom icon

Payment

  • Show order total amount in Payment tab: this allows you to show the total order amount at the bottom of the Payment tab just above the Place order button.
  • Payment info icon: in this option, you can choose whether to hide the icon, use one of the default one included in the plugin or upload your custom one:
    • No icon
    • Use default icon
    • Upload custom icon

Button options

Go to YITH > Multi Step Checkout > Button options to customize the buttons managed by this plugin. In this tab you will find two sections, one for Prev/Next buttons and one for the Back to cart button.

Prev/Next button

If you enable them, the navigation buttons “Previous” and “Next” will be displayed in the bottom part of each step of the purchase process: these allow users to navigate through the previous or the next step.

If you prefer keeping them disabled, users will be able to click on the step on the frontend to navigate between steps.

Let’s see which options are available if you enable these buttons.

  • Show Prev/Next button: enable or disable the navigation buttons.
  • Hide Prev button in last step: remove the Prev button in the last step and only leave the Proceed to Checkout button
  • Label for prev button: enter here your custom text for the button that lets users go back to the previous step
  • Label for next button: enter here your custom text for the button that lets users go forward to the next step
  • Label for Skip login button: enter here your custom text for the button that lets users skip the login and check out as guests. You can enable/disable this button in the Login step (see here).
  • Buttons style: use the same style for the navigation buttons added by the plugin and choose between:
    • Use theme buttons: the buttons will inherit the style of your theme.
    • Set custom style: you will be able to customize the button with the following options:
  • Enable “Scroll to top” effect: enable this option to make sure that whenever your users go to a new step, they are taken back to the top of the page.
  • “Scroll to top” anchor: you can edit the anchor for the Scroll to top effect and make sure that users are taken exactly to the point that you want to show. By default the anchor is #checkout_timeline.

Back to cart button

  • Show Back to cart button: enable this option to show this button and give users the possibility to go back to the Cart when they are in the checkout
  • Hide Back to cart button in the last step: this option allows you to keep your Checkout as clean as possible and reduce the cart abandonment rate and keep them focussed on finalising their purchase.
  • Label for Back to cart button: enter here your custom text for the button that lets users go back to the cart
  • Button style: choose the style for this button between:
    • Use theme buttons: the buttons will inherit the style of your theme.
    • Set custom style: you will be able to customize the button with the following options:

Thankyou” and “My Account” page

From the tab called Pages options in the plugin settings YITH > Multi-step Checkout, you will be able to customize more options for your checkout page on the frontend and the pages “Order received” and “My account”.

Checkout page

Here you can customize the width of the checkout container as a percent value in relation to the width of the steps timeline.

So, if you set it up to 50%, your checkout container will be half of the steps width and center aligned, like this:

“Order received” and “My account” page

In this section you will be able to set the style for both “Order received” and “My account” pages, and choose either to inherit the theme style or to customize it, using the following options:

  1. Order details background color
  2. Order details highlight color
  3. Table header background color
  4. Text table header color
  5. Table row background color
  6. “Order details” color