How to Add Custom Tab in Customer Account Dashboard in Magento 2

In this tutorial, Today I will explain about how to add custom tab in customer account dashboard in Magento 2. When you are logged in successfully after that, you will redirect to customer account dashboard page. On customer account dashboard page, there are many tabs available like My Account, My order, Stored Payment Methods, Address book etc.

However, when you want to add your custom tab after default custom tab and call your custom template file then, how to do that?

Let’s follow the below steps to add custom tab in customer account dashboard in Magento 2.

You may also like this :

1) First of all, Create customer_account.xml file in your module at app/code/RH/Helloworld/view/frontend/layout/ and paste the below code :

Copy Code


<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Created By : Rohan Hapani
 */
-->
<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-mycustomtab">
            <arguments>
               <argument name="path" xsi:type="string">helloword/index/index</argument>
               <argument name="label" xsi:type="string">My Custom Tab</argument>
            </arguments>
         </block>
      </referenceBlock>
   </body>
</page>

Using this above code, you can set label and URL for your custom tab. You need to set your controller path in path argument.

2) Then, Create helloworld_index_index.xml file to add template file in your controller layout at app/code/RH/Helloworld/view/frontend/layout/ and paste the below code :

Copy Code


<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Created By : Rohan Hapani
 */
-->
<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 Page</argument>
         </action>
      </referenceBlock>
      <referenceContainer name="content">
         <block class="Magento\Framework\View\Element\Template" name="my_custom_page" template="RH_Helloworld::customfile.phtml" />
      </referenceContainer>
   </body>
</page>

3) Create Index.php action file to render your custom layout in your custom tab at app/code/RH/Helloworld/Controller/Index/ and paste the below code :

Copy Code


<?php
/**
 * Created By : Rohan Hapani
 */
namespace RH\Helloworld\Controller\Index;

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

4) In Last, Create customfile.phtml template file to display template file in your custom tab at app/code/RH/Helloworld/view/frontend/templates/ file path and paste the below code:

Copy Code


<?php // Add your code to display in your custom tab. ?>

That’s it !!!

Finally, you just need to clean cache using below command :

Copy Code

php bin/magento c:c

I hope this blog is easy to understand about how to add custom tab in customer account dashboard in Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution.

Keep liking and sharing 🙂

Post Views: 6,302