WooFunnels Documentation
Get unstuck with our helpful reference material

Checkout Pages

How to Enable Progress Bar For Multi-Step Checkouts

Our checkout pages deeply integrate with Elementor and let you have complete control over the look and feel of your checkouts.

When you're using a multi-step checkout page template, you can choose to enable the Progress Bar for your checkout form.

Here are the steps you need to follow:

Step 1: Click on 'Edit Template' to customize the checkout page in Elementor

To customize your Checkout page, click on the Edit Template button.

Step 2: Click on the pencil icon of the Checkout Form Widget

edit your checkout form

When you do so, all the possible settings will show up on the left side panel.

Step 3: Click on the 'Steps' option under the 'Sections' tab

Enable the 'Steps' for your checkout form from here:

enable the checkout steps

You can also select the type of progress bar you want to show - Breadcrumbs or Tabs.

select the type of steps

Apart from that, you can also set the title for the steps.

Step 4: Go to the 'Style' tab to customize the Progress Bar

Click on the 'Style' tab on the left side panel.

Here, under the 'Steps' section, you'll get to see a bunch of customizations available.

style to customize the checkout progress bar

You can:

  • Change the color of the active step and the inactive step
  • Make changes to the typography of the Step heading and sub-heading
  • Set the Progress Bar border-radius and margin

Step 5: Click on the 'Update' button to save your changes

Update the checkout page

That's it! Now you can click on the 'View' button to preview your checkout page and see how the steps appear.

Increase your sales, starting today.

Get WooFunnels Now