1

Attempting to remove progress bar in checkout page in magento2. Unable to hide the progress Bar

5

For people looking for the right solution.

Create the following file in your custom theme:

app/design/frontend/Vendor/ThemeName/Magento_Checkout/layout/checkout_index_index.xml

And add the following code:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="progressBar" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                        <item name="componentDisabled" xsi:type="boolean">true</item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page
1
  • Please be aware that doing this will stop the checkout Step 2 (Payments) from working properly if you refresh the page. Seems there is something in the progressbar component which indicates to the page which step it is on, when the page is refreshed. Alternative is to hide using css. Jun 12 '20 at 10:26
0

This may not answer your question fully, however, will deffinitally help you find the corresponding file and hopefully teach something new!

To find a .phtml file for a element of the front end page, you can enable "Template Path Hints" which is a tool that adds little tags to shown the location of a particular code within the Magento file structure.

To enable the feature:

  1. Go to Magento 2 admin panel and login with your credentials.
  2. Go to Stores –> Configuration.
  3. Select Developer option from the Advanced tab at the end.
  4. Open Debug dropdown and set Enabled Template Path Hints for Storefront to yes.
  5. Click to Save Config.

NOTE: To restrict the hints, you can add your IP address in the “Developer Client Restrictions”.

Now you should see something like this on your front-end:

enter image description here

0

Please try this:

1.Find :

vendor/magento/module-checkout/view/frontend/web/template/progress-bar.html

Copy this progress-bar.html

app/design/vendor/your_theme/Magento_Checkout/web/template/progress-bar.html

Under this file you can find the below code,make hide or remove these lines

<li class="opc-progress-bar-item" data-bind="css: item.isVisible() ? '_active' : ($parent.isProcessed(item) ? '_complete' : '')">
            <span data-bind="i18n: item.title, click: $parent.navigateTo"></span>
</li>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.