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

Written by Surbhi Gandhi

Jan 05, 2022

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

Add custom tab in customer account in magento 2.

In Magento 2, after login or signup customer will be redirected to their account dashboard . There are many tabs on left side such as Account Dashboard ,My Orders ,My Downloadable Products ,My Wish List ,Billing Agreements etc. So If we need to enhance customer shopping experience or to display some information,  I will show you how add new custom tab there.  You can also hire Magento 2 developers from Dolphin Web Solution.

Follow the below steps.

Step 1: Create customer_account.xml

File Path: app/code/Dolphin/CustaccountTab/view/frontend/layout/customer_account.xml

<?xml version="1.0" encoding="UTF-8"?>
<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="custom-tab-link">
                <arguments>
                    <argument name="path" xsi:type="string">custaccounttab/customer/index</argument>
                    <argument name="label" xsi:type="string">Dolphin Custom Tab</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

Step 2: Create custaccounttab_customer_index.xml

File Path: app/code/Dolphin/CustaccountTab/view/frontend/layout/custaccounttab_customer_index.xml

<?xml version="1.0" encoding="UTF-8"?>
<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">Dolphin Custom Tab</argument> 
            </action> 
        </referenceBlock> 
        <referenceContainer name="content"> 
            <block class="Magento\Framework\View\Element\Template" name="custom-tab" template="Dolphin_CustaccountTab::customer/account/customtab.phtml" />
        </referenceContainer> 
    </body> 
</page>

Step 3: Create routes.xml

File Path: app/code/Dolphin/CustaccountTab/etc/frontend/routes.xml

<?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 frontName="custaccounttab" id="custaccounttab">
            <module name="Dolphin_CustaccountTab"/>
        </route>
    </router>
</config>

Step 4: Create Index.php

File Path: app/code/Dolphin/CustaccountTab/Controller/Customer/Index.php

<?php

namespace Dolphin\CustaccountTab\Controller\Customer;

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

Step 5: Create customtab.phtml

File Path: app/code/Dolphin/CustaccountTab/view/frontend/templates/customer/account/customtab.phtml

<?php 

// Add your tab content here.
echo "Dolphin custom tab content goes here";

That’s it. Happy Coding with magento2!! 🙂 Feel free to comment if you have any issue.

Surbhi Gandhi

Author

We can help you with

  • Dedicated Team
  • Setup Extended Team
  • Product Development
  • Custom App Development

Schedule a Developer Interview And Get 7 Days Risk-Free Trial

Fill out This Form and one of Our Technical Experts will Contact you Within 12 Hours.

    Google
    |

    4.8

    Google
    |

    4.8

    Google
    |

    4.9

    Google
    |

    4.8

    Google
    |

    4.9

    Copyright © 2024 DOLPHIN WEB SOLUTION. All rights reserved.

    TO TOP