Live Demo Fill out some fields to see the progress bar in action.
When your customers are filling out the checkout form, the progress bar indicates the amount of completion. It helps visualize the progress and makes it clear when the form is ready to submit.
Make filling out the form more engaging!
Create new icons by using your own images from the Media Library, or choose from the included icons.
You can place the generated
short-code anywhere in your website.
Compatible withWordPress 3.5+
Customize the style and color of the bars and text with the editor in the WordPress admin.
You can customize options like the height, corner radius and decoration of the bar. Enable text to show a percentage or count of the validated form fields.
Show a single bar for the entire form, or enable individual bars for the billing fields and shipping fields separately. You can enable the progress bars on top as well as below the fields.
The progress is dynamically adjusted when the number of required fields changes in the form, like when a customer enables the shipping fields.
You can also place a progress bar manually on the checkout page with a
After installing the progress bar works right out of the box . No need to configure anything.
Use the editor to preview and change the functionality, styles and colors. Located directly under
WooCommerce->Settings->Integrations in the WordPress admin.
See the documentation for detailed instructions.