--- 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-09-27 lang: en author: "Aditya Sharma" description: "A single long checkout form can feel overwhelming, especially on mobile - splitting it into steps (shipping, then payment, then review) reduces how much a shopper sees at once. The..." image: https://theplusaddons.com/wp-content/uploads/2024/07/How-to-Add-Animated-Headings-In-Elementor-6-1024x565.jpg word_count: 265 --- # How to Create WooCommerce Multi Step Checkout in Elementor? ## - The Woo Multi Step widget turns WooCommerce Checkout into a step-by-step wizard, and it uses 5 built-in visual styles for the step indicator. - The Plus Addons for Elementor Pro requires Elementor (free) installed and active, WooCommerce installed and active, and at least one published product before the widget is used. - Style 5 adds a Layout dropdown with Horizontal or Vertical arrangement, while the other 4 styles do not expose that choice. A single long checkout form can feel overwhelming, especially on mobile - splitting it into steps (shipping, then payment, then review) reduces how much a shopper sees at once. The **Woo Multi Step** widget turns WooCommerce Checkout into a step-by-step wizard, with 5 built-in visual styles for the step indicator. For the full settings tour of every Woo Builder widget, see [Woo Builder Settings Overview](https://theplusaddons.com/docs/woo-builder-settings-overview/). ***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/woocommerce-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Prerequisite:** [WooCommerce](https://wordpress.org/plugins/woocommerce/) installed and active, with at least one published product.- **Edition:** all Woo Builder widgets are part of **The Plus Addons for Elementor Pro** - a Pro licence is required.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Woo Multi Step** and turn its toggle on. ## Steps - Add the **Woo Multi Step** widget to your Checkout page template (in place of, or alongside, Woo Checkout).- From **Style**, choose one of 5 visual styles for the step indicator - **Style 1** (the default) through **Style 5**. ![Style visual-choice control with 5 options](https://theplusaddons.com/wp-content/uploads/2026/09/woo-builder-msc-style.webp) ### Style 5's Extra Layout Option Only when **Style** is set to **Style 5**, a **Layout** dropdown appears, choosing **Horizontal** (the default) or **Vertical** arrangement of the steps - the other 4 styles do not expose this choice. ![Layout dropdown, Horizontal vs Vertical, shown only under Style 5](https://theplusaddons.com/wp-content/uploads/2026/09/woo-builder-msc-style5-layout.webp) ## Settings Overview | Setting | What it does | Default | | ------- | ------------ | ------- | | Style | Visual style of the multi-step indicator (5 options). | Style 1 | | Layout | Horizontal or Vertical steps - Style 5 only. | Horizontal | ## Related Docs - [Woo Builder Settings Overview](https://theplusaddons.com/docs/woo-builder-settings-overview/)- [How to Edit WooCommerce Checkout Page in Elementor?](https://theplusaddons.com/docs/edit-woocommerce-checkout-page-in-elementor/)- [How to Edit WooCommerce Cart Page in Elementor?](https://theplusaddons.com/docs/edit-woocommerce-cart-page-in-elementor/) ## Frequently Asked Questions **Q: What do I need before creating a WooCommerce multi step checkout in Elementor?** A: Elementor free and WooCommerce must already be installed and active, and WooCommerce needs at least one published product. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH also requires a Pro licence for this widget because all Woo Builder widgets are part of The Plus Addons for Elementor Pro. That matters because the widget will not be available until the plugin is installed, activated, and the widget toggle is turned on under The Plus Addons > Widgets. **Q: Why would I split a WooCommerce checkout into multiple steps?** A: A single long checkout form can feel overwhelming, especially on mobile, so splitting it into shipping, payment, and review reduces how much a shopper sees at once. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH turns WooCommerce Checkout into a step-by-step wizard for that reason. In practice, this is most useful when the checkout page feels crowded or when you want the flow to feel less intimidating on smaller screens. **Q: Can I use the multi step checkout widget on an existing WooCommerce checkout page template?** A: The widget is meant to be added to your Checkout page template, either in place of Woo Checkout or alongside it. That gives you flexibility if you are rebuilding an existing checkout layout instead of starting from scratch. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this inside the Elementor editor, so the setup stays inside the same workflow you already use for WooCommerce page design. **Q: Which step indicator style should I choose for a multi step checkout?** A: Style 1 is the default, so it is the safest choice if you want the standard setup with no extra decisions. The widget includes 5 built-in visual styles for the step indicator, which lets you match the checkout to different design systems without changing the underlying flow. If you want a cleaner decision path, start with Style 1 and only switch styles when you need a different visual treatment. **Q: What extra layout options are available in Style 5?** A: Style 5 adds one extra Layout dropdown that lets you switch the steps between Horizontal and Vertical arrangement. That option only appears when Style is set to Style 5, which makes it different from the other four styles. Horizontal is the default here, so vertical is mainly useful when you want a stacked step indicator instead of a line running across the page. **Q: Where can I find more settings and related docs for Woo Builder widgets?** A: The full settings tour is covered in [Woo Builder Settings Overview](https://theplusaddons.com/docs/woo-builder-settings-overview/), which is useful when you want context beyond this single widget. Related guides include [How to Edit WooCommerce Checkout Page in Elementor?](https://theplusaddons.com/docs/edit-woocommerce-checkout-page-in-elementor/) and [How to Edit WooCommerce Cart Page in Elementor?](https://theplusaddons.com/docs/edit-woocommerce-cart-page-in-elementor/). For a live reference of the widget itself, use the [LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/woocommerce-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text).