How to Add Custom Tab to a "My Account" Page in Magento 2?

April 30, 2021

With the default Magento 2 settings, customers get redirected to their account dashboard once the signup or log in. This dashboard contains various tabs such as My Account, My Orders, My Wishlist.

But when your online store requires any particular custom tab in order to enhance customer experience, you will be required to add it. Features like request refunds, check demo products or any other custom tab can be added to the custom dashboard.

How to Add Custom Tab to a "My Account" Page in Magento 2

Here are the steps to Add Custom Tab to a "My Account" Page in Magento 2.

Step 1. Create Customer Account Layout

First of all, you will need to create a file customer_account.xml in the path MageDelight/Module/view/frontend/layout. The following code will help you do the same:

<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 done with the above file, you will need to create routename_customer_index.xml in the same path with the help of 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 navigate to MageDelight/Module/Controller/Customer, and create Index.php with the help of the below code:

<?php 
namespace MageDelight/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

At last, add the custom tab in the customer account dashboard using the following path:

MageDelight/Module/view/frontend/templates and create mytab.phtml.

<?php 
// Add Some Code Here for custom design
?>
<span> My Custom Tab...... </span>

And there you go! Your custom tab for the 'My Account' page is all set. Go ahead and communicate better with your customers. We hope this article helped you do the process easily, if any issue came up, feel free to reach us out.

Also read: How to Add a Custom Link to ‘My Account’ Menu in Magento 2?