In Magento 2, whenever customers register and login to store, they are redirected to “My Account” section. This section has default tabs like Account information, orders, product reviews, wishlist etc. in which respective data is displayed and stored. Now sometimes you want to create a custom module and show some custom tab loaded with some important information.
For example, you have created an extension for refund management and want customers to allow refund request from frontend. Here, you will need to create a separate custom tab with a form to allow refund requests. This can be done through adding custom tab in customer account section in Magento 2.
Follow the steps listed below to add custom tab on customer account section on frontend in Magento 2.
Add below files into your custom extension.
Ex: Namespace: Magecomp
Modulename: Mycard
Step 1: First, we need to create a “routes.xml” file inside the extension in the below directory.
app\code\Vendor\Extension\etc\frontend
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route id="customtab" frontName="customtab">
<module name="Vendor_Extension"/>
</route>
</router>
</config>
Step 2: After that, we need to create a “customer_account.xml” file inside extension the below directory.
app\code\Vendor\Extension\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">customtab/customer/index</argument>
<argument name="label" xsi:type="string">Custom Tab</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
Step 3: After that, we need to create a “customtab_customer_index.xml” file inside extension the below directory.
app\code\Vendor\Extension\view\frontend\layout
<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">Custom Tab</argument>
</action>
</referenceBlock>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="custom_tab" template="Vendor_Extension::customtab.phtml">
</block>
</referenceContainer>
</body>
</page>
Step 4: After that, we need to create an “Index.php” file inside extension the below directory.
app\code\Vendor\Extension\Controller\Customer
<?php
namespace Vendor\Extension\Controller\Customer;
class Index extends \Magento\Framework\App\Action\Action
{
public function execute() {
$this->_view->loadLayout();
$this->_view->renderLayout();
}
}
Step 5: Lastly, we need to create a “customtab.phtml” file inside extension the below directory.
app\code\Vendor\Extension\view\frontend\templates
<?php // Add Some Code Here for design ?>
<span> Custom Tab.. </span>
Can we do this for specific customer group only ? We want to add custom tab for the specific customer group.
There is no direct way to put condition to create tab for particular customer group but you can surely contact us for help.
Can we do this for specific customer group only ? We want to add custom tab for the specific customer group.
There is no direct way to put condition to create tab for particular customer group but you can surely contact us for help.
Hi, i am following this tutorial for add new tab on dashboard , but unable to find out where i need to place this complete module ?
i have place Magecomp folder inside of app/code folder but nothing showing on frontend. Can you please let me know where i can place this module ?
Hi, i am following this tutorial for add new tab on dashboard , but unable to find out where i need to place this complete module ?
i have place Magecomp folder inside of app/code folder but nothing showing on frontend. Can you please let me know where i can place this module ?
Please confirm you have created another required file for the extension and you have enabled that from CLI.
Hi How can I open this default like when i click account button then first it show me the default this page.
You can do it by setting “Active Tab”