How to add/remove links on my account navigation magento2?

magento.stackexchange https://magento.stackexchange.com/questions/332067

Question

How to remove "Billing Agreements" and "My Wishlist" links from the navigation menu on customer account page?

Was it helpful?

Solution

Add new layout handle to one of places:

  1. If creating new module: VendorName/ModuleName/view/frontend/layout/customer_account.xml
  2. If creating new theme, 2 similar layout handles should be created to declare removal of each block separately: app/design/frontend/VendorName/themeName/Magento_Wishlist/layout/customer_account.xml (and similar layout for billing agreement module)

Layout handle content:

<?xml version="1.0"?>
<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-wish-list-link" remove="true"/>
        <referenceBlock name="customer-account-navigation-billing-agreements-link" remove="true"/>
    </body>
</page>

OTHER TIPS

Full list of customer account XML removal for M2. It will be helpful for other developers who try to remove other links. I think it's a good idea to keep it has extra information for other developers. 

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <!-- Remove unwanted account navigation links -->
        <!-- Put this file in: app/design/frontend/[Namespace]/[Theme]/Magento_Customer/layout/customer_account.xml -->

        <!-- Store credit -->
        <referenceBlock name="customer-account-navigation-customer-balance-link" remove="true"/>

        <!-- Downloadable product link -->
        <referenceBlock name="customer-account-navigation-downloadable-products-link" remove="true"/>

        <!-- Subscription link -->
        <referenceBlock name="customer-account-navigation-newsletter-subscriptions-link" remove="true"/>

        <!-- Billing agreement link -->
        <referenceBlock name="customer-account-navigation-billing-agreements-link" remove="true"/>

        <!-- Product review link -->
        <referenceBlock name="customer-account-navigation-product-reviews-link" remove="true"/>

        <!-- My credit card link -->
        <referenceBlock name="customer-account-navigation-my-credit-cards-link" remove="true"/>

        <!-- Account link -->
        <referenceBlock name="customer-account-navigation-account-link" remove="true"/>

        <!-- Account edit link -->
        <referenceBlock name="customer-account-navigation-account-edit-link" remove="true"/>

        <!-- Address link -->
        <referenceBlock name="customer-account-navigation-address-link" remove="true"/>

        <!-- Orders link -->
        <referenceBlock name="customer-account-navigation-orders-link" remove="true"/>

        <!-- Wish list link -->
        <referenceBlock name="customer-account-navigation-wish-list-link" remove="true"/>

        <!-- Gift card link -->
        <referenceBlock name="customer-account-navigation-gift-card-link" remove="true"/>

        <!-- Order by SKU -->
        <referenceBlock name="customer-account-navigation-checkout-sku-link" remove="true"/>

        <!-- Gift registry -->
        <referenceBlock name="customer-account-navigation-giftregistry-link" remove="true"/>

        <!-- Reward points -->
        <referenceBlock name="customer-account-navigation-reward-link" remove="true"/>
    </body>
</page>

In my mage installation (2.2.2 commerce edition) there is another link:

<!-- Invitations -->
<referenceBlock name="customer-account-navigation-magento-invitation-link-container" remove="true"/>

I added the following css to hide the Billing Agreements tab on my customer account pages. There are better ways to do this as mentioned, but this is quick and easy!

nav.account-nav li.nav.item a[href*="billing_agreement"] {display:none;}

You could do the same the Wishlist or any other link that you want to remove. Just target the element using a selector, as explained here: https://www.w3schools.com/cssref/css_selectors.asp

At first I hide links in customer account MENU using CSS as #Cristina mentioned because I thought that the solution with xml will be too laborious.

But it is not complicated at all. You just need to choose links, which you would like to remove.

What is important: by looking at the source of the page's code - there are no links to as opposed to the CSS solution (display: none;)

If you are using Enterprise with B2B, there are some more links you may want to hide as well.

Goldy's answer above is hugely helpful, here are some additional links to hide if using B2B components.

In file: app/design/frontend/[Namespace]/[Theme]/Magento_Customer/layout/customer_account.xml

        <!-- Company Users -->
        <referenceBlock name="customer-account-navigation-company-users-link" remove="true"/>

        <!-- Company Delimiter -->
        <referenceBlock name="customer-account-navigation-delimiter-container-b2b" remove="true"/>

        <!-- Company Profile -->
        <referenceBlock name="customer-account-navigation-company-profile-link" remove="true"/>

        <!-- Company Structure -->
        <referenceBlock name="customer-account-navigation-company-link" remove="true"/>

        <!-- My Invitations -->
        <referenceBlock name="customer-account-navigation-magento-invitation-link-container" remove="true"/>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top