{"id":243668,"date":"2020-04-20T13:38:20","date_gmt":"2020-04-20T13:38:20","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=243668"},"modified":"2025-09-22T06:23:06","modified_gmt":"2025-09-22T06:23:06","slug":"magento2-custom-checkout-steps","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/","title":{"rendered":"Custom Checkout Steps For Magento 2"},"content":{"rendered":"\n<p><a href=\"https:\/\/store.webkul.com\/magento2-multi-steps-checkout.html\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 Custom Checkout Steps<\/a> allows the admin to create special checkout steps that will be visible to the customer at the time of checkout.<\/p>\n\n\n\n<p>Meanwhile, the customer needs to follow those steps in order to complete the checkout. This is a perfect feature for those store owners that are keen to obey customer demands.<\/p>\n\n\n\n<p>Further, this module helps to add some particular steps in the product checkout process. Moreover, this feature will also amaze the customers as they will experience something out of the box.<\/p>\n\n\n\n<p>Note: This module is not compatible with the multi-address checkout feature. Also, if you want an extension that allows one-step checkout then check <a href=\"https:\/\/store.webkul.com\/magento2-one-step-checkout.html\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 Checkout Extension<\/a>.<\/p>\n\n\n\n<p>Watch the video tutorial below to understand the extension workflow:<\/p>\n\n\n\n<div class=\"wp-block-wk-block-youtube-video wp-block-wk-block--yt-video components-placeholder\"><div class=\"wk-block--yt-video-frame\"><div class=\"wk-block--yt-video-frame-request\" data-plyr-provider=\"youtube\" data-plyr-embed-id=\"_q_wAK0PxW4\"><div class=\"components-placeholder__instructions\">_q_wAK0PxW4<\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Features<\/h3>\n<\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Admin can create multiple custom checkout steps from the admin panel.<\/li>\n\n\n\n<li>Existing custom options can be edited by the admin.<\/li>\n\n\n\n<li>The admin can create a form using custom options from the admin panel.<\/li>\n\n\n\n<li>The admin can take actions on created custom steps like Enable, Disable, and Delete.<\/li>\n<\/ul>\n\n\n\n<p>&nbsp;<\/p>\n\n\n<div class=\"wk-index-wrap\">\n<h3 class=\"index-title\">Module Installation<\/h3>\n<\/div>\n\n\n<p>First, the customers will get a&nbsp;zip folder&nbsp;and they have to extract the contents of this zip folder from their system.<\/p>\n\n\n\n<p>After that, the extracted folder has an&nbsp;src&nbsp;folder, inside the src folder you have the&nbsp;app&nbsp;folder.&nbsp;<\/p>\n\n\n\n<p>The user needs to transfer this&nbsp;app&nbsp;folder&nbsp;into the Magento2 root directory on the server as shown below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"359\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/installtion-image2-1-1200x359.png\" alt=\"installtion-image2-1\" class=\"wp-image-244246\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/installtion-image2-1-1200x359.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/installtion-image2-1-300x90.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/installtion-image2-1-250x75.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/installtion-image2-1-768x230.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/installtion-image2-1.png 1295w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>After the successful installation, you have to&nbsp;run these commands&nbsp;in the&nbsp;Magento 2 root&nbsp;directory:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"># Run Commands<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\">php bin\/magento setup:upgrade<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">php bin\/magento setup:di:compile<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">php bin\/magento setup:static-content:deploy<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">php bin\/magento indexer:reindex<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">php bin\/magento cache:flush<\/pre>\n\n\n\n<p>After running the commands, the user has to flush the cache from the Magento admin panel by navigating through System &gt; Cache management&nbsp;as shown below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/4-1.png\" alt=\"Installation Of Magento2 Marketplace DHL Shipping\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Multi-Lingual Support<\/h3>\n\n\n\n<p>For multilingual&nbsp;support, the admin will navigate through&nbsp;Store &gt; Configuration &gt; General &gt; Locale Options.<\/p>\n\n\n\n<p>Select the&nbsp;locale&nbsp;as English (the language into which the admin wants to translate the store content).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkoutlocal-configuration.webp\" alt=\"local-configuration\" class=\"wp-image-436588\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkoutlocal-configuration.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkoutlocal-configuration-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkoutlocal-configuration-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkoutlocal-configuration-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Translation<\/h2>\n\n\n\n<p>For translating the module language, navigate through app &gt; code &gt; Webkul &gt; CustomCheckoutSteps &gt; i18n and edit the en_US.csv file.<\/p>\n\n\n\n<p>Further, translate the words on the right and upload the modified file to the same location. The filename of the translated file should be according to the language and region code like de_DE.csv.<\/p>\n\n\n\n<p>The user can edit the CSV like the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1041\" height=\"713\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/csv-1.png\" alt=\"csv-1\" class=\"wp-image-281912\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/csv-1.png 1041w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/csv-1-300x205.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/csv-1-250x171.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/csv-1-768x526.png 768w\" sizes=\"(max-width: 1041px) 100vw, 1041px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Module Configuration<\/h3>\n\n\n\n<p>On installing the module successfully, the admin can set the basic configurations by navigating through Stores &gt; Configurations &gt; Checkout Steps.<\/p>\n\n\n\n<p>The admin will find Checkout Steps Settings under the Checkout Steps tab, where the module status can be enabled as shown in the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1103\" height=\"441\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-configuration.webp\" alt=\"magento2-custom-checkout-configuration\" class=\"wp-image-436594\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-configuration.webp 1103w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-configuration-300x120.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-configuration-250x100.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-configuration-768x307.webp 768w\" sizes=\"(max-width: 1103px) 100vw, 1103px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Create Custom Checkout Step<\/h3>\n<\/div><\/div>\n\n\n\n<p>Thereafter, the admin will move forward to create the custom steps by navigating to Custom Checkout Steps &gt; Create Custom Steps under the admin panel.<\/p>\n\n\n\n<p>After that, the admin will find two sections Steps Details and Custom Options.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Steps Details<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Status: The admin can Enable\/ Disable the step by toggling this radio button.<\/li>\n\n\n\n<li>Step Title: The admin will enter the title of the step, that will be visible in the front end.<\/li>\n\n\n\n<li>Step Order: The admin will enter the sort order of the step.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1113\" height=\"584\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-create-steps.webp\" alt=\"magento2-create-custom-steps\" class=\"wp-image-436606\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-create-steps.webp 1113w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-create-steps-300x157.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-create-steps-250x131.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-create-steps-768x403.webp 768w\" sizes=\"(max-width: 1113px) 100vw, 1113px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1102\" height=\"721\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-steps-option.webp\" alt=\"create-custom-steps-options\" class=\"wp-image-436609\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-steps-option.webp 1102w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-steps-option-300x196.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-steps-option-250x164.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-steps-option-768x502.webp 768w\" sizes=\"(max-width: 1102px) 100vw, 1102px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Custom Options<\/strong><\/h4>\n\n\n\n<p>The admin can add any of the custom fields as per the requirement. The available options are visible in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-option-type.webp\" alt=\"magento2-custom-option-type\" class=\"wp-image-436617\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-option-type.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-option-type-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-option-type-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-option-type-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>The admin can use the following Option Type:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Field: The admin can enter the option with the text field.<\/li>\n\n\n\n<li>Area: The admin can use the text area for the custom option.<\/li>\n\n\n\n<li>Drop Down: The customer can use a drop-down option type for selecting one among many.<\/li>\n\n\n\n<li>Radio Button: The admin can use the radio button in case the customer can answer by toggling it.<\/li>\n\n\n\n<li>Checkbox: The admin can add the custom option with a checkbox.<\/li>\n\n\n\n<li>Multiple Select: The customer can use multiple select options for selecting more than one option available in the dropdown.<\/li>\n\n\n\n<li>Date: The admin can use this input type in a case to enter the date.<\/li>\n\n\n\n<li>Date And Time: The admin can use this input type in a case to enter the date and time.<\/li>\n\n\n\n<li>Time: The admin can use this input type in a case to enter the time.<\/li>\n<\/ul>\n\n\n\n<p>Finally, the admin will tap on the Save Steps button to save the changes.<\/p>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Manage Custom Checkout Step<\/h3>\n<\/div><\/div>\n\n\n\n<p>Just after clicking on the Save Steps button, the admin will land on the Manage Custom Steps Page.<\/p>\n\n\n\n<p>Also, the admin can navigate to the same page via the admin panel by navigating to Custom Checkout Steps &gt; Manage Custom Steps as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2240\" height=\"1022\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-list-of-custom-steps.webp\" alt=\"magento2-list-of-custom-steps\" class=\"wp-image-436846\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-list-of-custom-steps.webp 2240w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-list-of-custom-steps-300x137.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-list-of-custom-steps-1200x548.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-list-of-custom-steps-250x114.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-list-of-custom-steps-768x350.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-list-of-custom-steps-1536x701.webp 1536w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-list-of-custom-steps-2048x934.webp 2048w\" sizes=\"(max-width: 2240px) 100vw, 2240px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Under this page, the admin will be able to check the list of created custom steps. The admin can also edit the existing custom steps.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Admin End Actions &#8211; Magento 2 Custom Checkout Steps<\/h4>\n\n\n\n<p>Under the Manage custom steps page, the admin can also take some actions against the created options. <\/p>\n\n\n\n<p>The admin can Enable, Disable, and Delete the single or bulk of steps in just one click. The tab is visible as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2240\" height=\"1024\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-steps-actions.webp\" alt=\"magento2-custom-steps-actions\" class=\"wp-image-436848\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-steps-actions.webp 2240w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-steps-actions-300x137.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-steps-actions-1200x549.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-steps-actions-250x114.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-steps-actions-768x351.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-steps-actions-1536x702.webp 1536w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-steps-actions-2048x936.webp 2048w\" sizes=\"(max-width: 2240px) 100vw, 2240px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Front-End Visibility Of Checkout Process<\/h3>\n<\/div><\/div>\n\n\n\n<p>Once all the backend configurations are completed, the feature will be visible in the front end. The customer will add the product to the cart.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-customer-product-to-cart.png\" alt=\"webkul-magento2-custom-checkout-steps-customer-product-to-cart\" class=\"wp-image-243681\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-customer-product-to-cart.png 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-customer-product-to-cart-300x236.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-customer-product-to-cart-250x196.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-customer-product-to-cart-768x603.png 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<p>After that, the customer will move to the checkout page by clicking on the &#8220;View and Edit Cart&#8221; button. <\/p>\n\n\n\n<p>Under the cart icon or can directly initialize the checkout process by clicking on the Proceed to checkout button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-customer-proceed-to-checkout.png\" alt=\"webkul-magento2-custom-checkout-steps-customer-proceed-to-checkout\" class=\"wp-image-243680\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-customer-proceed-to-checkout.png 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-customer-proceed-to-checkout-300x236.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-customer-proceed-to-checkout-250x196.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-customer-proceed-to-checkout-768x603.png 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Further, the customer will click on the Proceed to Checkout button to reach the checkout page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-customer-view-and-edit-cart.png\" alt=\"webkul-magento2-custom-checkout-steps-customer-view-and-edit-cart\" class=\"wp-image-243683\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-customer-view-and-edit-cart.png 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-customer-view-and-edit-cart-300x236.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-customer-view-and-edit-cart-250x196.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-customer-view-and-edit-cart-768x603.png 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>On the checkout page, the customer will have to provide the shipping address and the shipping method first. <\/p>\n\n\n\n<p>The custom checkout steps will be visible here, by completing all the custom steps the customer will be able to place the order successfully.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"777\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-customer-select-shipping-address-1200x777.png\" alt=\"webkul-magento2-custom-checkout-steps-customer-select-shipping-address\" class=\"wp-image-258384\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-customer-select-shipping-address-1200x777.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-customer-select-shipping-address-300x194.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-customer-select-shipping-address-250x162.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-customer-select-shipping-address-768x497.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-customer-select-shipping-address.png 1302w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Finally, the custom step created by the admin will be visible as shown in the image below:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1200\" height=\"729\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-checkout-step-2-1200x729.png\" alt=\"webkul-magento2-custom-checkout-steps-checkout-step-2\" class=\"wp-image-258371\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-checkout-step-2-1200x729.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-checkout-step-2-300x182.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-checkout-step-2-250x152.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-checkout-step-2-768x467.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-checkout-step-2.png 1295w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>Here the customer can add the desired message and can click on the checkbox.<\/p>\n\n\n\n<p>*Note: These custom steps will depend on how the store owner creates it with the option types and sort order.<\/p>\n\n\n\n<p>Here in this, the admin has created two custom steps. The customer will enter the details in all the custom steps.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-custom-checkiout-step-three.png\" alt=\"webkul-magento2-custom-checkout-steps-custom-checkiout-step-three\" class=\"wp-image-243677\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-custom-checkiout-step-three.png 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-custom-checkiout-step-three-300x236.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-custom-checkiout-step-three-250x196.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-custom-checkiout-step-three-768x603.png 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Finally, the customer will select the payment option and accept the terms and conditions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-Customer-confirm-payment.png\" alt=\"webkul-magento2-custom-checkout-steps-Customer-confirm-payment\" class=\"wp-image-243678\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-Customer-confirm-payment.png 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-Customer-confirm-payment-300x236.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-Customer-confirm-payment-250x196.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/webkul-magento2-custom-checkout-steps-Customer-confirm-payment-768x603.png 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>And the customer will receive the success message once the order is completed as shown in the image below.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1200\" height=\"537\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-customer-order-completed-1200x537.png\" alt=\"webkul-magento2-custom-checkout-steps-customer-order-completed\" class=\"wp-image-258377\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-customer-order-completed-1200x537.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-customer-order-completed-300x134.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-customer-order-completed-250x112.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-customer-order-completed-768x344.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-customer-order-completed-604x270.png 604w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/webkul-magento2-custom-checkout-steps-customer-order-completed.png 1299w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Check-Out With Multiple Addresses<\/h3>\n<\/div><\/div>\n\n\n\n<p>This module is compatible with the default Magento <strong>Check Out with<\/strong> <strong>Multiple Addresses<\/strong>. The below snapshot shows, how you can proceed further.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"541\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-9-1200x541.png\" alt=\"Magento 2 Custom Checkout Steps\" class=\"wp-image-293335\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-9-1200x541.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-9-300x135.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-9-250x113.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-9-768x346.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-9.png 1292w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Here, click on checkout with multiple addresses and it will direct to ship to multiple addresses where the customer shall select the respective address. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"454\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-8-1-1200x454.png\" alt=\"Magento 2 Custom Checkout Steps\" class=\"wp-image-293338\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-8-1-1200x454.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-8-1-300x114.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-8-1-250x95.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-8-1-768x291.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-8-1.png 1324w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Here, the customer needs to select the shipping method as seen in the snapshot given below. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"585\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-20-1-1200x585.png\" alt=\"Magento 2 Custom Checkout Steps\" class=\"wp-image-293433\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-20-1-1200x585.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-20-1-300x146.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-20-1-250x122.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-20-1-768x374.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-20-1.png 1258w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Afterwards, additional checkout steps will be displayed which are created by the admin. <\/p>\n\n\n\n<p>Here the customer needs to enter the information and click on&nbsp;Continue to Billing Information&nbsp;button as seen in the snapshot given below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"411\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-12-1-1200x411.png\" alt=\"Magento 2 Custom Checkout Steps\" class=\"wp-image-293343\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-12-1-1200x411.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-12-1-300x103.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-12-1-250x86.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-12-1-768x263.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-12-1.png 1294w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Last, the order is successfully placed with multiple addresses.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"457\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-13-1-1200x457.png\" alt=\"Magento 2 Custom Checkout Steps\" class=\"wp-image-293344\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-13-1-1200x457.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-13-1-300x114.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-13-1-250x95.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-13-1-768x293.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/Screenshot-13-1.png 1343w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Admin End: Order and Order View<\/h3>\n\n\n\n<p>You can also create orders and manage them from the admin end. For this, you will have to go through Sales &gt; Orders.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1098\" height=\"719\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-orders.webp\" alt=\"magento2-custom-checkout-orders-view\" class=\"wp-image-436641\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-orders.webp 1098w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-orders-300x196.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-orders-250x164.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-checkout-orders-768x503.webp 768w\" sizes=\"(max-width: 1098px) 100vw, 1098px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Here you will have to click on create orders.<br>Now it will open a new window which will look like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1105\" height=\"575\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/new-order-customer-list.webp\" alt=\"create-new-order-customer\" class=\"wp-image-436653\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/new-order-customer-list.webp 1105w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/new-order-customer-list-300x156.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/new-order-customer-list-250x130.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/new-order-customer-list-768x400.webp 768w\" sizes=\"(max-width: 1105px) 100vw, 1105px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>And here you will have to either create a new customer in case of not have the right customer or you can choose the customer from the list. After choosing the customer it will look like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"613\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-for-customer-2-1200x613.webp\" alt=\"select-store-for-new-order-customer\" class=\"wp-image-436662\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-for-customer-2-1200x613.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-for-customer-2-300x153.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-for-customer-2-250x128.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-for-customer-2-768x393.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-for-customer-2-1536x785.webp 1536w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-for-customer-2-2048x1047.webp 2048w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Here you will have to choose the appropriate store to create the order for the customer. And now it will look like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1082\" height=\"693\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-for-customer-default-store-view.webp\" alt=\"magento2-create-new-order-store-view\" class=\"wp-image-436671\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-for-customer-default-store-view.webp 1082w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-for-customer-default-store-view-300x192.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-for-customer-default-store-view-250x160.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-for-customer-default-store-view-768x492.webp 768w\" sizes=\"(max-width: 1082px) 100vw, 1082px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Here, you will have to add a product for the customer which you want to order. Now after that, you will have to scroll down fill in the form asking for the address of the customer.<\/p>\n\n\n\n<p>And then again scroll down choose the shipping method and custom steps and then submit the order.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2240\" height=\"1760\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-with-the-additional-checkout-steps.webp\" alt=\"create-new-order-for-customer-with-additional-checkout\" class=\"wp-image-436774\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-with-the-additional-checkout-steps.webp 2240w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-with-the-additional-checkout-steps-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-with-the-additional-checkout-steps-1200x943.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-with-the-additional-checkout-steps-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-with-the-additional-checkout-steps-768x603.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-with-the-additional-checkout-steps-1536x1207.webp 1536w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/create-new-order-with-the-additional-checkout-steps-2048x1609.webp 2048w\" sizes=\"(max-width: 2240px) 100vw, 2240px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>The admin can view the details of the order that the customer places by navigating through Sales &gt; Orders, in the admin panel.<\/p>\n\n\n\n<p>The details of the custom steps can be seen under Additional Steps Information as shown in the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2240\" height=\"1760\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/additional-checkout-information-with-orders.webp\" alt=\"magento2-additional-steps-imformation\" class=\"wp-image-436776\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/additional-checkout-information-with-orders.webp 2240w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/additional-checkout-information-with-orders-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/additional-checkout-information-with-orders-1200x943.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/additional-checkout-information-with-orders-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/additional-checkout-information-with-orders-768x603.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/additional-checkout-information-with-orders-1536x1207.webp 1536w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/additional-checkout-information-with-orders-2048x1609.webp 2048w\" sizes=\"(max-width: 2240px) 100vw, 2240px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>That\u2019s all for the Magento 2 Custom Checkout Steps. Still, if you face any issues feel free to add a ticket and let us know your views to make the module better&nbsp;<a href=\"https:\/\/webkul.uvdesk.com\/\">https:\/\/webkul.uvdesk.com\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Magento 2 Custom Checkout Steps allows the admin to create special checkout steps that will be visible to the customer at the time of checkout. Meanwhile, the customer needs to follow those steps in order to complete the checkout. This is a perfect feature for those store owners that are keen to obey customer demands. <a href=\"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":281,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-243668","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Magento 2 Custom Checkout Steps | Multi Step Purchase<\/title>\n<meta name=\"description\" content=\"Magento 2 Custom Checkout Steps allow the admin to create additional checkout steps and custom form fields to collect more information.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Magento 2 Custom Checkout Steps | Multi Step Purchase\" \/>\n<meta property=\"og:description\" content=\"Magento 2 Custom Checkout Steps allow the admin to create additional checkout steps and custom form fields to collect more information.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-20T13:38:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-22T06:23:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/04\/installtion-image2-1-1200x359.png\" \/>\n<meta name=\"author\" content=\"Jyotsna Gautam\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jyotsna Gautam\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/\"},\"author\":{\"name\":\"Jyotsna Gautam\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/1f1af8655f9c9dfb883186e56acddf61\"},\"headline\":\"Custom Checkout Steps For Magento 2\",\"datePublished\":\"2020-04-20T13:38:20+00:00\",\"dateModified\":\"2025-09-22T06:23:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/\"},\"wordCount\":1438,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/04\/installtion-image2-1-1200x359.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/\",\"url\":\"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/\",\"name\":\"Magento 2 Custom Checkout Steps | Multi Step Purchase\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/04\/installtion-image2-1-1200x359.png\",\"datePublished\":\"2020-04-20T13:38:20+00:00\",\"dateModified\":\"2025-09-22T06:23:06+00:00\",\"description\":\"Magento 2 Custom Checkout Steps allow the admin to create additional checkout steps and custom form fields to collect more information.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/installtion-image2-1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/installtion-image2-1.png\",\"width\":1295,\"height\":387,\"caption\":\"installtion-image2-1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom Checkout Steps For Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/1f1af8655f9c9dfb883186e56acddf61\",\"name\":\"Jyotsna Gautam\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d92e9c5224d71d3acabc3438f3bc81bab8619c383d5aaee3a48f8dc5af259c87?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d92e9c5224d71d3acabc3438f3bc81bab8619c383d5aaee3a48f8dc5af259c87?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Jyotsna Gautam\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/jyotsnagautam-bd419\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Magento 2 Custom Checkout Steps | Multi Step Purchase","description":"Magento 2 Custom Checkout Steps allow the admin to create additional checkout steps and custom form fields to collect more information.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/","og_locale":"en_US","og_type":"article","og_title":"Magento 2 Custom Checkout Steps | Multi Step Purchase","og_description":"Magento 2 Custom Checkout Steps allow the admin to create additional checkout steps and custom form fields to collect more information.","og_url":"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2020-04-20T13:38:20+00:00","article_modified_time":"2025-09-22T06:23:06+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/04\/installtion-image2-1-1200x359.png","type":"","width":"","height":""}],"author":"Jyotsna Gautam","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Jyotsna Gautam","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/"},"author":{"name":"Jyotsna Gautam","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/1f1af8655f9c9dfb883186e56acddf61"},"headline":"Custom Checkout Steps For Magento 2","datePublished":"2020-04-20T13:38:20+00:00","dateModified":"2025-09-22T06:23:06+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/"},"wordCount":1438,"commentCount":2,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/04\/installtion-image2-1-1200x359.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/","url":"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/","name":"Magento 2 Custom Checkout Steps | Multi Step Purchase","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/04\/installtion-image2-1-1200x359.png","datePublished":"2020-04-20T13:38:20+00:00","dateModified":"2025-09-22T06:23:06+00:00","description":"Magento 2 Custom Checkout Steps allow the admin to create additional checkout steps and custom form fields to collect more information.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/installtion-image2-1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/04\/installtion-image2-1.png","width":1295,"height":387,"caption":"installtion-image2-1"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/magento2-custom-checkout-steps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Custom Checkout Steps For Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/1f1af8655f9c9dfb883186e56acddf61","name":"Jyotsna Gautam","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d92e9c5224d71d3acabc3438f3bc81bab8619c383d5aaee3a48f8dc5af259c87?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d92e9c5224d71d3acabc3438f3bc81bab8619c383d5aaee3a48f8dc5af259c87?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Jyotsna Gautam"},"url":"https:\/\/webkul.com\/blog\/author\/jyotsnagautam-bd419\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/243668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/281"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=243668"}],"version-history":[{"count":56,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/243668\/revisions"}],"predecessor-version":[{"id":507176,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/243668\/revisions\/507176"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=243668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=243668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=243668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}