Premium settings

On this page, we can 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 favorite style among the five available and choose whether you prefer it to show horizontally or vertically.

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

Text style

Style 1

Style 2

Style 3

Style 4

Mobile layout

Besides the style for your site’s desktop version, if you want, 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 different 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 only show the 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 and add all the details again.

In this section, you can customize the options related to each step.

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 of the following steps:

• Login
• Billing
• Shipping
• Order info
• Payment

Let’s analyze 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 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): 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 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: through this option, you can choose whether to hide the icon, use one of the default ones included in the plugin or upload your custom icon:
  • No icon
  • Use default icon
    
    
  • Upload custom icon
    
    

Billing

• Merge billing and shipping in a single step: enable this option to create only one step from the two related to “Billing” and “Shipping”. By merging them, there will be one step only and you can edit its name in the option below.
• Billing label: customize the name of the step here.
• Billing icon: 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 see the following options:

• Hide shipping step: decide whether to hide the shipping step and all its content or not. 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: 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 order info and payment in a single step: enable this option to create only one step from the two related to “Order Info” and “Payment”. By merging them, there will be one step only and you can edit its name in the option below.
  
• Order Info label: customize the name of the step here.
• Order info icon: 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: enable this option to show the total order amount at the bottom of the Payment tab just above the Place order button.
  
• Payment info icon: 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

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 show at the bottom 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 can click on the step on the frontend to navigate between steps.

Let’s see which options are available when 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 your custom text for the button that lets users go back to the previous step.
• Label for next button: enter your custom text for the button that lets users go forward to the next step.
• Label for Skip login button: enter 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 from:
  • Use theme buttons: the buttons will inherit the style of your theme.
  • Set custom style: by selecting this option, you can further customize the colors and label colors of the button.

• 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 focused on finalizing their purchase.
• Label for Back to cart button: enter your custom text for the button that lets users go back to the cart.
• Button style: choose the style for this button from:
  • Use theme buttons: the buttons will inherit the style of your theme.
    • Set custom style: you can customize the colors of the button and button label.

From the tab called Pages options in the plugin settings, you can 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 can set the style for both “Order received” and “My account” pages, and choose whether 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