Change Wishlist Button Color on Magento 2.1

magento-2.1magento2wishlist

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.

Best Answer

Copy the following file:

/vendor/magento/module-wishlist/view/frontend/templates/catalog/product/view/addto/wishlist.phtml

to you desired theme like below:

/app/design/frontend/Dapl/demo/Magento_Wishlist/templates/catalog/product/view/addto/wishlist.phtml

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

<?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>

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;}
</style>
Related Topic