15

I am searching header.links block to remove one link and add some links but I am not getting where to make changes. Suggest me some solution

Improve this question
2
  • In this same custom links, how can I add the custom class?
    – Abrar Pathan
    Apr 29, 2019 at 13:20
  • This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation. - From Review
    – fmsthird
    Apr 29, 2019 at 13:43

4 Answers 4

Reset to default
25

I Hope this is useful for you,

if you want to remove top.links

Add default.xml file in this path

app/design/frontend/vendor/theme/Magento_Theme/layout/default.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="register-link" remove="true" />           <!--for Create Account Link-->
                    <referenceBlock name="authorization-link" remove="true" />      <!--for Sign In Link  -->
                    <referenceBlock name="wish-list-link" remove="true" />          <!--for WishList Link-->
                    <referenceBlock name="my-account-link" remove="true" />         <!--for My Account Link-->

            </body>
        </page>

if you want to add Custom top links:

go to app/design/frontend/vendor/theme/Magento_Theme/layout/default.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="header.links">
                <block class="Magento\Framework\View\Element\Html\Link" name="custom-link">
                <arguments>
                    <argument name="label" xsi:type="string" translate="true">custom link</argument>
                    <argument name="path" xsi:type="string" translate="true">customlink</argument>
                </arguments>
                </block>
            </referenceBlock>

            </body>
        </page>
Improve this answer
2
  • thanks for your answer how to add custom links and change the label of link
    – coder
    Sep 28, 2016 at 5:05
  • How to add some design for the custom link which added in the header? @Rajkumar .E
    – zus
    Dec 11, 2020 at 9:31
9

You can add and remove top links by add this line in your in Magento_Theme/layout/default.xml

    <referenceBlock name="header.links">
    <block class="Magento\Framework\View\Element\Html\Link" name="new.link" after="register-link">
        <arguments>
            <argument name="label" xsi:type="string" translate="false">New Link</argument>
            <argument name="path" xsi:type="string" translate="false">newlink</argument>
        </arguments>
    </block>

    <!-- here you can remove whatever link you feel unwanted -->
    <referenceBlock name="register-link" remove="true" />           <!--for Create Account Link-->
    <referenceBlock name="authorization-link" remove="true" />      <!--for Sign In Link  -->
    <referenceBlock name="wish-list-link" remove="true" />          <!--for WishList Link-->
    <referenceBlock name="my-account-link" remove="true" />         <!--for My Account Link-->
    </referenceBlock>
Improve this answer
2
  • 1
    How can I remove compare link in header.links
    – Omer
    Jun 5, 2017 at 9:36
  • i have created custom links in header, how to move into after logo @Bilal Usean
    – zus
    Dec 11, 2020 at 10:08
1

To add a Toplink in your website header, create a custom module and then follow this:

Method#1 Basic link using layout XML

// app/code/Namespace/Modulename/view/frontend/layout/default.xml
<?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="top.links">
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="whatsapp-link" before="my-account-link">
                <arguments>
                    <argument name="label" xsi:type="string" translate="true">Contact us on Whatsapp</argument>
                    <argument name="path" xsi:type="string">some-path-url-string</argument>
                    <argument name="class" xsi:type="string" translate="false">contact-whatsapp</argument>
                    <argument name="sortOrder" xsi:type="number">100</argument>
                    <argument name="target" xsi:type="string">_blank</argument>
                </arguments>
            </block>       
        </referenceBlock>
    </body>
</page>

By just using this file, you will be able to create a custom top link, and with the added class you can style it in you css/less files.

Method#2 Using Template phtml file Sometimes there are requirements when you need more control over newly added toplinks, or add image or write your own html. For adding a custom toplink using a template, follow this way.

// app/code/Namespace/Modulename/view/frontend/layout/default.xml
<?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="top.links">
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="whatsapp-link" template="Namespace_Modulename::whatsappLink.phtml">
            </block>       
        </referenceBlock>
    </body>
</page>

And then add the template phtml file defined in xml above in your code as follow.

// app/code/Namespace/Modulename/view/frontend/templates/whatsappLink.phtml
<li class="link whatsapp-link">
    <a href="some-path-url-string" title="Connect via Whatsapp" target="_blank">
        <img class="whatsapp-img" src='<?php echo $this->getViewFileUrl('Namespace_Modulename::images/WhatsApp_logo.png'); ?>' alt="Whatsapp Image">
        <span class="whatsapp-label">Connect via Whatsapp</span>
    </a>
</li>

Using this way, I added my icon with toplink and I can play with it as per requirement.

To remove header link

// app/code/Namespace/Modulename/view/frontend/layout/default.xml
<?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="my-account-link" remove="true" />        
    </body>
</page>
Improve this answer
0

@Rajkumar .E - answered this question and i just want to add that if you need to add custom class add this argument:

<argument name="class" xsi:type="string">customclass</argument>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.