How to Customize Step Styles?

1. Go to your WordPress dashboard.
2. From the sidebar, navigate to Woocommerce > Settings > LWN Multi-Step Checkout
3. Click on the Style tab.

How to Customize Colors?

1. Go to your WordPress dashboard.
2. From the sidebar, navigate to Woocommerce > Settings > LWN Multi-Step Checkout
3. Click on the Appearance tab.

Default Multi-Step Style

The default multi-step checkout style features circular step indicators with numbers and a connecting line between them. This clean, intuitive layout helps guide customers through each stage of the checkout process.

You can fully customize the appearance by adjusting the following colors:

• 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.

These settings allow you to match the stepper’s appearance with your store’s branding.

Breadcrumb Multi-Step Style

The Breadcrumb stepper style uses large, connected arrow-shaped steps to visually guide customers through the checkout process. Each step looks like a pointed tab, creating a clear left-to-right flow that highlights the current stage and progress.

You can customize the appearance of each breadcrumb step using the following color settings:

• 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 that have already been completed.

These options let you fine-tune the breadcrumb style to align with your store’s branding and improve visual clarity.

Icon Multi-Step Style

The Icon Style stepper builds on the default circle-based design by replacing step numbers with icons, offering a more visual and modern checkout experience. It includes a connector line and labeled steps, maintaining a clear flow while adding expressive icons for each stage.

You can customize its appearance with the following color settings:

• 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.

These settings allow you to personalize the icon-based stepper to match your store’s theme while providing a visually engaging checkout process.

Loading Animation

A loading animation is shown whenever a checkout step is processing—such as when saving form data or moving to the next step. You can choose from three animation styles to match your store’s aesthetic:

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

The color of the loading animation is controlled by the Highlight Color setting in the Colors tab, allowing you to easily match it with your store’s branding.

Primary & Highlight Colors

These color settings let you customize the main interactive elements of the multi-step checkout for a consistent and branded look:

Highlight Color: Used to highlight active form fields (like focused input fields and textareas), and also determines the color of the loading animation shown when a step is processing.

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.