This question already has an answer here:

I can add product to my Wish-list on product page Magnnto2.1, but after refresh the product page,I want to see this product already added to wish-list by changing color of wish-list icon (set active class for example) what should i do if anyone idea share with me?

marked as duplicate by Jai, Rohan Hapani, Shoaib Munir, Manashvi Birla, Mohit Kumar Arora Jul 22 at 5:23

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • Any new answer? – MGPM Jan 2 at 6:36

Replace content of



 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.

// @codingStandardsIgnoreFile

/** @var \Magento\Wishlist\Block\Catalog\Product\View\AddTo\Wishlist $block */
<?php if ($block->isWishListAllowed()) : ?>
    <?php $_product = $block->getProduct(); ?>
    <?php $isAdded = $this->helper('Magento\Wishlist\Helper\Data')->getWishlistItemCollection()->addFieldToFilter('product_id', $_product->getId())->count(); ?>
    <?php if($isAdded): ?>
    <a href="javascript:void(0)" class="action towishlist already-added" data-action="add-to-wishlist"><span><?= $block->escapeHtml(__('Added to Wish List')) ?></span></a>
    <?php else: ?>
       <a href="#" class="action towishlist" data-post='<?= /* @noEscape */ $block->getWishlistParams() ?>' data-action="add-to-wishlist"><span><?= $block->escapeHtml(__('Add to Wish List')) ?></span></a>
    <?php endif; ?>
<?php endif; ?>
<script type="text/x-magento-init">
        "body": {
            "addToWishlist": <?= /* @noEscape */ $block->getWishlistOptionsJson() ?>

then add below code to your custom css file

.product-social-links .action.towishlist.already-added{color: red;}

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