{"id":2748,"date":"2024-12-31T20:26:17","date_gmt":"2024-12-31T20:26:17","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/learn-to-create-checkout-like-step-progress-bar-in-magento-2-complete-code-explanation\/"},"modified":"2025-03-17T06:12:59","modified_gmt":"2025-03-17T06:12:59","slug":"create-checkout-like-step-progress-bar-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/create-checkout-like-step-progress-bar-in-magento-2\/","title":{"rendered":"Learn to Create Checkout-like Step Progress Bar In Magento 2 \u2013 Complete Code + Explanation"},"content":{"rendered":"\n

Do you want to create checkout-like step progress bar in Magento 2<\/strong><\/em>? In this blog post, I am going to share a detailed method to do that. <\/p>\n\n\n\n

Filling up never-ending forms online can be tiring.<\/p>\n\n\n\n

Let\u2019s admit it\u2014we all have ditched such lengthy forms many times. The end experience is very poor! If you are a Magento 2<\/a> store owner, you can make this experience better for your customers by adding a checkout-like progress bar in Magento 2 forms<\/a>.<\/p>\n\n\n\n

We all are acquainted with the checkout progress bar in Magento 2, where the top bar shows the finished\/unfinished steps by the customers.<\/p>\n\n\n

\n
\"Add<\/figure>\n<\/div>\n\n\n

The progress bar in Magento 2 checkout consolidates all the details on one page. Adding a progress bar in Magento 2 can be an effective strategy to increase form fill-ups. Just like us, other users also hate filling up lengthy forms. Breaking down the form into small steps can make the boring process look straightforward.<\/p>\n\n\n\n

In this micro post, we\u2019ll see how to add a checkout-like step progress bar in Magento 2.<\/em><\/p>\n\n\n\n

Let\u2019s dive into it.<\/p>\n\n\n\n

Code to Create Checkout-like Step Progress Bar in Magento 2<\/h2>\n\n\n\n

Creating a checkout-like step progress bar in Magento 2 is straightforward.<\/p>\n\n\n\n

We can re-use the core Magento 2 opc-progress-bar<\/code> class for the checkout progress bar in .phtml<\/code> file to do that.<\/p>\n\n\n\n

For example:<\/strong><\/em><\/p>\n\n\n\n

<ul class=\"opc-progress-bar\">\n<li class=\"opc-progress-bar-item _active\">\n<span data-bind=\"i18n: item.title, click: $parent.navigateTo\">Step 1<\/span>\n<\/li>\n<li class=\"opc-progress-bar-item \">\n<span data-bind=\"i18n: item.title, click: $parent.navigateTo\">Step 2<\/span>\n<\/li>\n<li class=\"opc-progress-bar-item \">\n<span data-bind=\"i18n: item.title, click: $parent.navigateTo\">Step 3<\/span>\n<\/li>\n<\/ul><\/pre>\n\n\n\n
Modify the above code snippet and add it to .phtml<\/code> file of the page where you want to show the progress bar.<\/p>\n\n\n\n
    \n
  • In the above code, the opc-progress-bar<\/code> class refers to the main progress bar in <ul><\/code> HTML tag.<\/li>\n\n\n\n
  • The opc-progress-bar-item<\/code> class refers to the individual step.<\/li>\n\n\n\n
  • The _active<\/code> class is added to the <li><\/code> tag for the currently active step.<\/li>\n\n\n\n
  • The _complete<\/code> class is added to the <li><\/code> tag for the completed steps.<\/li>\n<\/ul>\n\n\n\n
    Customize the above code to display the checkout-like progress bar in Magento 2 according to your requirements!<\/p>\n\n\n\n
    That\u2019s it! I hope this blog post has added something valuable to your Magento knowledge!<\/em><\/p>\n\n\n\n
    In case you still have any queries, feel free to comment.  <\/p>\n\n\n\n
    Do not forget to share this tutorial in the Magento community via social media.<\/p>\n\n\n\n
    Thank You!  <\/p>\n","protected":false},"excerpt":{"rendered":"
    Do you want to create checkout-like step progress bar in Magento 2? In this blog post, I am going to share a detailed method to do…<\/p>\n","protected":false},"author":38,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-2748","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=2748"}],"version-history":[{"count":1,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2748\/revisions"}],"predecessor-version":[{"id":3815,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2748\/revisions\/3815"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=2748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=2748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=2748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}