WooFunnels Documentation
Get unstuck with our helpful reference material

Checkout Pages

How to Enable Progress Bar Steps in a Multi-Step Checkout Template

You can choose to show the progress steps in one of two ways - Tabs or Breadcrumbs.

Here is how you can enable the same:

Step 1: Click on ‘Enable Visual Builder’ to start editing

Go to the checkout page and click on Enable Visual Builder situated on the navigation bar at the top of the page.

Enable Visual Builder

Step 2: Click on the checkout form module and open settings

Once you click on the checkout form module, you will be shown a bar with a number of options.

Click on the cogwheel icon, which is the symbol for settings. This would open up a window with all the customizing opens available for you.

Divi Checkout form module settings

Step 3: Choose ‘Steps’ under the ‘Content’ tab

The window that opens up will show you different drop-down menus under 3 tabs - Content, Design, and Advanced.

Click on ‘Steps’ under the ‘Content’ tab to open the dropdown menu for it.

Choose ‘Steps’ under the ‘Content’ tab

In the options shown in the menu, click on the toggle that says ‘Enable Steps’ to make the steps visible to the user.

toggle to enable the steps

Step 4: Choose the type of display you want to use for the steps

You can choose to have your steps be displayed as ‘Tabs’ or 'Breadcrumbs’.

Type of checkout steps

Step 5: Customize the look of the steps

Change the color, typography, margin gap and so much more on Divi.

Just click on ‘Steps’ under ‘Design’ and style them as you want.

Style your checkout steps

Step 6: Click on the green tick (✓) to save

Once you’re done editing, click the green-colored tick () icon on the bottom right of the settings window to save the changes made.

Press Done

That’s it! Now you are ready to style the rest of your page ahead.

Increase your sales, starting today.

Get WooFunnels Now
chevron-down