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

AeroCheckout- Custom WooCommerce Checkout Pages

  1. Home
  2. Docs
  3. AeroCheckout- Custom WooCommerce Checkout Pages
  4. Divi
  5. How to Enable Progress Bar Steps in a Multi-Step Checkout Template

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

Click on Enable Visual Builder situated on the navigation bar at the top of the page.

 

  • 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.

 

  • 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.

 

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

 

  • 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 as “breadcrumbs’.

 

  • 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.

 

  • 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.

 

 

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