Add Custom Wishlist Button in Header Content in Magento 2

If you are looking for customization of the Magento 2 header content then you are on the right page. In this article, I am going to explain how we can add Custom Wishlist Button in the Magento 2 header content.

This button will add before the mini cart button in the top header bar so our order will be look something like catalog search, Wishlist, mini cart links in header content, now read all the files for what's the proper code to add that.

Custom Add To Wishlist Button
Custom Add To Wishlist Button

 

Magento 2 Add Custom Wishlist Button in Header Content

So we have to create a minimum of four files to add a custom wishlist button in header content

app/code/Wishusucess/CustomWishlist/registration.php

app/code/Wishusucess/CustomWishlist/etc/module.xml

app/code/Wishusucess/CustomWishlist/view/frontend/layout/default.xml

app/code/Wishusucess/CustomWishlist/templates/link.phtml

 

Step 1:

Now first we have to register our module so we have created a file which is registration.php

app/code/Wishusucess/CustomWishlist/registration.php

<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/

\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Wishusucess_CustomWishlist',
__DIR__
);

 

Step 2:

Now we have to create a file for module information which is module.xml

app/code/Wishusucess/CustomWishlist/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
<module name="Wishusucess_CustomWishlist" setup_version="1.0.0" />
</config>

 

Step 3: Add Custom Wishlist Button

We have to create a default.xml file and through this layout XML, we can add and remove view elements and their data so we will add wishlist content here.

app/code/Wishusucess/CustomWishlist/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>
<referenceContainer name="header-wrapper">
<block class="Magento\Wishlist\Block\Link" name="wish-list-link-custom" after="minicart" template="Wishusucess_CustomWishlist::link.phtml" />
</referenceContainer>
</body>
</page>

 

Step 4: Add Templates File

Here you can style your button as per your requirement.

app/code/Wishusucess/CustomWishlist/templates/link.phtml

<?php
/* you can customize the wishlist here */
?>
<style>
.custom.link.wishlist{
float: right;
}
.custom.link.wishlist .counter.qty {
background: #ff5501;
color: #fff;
height: 24px;
line-height: 24px;
border-radius: 2px;
display: inline-block;
margin: 3px 0 0;
min-width: 18px;
overflow: hidden;
padding: 0 3px;
text-align: center;
white-space: normal;
}

.wishlist-custom:before {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 22px;
line-height: 28px;
color: #757575;
content: '\e600';
font-family: 'luma-icons';
margin: 0;
vertical-align: top;
display: inline-block;
font-weight: normal;
overflow: hidden;
speak: none;
text-align: center;
}

.wishlist-custom .text{
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
</style>
<div class="custom link wishlist" data-bind="scope: 'wishlist'">
<a <?= /* @noEscape */ $block->getLinkAttributes() ?> class="wishlist-custom">
<span class="text"><?= $block->escapeHtml($block->getLabel()) ?></span>
<!-- ko if: wishlist().counter -->
<span data-bind="text: wishlist().counter" class="counter qty"></span>
<!-- /ko -->
</a>
</div>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"wishlist": {
"component": "Magento_Wishlist/js/view/wishlist"
}
}
}
}
}

</script>

 

Now Run The Following Command to See Wishusucess Wish List Button:

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deplpy -f

php bin/magento cache:clean

 

Download This Extension:

GitHub

 

Related Post:

Wishusucess AdminMenu: How to Create Magento 2 Admin Menu Module

HelloWorld Extension: How to Create Hello World Module

 

Recommended Post:

Magento 2.4 Installation Guide: How to Install Magento 2.4.2

Magento Store: Best 36 Magento Websites Example in The World