The Step index style section provides more editing options for index display settings.
To configure the index style properties:
- Navigate to WooCommerce > Multistep Checkout > Display Settings > Step Index Style.
- Enable the Activate checkmark symbol for completed step option to display the checkmark for completed steps.
- After the option is enabled, choose the preferred border color, background color, and tick color for the checkmark from the corresponding color pickers.
- From the same page itself, you can configure the step index style like index height, roundness, text color, border color, and much more.
Note: The checkmark for completed steps only works if the ‘Activate step-click navigation’ option in Additional Settings is disabled.
Refer to the below table to configure the same.
Step Index Style
Step index width/height
|Enter the required height for the step index.
Note: Height/width of the index is applicable only if the value is less than the line height.
Step index roundness
|Enter the required size for the icon roundness. The entered value should be in px or %.
Space between border and index
|Provide the required space between the border and index.
Index font color
|Select the index font color from the corresponding color picker.
Index font color – Active
|Select the index font color for the active step.
Index border color
|Select an apt color for the index border.
Index border color – Active
|Select an apt border color for the index of the active step.
Index background color
|Select a background color for the index.
Index background color – Active
|Select a background color for the index of the active step.