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 – MGPM Jan 3 '19 at 7:35
  • Do you want this on product page only or in the listing page as well? – Sukumar Gorai Jan 3 '19 at 8:03
  • Just in product page – MGPM Jan 3 '19 at 8:05
  • You can check the answer. Its working perfectly for me. – Sukumar Gorai Jan 3 '19 at 8:23
  • Is it working correctly? – Sukumar Gorai Jan 3 '19 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;}
| improve this answer | |
  • Thanks for your answer. i tried it but it adds new wish-list icon and no action. just says: javascript:void(0) – MGPM Jan 3 '19 at 16:09
  • 1
    Can you update what you have tried? I think you have missed something – Sukumar Gorai Jan 3 '19 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. – MGPM Jan 3 '19 at 16:39
  • 1
    Can you share a screenshot what you are seeing? – Sukumar Gorai Jan 3 '19 at 16:48
  • @SukumarGorai I tried your wishlist condition in vendor/magento/module-wishlist/view/frontend/templates/catalog/product/list/addto/wishlist.phtml file but it is not working. Can you check ? (Magento version 2.2.9) – Kishan Patadia Sep 13 '19 at 5:36

The answer from @SukumarGorai look like a good solution. But with Magento 2.3 it generates a MySQL error message for the resulting query.

The query to generate isAdded produces this SQL:

SELECT main_table.* FROM wishlist_item AS main_table INNER JOIN catalog_category_product_index_store1 AS cat_index ON cat_index.product_id = main_table.product_id AND cat_index.category_id = '2' AND cat_index.visibility IN (3, 2, 4) WHERE (wishlist_id = '') AND (main_table.store_id IN('1')) AND (product_id = '4317');

The error message reports that product_id is ambiguous.

Can you suggest a way to generate isAdded that avoids this error?

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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