I am in requirement to add mini wish-list icon like mini cart count on top of header .I do not know this is Magento default functionality or Not.

enter image description here

  • Do you need to display the count on top of wishlist?
    – Haritha
    Jun 17, 2018 at 11:53
  • Haritha@yes before my cart button on top Jun 17, 2018 at 12:01
  • Haritha@you there? Jun 17, 2018 at 12:04
  • By default for wishlist and the cart, the count is available... check these files to add counter to your custom icons vendor/magento/module-wishlist/view/frontend/templates/link.phtml vendor/magento/module-checkout/view/frontend/templates/cart/minicart.phtml <!-- ko if: wishlist().counter --> <span data-bind="text: wishlist().counter" class="counter qty"></span> <!-- /ko -->
    – Haritha
    Jun 17, 2018 at 12:12
  • Haritha@let me know what I have to do there Jun 17, 2018 at 12:16

1 Answer 1


You can either create a module or customize the code in the theme, I have used custom module as follows,




<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="VendorName_ModuleName" setup_version="1.0.0">


<?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">
        <referenceContainer name="header-wrapper">
            <block class="Magento\Wishlist\Block\Link" name="wish-list-link-custom" after="minicart" template="VendorName_ModuleName::link.phtml" />


Note: The below css styles can be added in a new less file

/* you can customize the wishlist here */
        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;
<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 -->
<script type="text/x-magento-init">
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "wishlist": {
                        "component": "Magento_Wishlist/js/view/wishlist"


run commands

bin/magento setup:upgrade

bin/magento setup:static-content:deploy

give permission to the magento 2 files as per Magento 2 folder/file permissions

after creating this we can able to see the customization as shown in the below screen shot

enter image description here


Your Answer

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

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