M2 - How to change Wishlist icon color after product added to Wishlist

Question

My code:

app\design\frontend\Zero\my_theme\Magento_Wishlist\templates\catalog\product\view\addto\wishlist.phtml

<?php
/**
 * 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() ?>
        }
    }
</script>

CSS: app\design\frontend\Zero\my_theme\Magento_Wishlist\web\css_extend.less

.action.towishlist.already-added{color: #ff0000 !important;}

After the item added to the wishlist the wishlist icon color not update.

Answer 1

Try:-

Path:-

app\design\frontend\Zero\my_theme\Magento_Wishlist\templates\catalog\product\view\addto\wishlist.phtml

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

/** @var \Magento\Wishlist\Block\Catalog\Product\View\AddTo\Wishlist $block */
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$wishlist = $objectManager->get('\Magento\Wishlist\Model\Wishlist');
$customerSession = $objectManager->get('Magento\Customer\Model\SessionFactory')->create();
$customerData = $customerSession->getCustomer()->getData(); //get all data of customerData
$customerId = $customerSession->getCustomer()->getId();//get id of customer
$isAdded = $wishlist->loadByCustomerId($customerId, true)->getItemCollection();
?>
<style>
    .action.towishlist.already-added:before{color: #ff0000 !important;}
</style>
<?php if ($block->isWishListAllowed()) : ?>
    <?php if($isAdded->count()): ?>
        <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() ?>
        }
    }
</script>

Add module.less code :-

Path:- app\design\frontend\Zero\my_theme\Magento_Wishlist\web\module.less

.action.towishlist.already-added:before{color: #ff0000 !important;}