WooCommerce Checkout Form Progress Bar

Live Demo Fill out some fields to see the progress bar in action.

Billing Details

Shipping Details

Visualize checkout form completion for customers

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.


Styles and Colors

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.


Multiple progress bars

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 [shortcode].


WooCommerce Integration

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.

One-click installation

See the documentation for detailed instructions.