--- title: "How to Create WooCommerce Multi Step Checkout in Elementor?" url: https://theplusaddons.com/docs/create-woocommerce-multi-step-checkout-in-elementor/ date: 2024-07-04 modified: 2026-06-03 lang: en author: "Aditya Sharma" description: "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..." image: https://theplusaddons.com/wp-content/uploads/2024/07/How-to-Add-Animated-Headings-In-Elementor-6-1024x565.jpg word_count: 636 --- # How to Create WooCommerce Multi Step Checkout in Elementor? ## - Utilizes the Woo Multi Step widget from The Plus Addons for Elementor to create a multi step checkout in WooCommerce. - Requires the PRO version of The Plus Addons for Elementor and the Elementor FREE Plugin to function properly. - Enables customization of each checkout step, including Login, Coupon, Billing, and Payment fields through the Style section. 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](https://theplusaddons.com/docs//woo-builder-settings-overview/).* ## Required Setup - [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated. - You need to have [The Plus Addons for Elementor plugin](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated. - This is a premium widget, and you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text). - 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.** ![](https://theplusaddons.com/wp-content/uploads/2024/07/woo-multi-step-activation.png) ## 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. ![](https://theplusaddons.com/wp-content/uploads/2024/07/woo-multi-step-content-new.png) 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](https://theplusaddons.com/docs/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. ![](https://theplusaddons.com/wp-content/uploads/2024/07/woo-multi-step-navigation.gif) 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. ![](https://theplusaddons.com/wp-content/uploads/2024/07/woo-multi-step-preview.gif) ### Login This tab appears when you enable the **Login Tab** toggle from the **Navigation** tab. ![](https://theplusaddons.com/wp-content/uploads/2024/07/woo-multi-step-login.png) 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. ![](https://theplusaddons.com/wp-content/uploads/2024/07/woo-multi-step-billing-shipping.png) 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. ![](https://theplusaddons.com/wp-content/uploads/2024/07/woo-multi-step-order.gif) 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](https://theplusaddons.com/docs/scarcity-countdown-timer-in-woocommerce-checkout-cart-product-pages/). You will now see a WooCommerce multi step checkout with navigation buttons for each step. ![](https://theplusaddons.com/wp-content/uploads/2024/07/woo-multi-step-demo.gif) ***Read Further***: *[How to Create a WooCommerce Order Tracking Page in Elementor?](https://theplusaddons.com/docs//create-a-woocommerce-order-tracking-page-in-elementor/)*