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