Display Progress Bar

Last updated on December 31, 2022

The progress bar lets the users know how far they completed the checkout steps and how much rest they need to complete.

To enable the Progress bar option,

Navigate to WooCommerce > Multistep Checkout > Display Settings > Progress Bar.
Enable the Show progress bar below multistep layout option to display the progress bar.
Once the option is enabled, choose one of the appropriate styles for the progress bar from the three different styles.


Progress bar color	Select a color that shows the progress of the checkout steps.
Progress bar background color	Select a background color for the progress bar.
Progress bar height	Provide the required height for the progress bar.
Progress bar step color – Active	Select a color for the progress bar that indicates the active step. Note: This option is only available if you have chosen progress bar showing step progression.

4. When the changes are done, click on the Save Changes button.