Breadcrumbs are links that serves the navigation purposes and reveals the user’s location in your Website.
By default, Magento does not provide “Breadcrumbs” on the Checkout Page. This tutorial will show you how to display “Breadcrumbs” on the Checkout Page in Magento 2.
Open checkout_index_index.xml file
1. Open your Magento store root folder (it’s Magento installation dir) and go to the app > design > frontend > Zemez > themeXXX > Magento_Checkout > layout folder.
- “Zemez” is your Magento theme vendor name, may be TemplateMonster or Jetimpex.
- XXX is your current theme number.
2. Open the checkout_index_index.xml file and paste the code you see below before the </body> tag.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <referenceBlock name="breadcrumbs"> | |
| <action method="addCrumb"> | |
| <argument name="crumbName" xsi:type="string">Home</argument> | |
| <argument name="crumbInfo" xsi:type="array"> | |
| <item name="title" xsi:type="string">Home</item> | |
| <item name="label" xsi:type="string">Home</item> | |
| <item name="link" xsi:type="string">/</item> | |
| </argument> | |
| </action> | |
| <action method="addCrumb"> | |
| <argument name="crumbName" xsi:type="string">Shopping Cart</argument> | |
| <argument name="crumbInfo" xsi:type="array"> | |
| <item name="title" xsi:type="string">Shopping Cart</item> | |
| <item name="label" xsi:type="string">Shopping Cart</item> | |
| <item name="link" xsi:type="string">/checkout/cart</item> | |
| </argument> | |
| </action> | |
| </referenceBlock> |
by * In case there is no checkout_index_index.xml file in the layout folder, you have to create new one with such content (note the file format, it should be .xml):
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0"?> | |
| <!-- | |
| /** | |
| * Copyright © 2015 Magento. All rights reserved. | |
| * See COPYING.txt for license details. | |
| */ | |
| --> | |
| <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> | |
| <body> | |
| <move element="logo" destination="header-wrapper.grid-container"/> | |
| <referenceBlock name="page.preloader" remove="true" /> | |
| <referenceBlock name="breadcrumbs"> | |
| <action method="addCrumb"> | |
| <argument name="crumbName" xsi:type="string">Home</argument> | |
| <argument name="crumbInfo" xsi:type="array"> | |
| <item name="title" xsi:type="string">Home</item> | |
| <item name="label" xsi:type="string">Home</item> | |
| <item name="link" xsi:type="string">/</item> | |
| </argument> | |
| </action> | |
| <action method="addCrumb"> | |
| <argument name="crumbName" xsi:type="string">Shopping Cart</argument> | |
| <argument name="crumbInfo" xsi:type="array"> | |
| <item name="title" xsi:type="string">Shopping Cart</item> | |
| <item name="label" xsi:type="string">Shopping Cart</item> | |
| <item name="link" xsi:type="string">/checkout/cart</item> | |
| </argument> | |
| </action> | |
| </referenceBlock> | |
| </body> | |
| </page> |
3. Important: Save the file changes (or the file) and clear Magento cache.
Test the Results
Go to your Magento store Frontend (open you store in a browser), add any product to the Card and go to Checkout Page. The “Breadcrumbs” will be there.
