Shopping cart

4 Steps to add Custom Tab in Customer Account in Magento 2

Regarding the default setting of Magento 2, customers will be redirected automatically to their account dashboard after signing up or logging in. In this dashboard, there are various tabs such as My Account, My Orders, My Wishlist.

However, in some particular situation, to enhance customers experience while shopping, several features like checking demo product, requesting refunds, or other custom requirements need to be added to customer account dashboard. Sadly, these features are not being offered in the default Magento 2. Therefore, in today post, I will show you 4 simple stages to add a custom tab in customers account.

How to add Custom Tab in Customer Account

Step 1: Create Customer Account Layout

Firstly, you will need to create the file customer_account.xml in the path Mageplaza/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

After creating the above file, also in the path Mageplaza/Module/view/frontend/layout, create routename_customer_index.xml 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

Then go to Mageplaza/Module/Controller/Customer, and create Index.php

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

Finally, to add custom tab in customer account dashboard, you only need follow the path Mageplaza/Module/view/frontend/templates and create mytab.phtml.

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

Conclusion

Above is the procedure on how to add a custom tab in customer account dashboard in Magento 2. I hope this article will be helpful for you.



Enable Disable Developer Mode

Disable a Payment Method Programmatically



One Step Checkout for Magento 2 by Mageplaza

Enjoyed the tutorial? Spread it to your friends!

Comments for 4 Steps to add Custom Tab in Customer Account in Magento 2

Please leave comments if you have any questions, feedbacks.

Module Development

We recommend: