LWN Pro
Knowledge Base
Home/Knowledge Base/LWN Multi-Step Checkout Guide/Styles & Colors

Guide

LWN Multi-Step Checkout

Styles & Colors

LWN Multi-Step Checkout Guide·7 sections

Table of contents

This section lets you fully customize the look and feel of your multi-step checkout. Adjust step styles, colors, loading animations, and more.

How to Customize Step Styles?

  • Go to your WordPress dashboard.
  • From the sidebar, navigate to WooCommerce > Settings > LWN Multi-Step Checkout.
  • Click on the Style tab.
Screenshot of the Style tab in Multi-Step Checkout plugin showing stepper layout style options.
Choose the layout style for the multi-step checkout process.

How to Customize Colors?

  • Go to your WordPress dashboard.
  • From the sidebar, navigate to WooCommerce > Settings > LWN Multi-Step Checkout.
  • Click on the Appearance tab.
Screenshot of the Appearance or Colors tab in Multi-Step Checkout settings showing color customization.
Customize the colors and visual appearance of the checkout stepper.

Default Multi-Step Style

The default multi-step checkout style features circular step indicators with numbers and a connecting line. You can fully customize the appearance:

  • Border Color: Defines the color of the circle borders and the connector line.
  • Circle Background Color: Background color for inactive steps.
  • Circle Text Color: Text color inside inactive step circles.
  • Active Circle Background Color: Background color for the current (active) step.
  • Active Circle Text Color: Text color for the current (active) step.
  • Completed Circle Background Color: Background color for steps that have been completed.
  • Completed Circle Text Color: Text color for completed steps.
  • Label Text Color: Color used for the step labels beneath or beside each circle.
Animated GIF showing default stepper style and color settings in Multi-Step Checkout plugin and how it displays on the checkout page.
See how the default style and color settings appear on the checkout page.

Breadcrumb Multi-Step Style

The Breadcrumb stepper style uses large, connected arrow-shaped steps to visually guide customers through the checkout.

  • Breadcrumb Background Color: Default background color for each step.
  • Breadcrumb Text Color: Text color for step labels.
  • Breadcrumb Border Color: Color of the triangular pointer (arrow) following each step.
  • Breadcrumb Hover Background Color: Background color when hovering over steps.
  • Breadcrumb Hover Text Color: Text color on hover.
  • Breadcrumb Active Background Color: Background color of the currently active step.
  • Breadcrumb Active Text Color: Text color of the currently active step.
  • Breadcrumb Completed Background Color: Background color for steps already completed.
Animated GIF showing breadcrumb style and color settings in Multi-Step Checkout plugin.
Customize breadcrumb appearance and see the result on the checkout page.

Icon Multi-Step Style

The Icon Style stepper builds on the default circle-based design by replacing step numbers with icons.

  • Icon Style Step Label Color: Color of the step labels displayed below or beside the icons.
  • Icon Style Step Connector Color: Color of the connector line linking the steps.
  • Icon Style Step Icon Color: Background color of the inactive step icons.
  • Icon Style Active Step Color: Highlight color for the currently active icon.
  • Icon Style Completed Step Background: Background color for icons of completed steps.
  • Icon Style Completed Step Text: Icon (or symbol) color for completed steps.
Stepper Icon Style in Action
Choose icon styles for checkout steps and preview them live.

Loading Animation

A loading animation is shown whenever a checkout step is processing — such as when saving form data or moving between steps.

  • Spinning Circle (default)
  • Pulse Bars
  • Grid Dots

The color of the loading animation is controlled by the Highlight Color setting in the Colors tab.

Animated GIF showing the loading animation toggle and highlight color setting in Multi-Step Checkout
Enable and style the loading animation using your highlight color.
The Loading spinner style in LWN Stepper Checkout Pro
The Default Loading Animation
The pulse bars spinner style in LWN Stepper Checkout Pro
The Pulse Bars Loading Animation
The Grid spinner style in LWN Stepper Checkout Pro
The Grid Loading Animation

Primary & Highlight Colors

These color settings let you customize the main interactive elements of the multi-step checkout.

  • Highlight Color: Used to highlight active form fields (like focused inputs), and also determines the loading animation color.
  • Primary Button Color: Sets the background color of the Next button, and also applies to the border and text of the Previous button.
  • Primary Button Text Color: Defines the text color used on the Next button.
Screenshot of Multi-Step Checkout plugin settings showing Primary Button Color, Primary Button Text Color, and Highlight Color options.
Control the colors of buttons, focus states, and loading animation.
Screenshot of checkout page showing styled Next and Previous buttons with custom colors from the Multi-Step Checkout plugin.
See how the customized button colors appear on the checkout page.
PreviousGeneral Settings NextCustomize Texts

On this page