How To Add Custom Tab In Customer Account In Magento 2

May 17, 2021 The Online Helper

Steps to add custom Tab in the customer account

Create Customer Account Layout

Directory

VendorName/ModuleName/view/frontend/layout/customer_account.xml

Content for customer_account.xml

<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>

Create Index layout

Directory

VendorName/ModuleName/view/frontend/layout/routename_customer_index.xml

Content for routename_customer_index.xml

<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>

Create Index Page

Directory

VendorName/ModuleName/Controller/Customer/Index.php

Content for Index.php

<?php 
namespace VendorName/ModuleName\Controller\Customer;  
class Index extends \Magento\Framework\App\Action\Action { 
public function execute() { 
$this->_view->loadLayout(); 
$this->_view->renderLayout(); 
} 
} 
?>

Create Template file

Directory

VendorName/ModuleName/view/frontend/templates/mytab.phtml

Content for mytab.phtml

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

If you are looking for Magento Developers, visit Magento Developer Agency.

How To Add Custom Tab In Customer Account In Magento 2

Steps to add custom Tab in the customer account

Create Customer Account Layout

Create Index layout

Create Index Page

Create Template file

Recent post