How to set active class to magento2.1 wish-list button on product page? I mean that, when i go to product page, if i marked that product to my wish-list before, just shows already added to wish-list or change the color of button.

  • For example: show red heart on products that already added to wishlist – PMPD Jan 3 at 7:35
  • Do you want this on product page only or in the listing page as well? – Sukumar Gorai Jan 3 at 8:03
  • Just in product page – PMPD Jan 3 at 8:05
  • You can check the answer. Its working perfectly for me. – Sukumar Gorai Jan 3 at 8:23
  • Is it working correctly? – Sukumar Gorai Jan 3 at 9:45

Copy the following file:


to you desired theme like below:


and add the following code to your theme's wishlist.phtml like below:

 * 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() ?>

Use the following css for color change or you can add any other color according to your requriement and add it to your respective css or less file.

<style type="text/css">
    .product-social-links .action.towishlist.already-added{color: #ff0000;}
  • Thanks for your answer. i tried it but it adds new wish-list icon and no action. just says: javascript:void(0) – PMPD Jan 3 at 16:09
  • 1
    Can you update what you have tried? I think you have missed something – Sukumar Gorai Jan 3 at 16:12
  • I just created Magento_Wishlist/templates/catalog/product/view/addto/wishlist.phtml and put your code on it then added css to one of my CSS files related to product page. but it still has no changed color and will add to wish-list again. – PMPD Jan 3 at 16:39
  • 1
    Can you share a screenshot what you are seeing? – Sukumar Gorai Jan 3 at 16:48

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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