New: Magento 2 Hyvä Theme Development – book a free 20-minute performance review. New: Magento 2 Hyvä Theme Development – book a free 20-minute performance review. New: Magento 2 Hyvä Theme Development – book a free 20-minute performance review.

How to add Custom Tab in Customer Account in Magento 2

By the default Magento 2 setting, customers are automatically redirected to their account dashboard once they signup or log in. On the dashboard, the customer can see many tabs such as My Account, My Orders, and My Wishlist.

To enhance customer experience during shopping, there are some features such as requesting refunds, checking demos, and other custom requirements that should be added to the customer account panel.

But these features are not available in the default Magento 2. Therefore, you need to add these tabs manually.

To add a custom tab in the customer account dashboard, continue to read this article.

Steps to add a Custom Tab in Customer Account:

  • Step 1: Create Customer Account Layout
  • Step 2: Create Index Layout
  • Step 3: Create Index Page
  • Step 4: Create Template File

Step 1: Create Customer Account Layout

The very first thing you need to do is to create a customer_account.xml file in the below path: Magespark/Module/view/frontend/layout


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="customer_account_navigation">
            <block class="Magento\Framework\View\Element\Html\Link\Current" 
                   name="customer-account-navigation-custom">
                <arguments>
                    <argument name="path" xsi:type="string">routename/customer/index</argument>
                    <argument name="label" xsi:type="string">My Custom Tab</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

Step 2: Create Index Layout

Once you have created the above file, now you need to create routename_customer_index.xml in the path Magespark/Module/view/frontend/layout, which includes the below code:


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <update handle="customer_account"/>
    <body>
        <referenceBlock name="page.main.title">
            <action method="setPageTitle">
                <argument translate="true" name="title" xsi:type="string">My Custom Tab</argument>
            </action>
        </referenceBlock>

        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template"
                   name="my_tab"
                   template="Vendor_Module::mytab.phtml">
            </block>
        </referenceContainer>
    </body>
</page>

Step 3: Create Index Page

Now, create Index.php file in the patch Magespark/Module/Controller/Customer.


<?php
namespace Magespark\Module\Controller\Customer;

class Index extends \Magento\Framework\App\Action\Action {
    public function execute() {
        $this->_view->loadLayout();
        $this->_view->renderLayout();
    }
}
?>

Step 4: Create Template File

In the last, you will have to follow the below path in order to add custom tab in customer account dashboard.

Go to Magespark/Module/view/frontend/templates, and create mytab.phtml.


<?php
// Add Some Code Here for design
?>

<span>My Custom Tab..</span>

Thus, following the above steps, you can easily add a custom tab in customer account dashboard in Magento 2. Hope this guide will be helpful for you.

If you have any questions or face any kind of issues while adding a custom tab in customer account dashboard, please feel free to contact us.

Talk to a Hyvä expert
Loading...