AeroCheckout- Custom WooCommerce Checkout Pages

  1. Home
  2. Docs
  3. AeroCheckout- Custom WooCommerce Checkout Pages
  4. Elementor
  5. How to Enable Progress Bar Steps In Case of a Multi-Step Checkout

How to Enable Progress Bar Steps In Case of a Multi-Step Checkout

AeroCheckout’s deep integration with Elementor lets you customize the checkout form widget.

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

Here are the steps you can follow to enable it in Elementor and customize it:

Step 1: Click on ‘Edit’ to edit the checkout page in Elementor

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

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

Step 3: Click on the ‘Steps’ option under ‘Sections’ tab

Enable the ‘Steps’ for your checkout form from here:

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

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.

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

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