Do you want to create a multi step checkout for your WooCommerce store in Elementor? Breaking the traditional single-page checkout into smaller, more manageable steps can make the process easier and improve the checkout experience for customers.
With the Woo Multi Step widget from The Plus Addons for Elementor you can create a WooCommerce multi step checkout in Elementor.
Best Used For:
- WooCommerce stores with high cart abandonment rates wanting to break the checkout into clear, manageable steps
- Multi-product online stores where a single long checkout page overwhelms new customers
- Subscription businesses needing a structured login, billing, and payment flow to reduce checkout friction
To check the complete feature overview documentation of The Plus Addons for Elementor Woo Builder, click here.
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have The Plus Addons for Elementor plugin installed and activated.
- This is a premium widget, and you need the PRO version of The Plus Addons for Elementor.
- Make sure the Woo Multi Step widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Woo Multi Step and activate.
How to Activate the Woo Multi Step Widget?
Go to
- The Plus Addons → Widgets
- Search the widget name and turn on the toggle.
Add Woo Multi Step
To create a multi step checkout page, open the checkout page with Elementor and add the Woo Multi Step widget.
Note: Make sure all the default WooCommerce pages are created.
Content
From the Style section, under the Layout tab, you can select from multiple predefined styles.
You will now see a checkout with four steps: Login, Coupon, Billing, and Payment.
To customize the checkout page layout further, see How to Edit WooCommerce Checkout Page in Elementor.
Navigation
From the Login Tab toggle, you can add or remove the login step. When enabled you can change the login step label from the Login field and from the Logged In field, you can manage the login message.
Enable the Hide Coupon Tab toggle to remove the coupon step. When disabled you can edit the coupon step label from the Coupon field.
From the Billing field, you can edit the billing step label.
Similarly, you can edit the payment step label from the Payment field.
Preview
From the Preview dropdown, you can select and preview a step on the editor. This will help you to style individual steps.
Login
This tab appears when you enable the Login Tab toggle from the Navigation tab.
From the User field, you can edit the text for the logged out users.
From the User Login field, you can edit the link text showing above the login form.
You can edit the message for logged out users from the Login Message field.
Billing/Shipping
From the Error Postfix field, you can edit the required field error message of the billing and shipping form.
Enable the Hide Order Notes toggle to hide the Order notes field from the form.
Payment
From the Place Order field, you can edit the place order button text on the payment step.
Order
From the Your Order field, edit the order summary section title.
Enable the Cart Page Link toggle to add a button for the cart page in the order summary section.
When enabled, you can edit the button text from the Cart Link Text field.
You can add an icon to the button from the Icon Library section and manage its position from the Position dropdown.
From the Style tab, you can customize the page further. To add urgency to your checkout flow, see How to Add a Scarcity Countdown Timer in WooCommerce Checkout, Cart & Product Pages.
You will now see a WooCommerce multi step checkout with navigation buttons for each step.
Read Further: How to Create a WooCommerce Order Tracking Page in Elementor?
