Add Wishlist counter [yith] JS

Goals:

• You can create wishlist counter on your e-commerce website (especially on our theme).

Requirement:

• Install plugin YITH WooCommerce Wishlist

Tutorial:

1. After you already install the plugin, you can adjust the settings in the plugin as needed. you can see an example below:

2. after that, we will create a shortcode, open your theme on vs code then you can go to your_thems > includes, you can add new folder like the picture below:

Here the code class-WishlistIcon.php, you can copy:

<?php

/**
 * The template for Create Custom Post Type - Laten Beleggen used in WP-admin
 *
 * Author: Andi Gustanto and Muhammad Rizki
 *
 * @package HelloElementor
 */

defined('ABSPATH') || die("Can't access directly");

class WishlistIcon
{
    public function __construct()
    {
        if (defined('YITH_WCWL') && !function_exists('yith_wcwl_get_items_count')) {
            add_shortcode('yith_wcwl_items_count', [$this, 'yith_wcwl_get_items_count_func']);
        }
        if (defined('YITH_WCWL') && !function_exists('yith_wcwl_ajax_update_count')) {
            add_action('wp_ajax_yith_wcwl_update_wishlist_count', [$this, 'yith_wcwl_ajax_update_count']);
            add_action('wp_ajax_nopriv_yith_wcwl_update_wishlist_count', [$this, 'yith_wcwl_ajax_update_count']);
        }
        if (defined('YITH_WCWL') && !function_exists('yith_wcwl_enqueue_custom_script')) {
            add_action('wp_enqueue_scripts', [$this, 'yith_wcwl_enqueue_custom_script'], 20);
        }
    }

    public function yith_wcwl_get_items_count_func()
    {
        ob_start();

        require __DIR__ . '/template-item-count.php';
        return ob_get_clean();
    }

    public function yith_wcwl_ajax_update_count()
    {
        wp_send_json(array(
            'count' => yith_wcwl_count_all_products()
        ));
    }

    public function yith_wcwl_enqueue_custom_script()
    {
        wp_add_inline_script(
            'jquery-yith-wcwl',
            "
              jQuery( function( $ ) {
                $( document ).on( 'added_to_wishlist removed_from_wishlist', function() {
                  $.get( yith_wcwl_l10n.ajax_url, {
                    action: 'yith_wcwl_update_wishlist_count'
                  }, function( data ) {
                    $('.yith-wcwl-items-count').children('span').html( data.count );
                  } );
                } );
                $(document).on('added_to_cart', () => {
                  $.get( yith_wcwl_l10n.ajax_url, {
                    action: 'yith_wcwl_update_wishlist_count'
                  }, function( data ) {
                    $('.yith-wcwl-items-count').children('span').html( data.count );
                  } );
                });
              });
            "
        );
    }
}

new WishlistIcon();

Here the code template-item-count.php, you can copy:

<a href="<?php echo esc_url(YITH_WCWL()->get_wishlist_url()); ?>">
    <span class="yith-wcwl-items-count wishlish-icon-wrapper">
        <span class="wishlish-icon-wrapper__count"><?php echo esc_html(yith_wcwl_count_all_products()); ?></span>
        <i class="yith-wcwl-icon fa fa-heart wishlish-icon-wrapper__heart"></i>
    </span>
</a>

Here the code autoload.php, you can copy:

<?php

/**
 * Used for ....
 *
 * @package HelloElementor
 */

defined('ABSPATH') || die("Can't access directly");
require_once __DIR__ . '/wishlist-icon/class-WishlistIcon.php';

3. You can add your shortcode on your website [yith_wcwl_items_count]

4. You can add code for style on folder scss, you can see image below:

here the code wishlist.scss, for styling the icon heart:

.wishlish-icon-wrapper {
	position: relative;
	margin-right: 7px;

	&__count {
		background: $accent;
		color: $white;
		position: absolute;
		right: -7px;
		top: -7px;
		min-width: 1.6em;
		height: 1.6em;
		font-size: 10px;
		font-weight: 600;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	&__heart {
		font-size: 18px;
		margin-top: 3px;
		color: $white;
	}

	&:hover {
		.wishlish-icon-wrapper__heart {
			color: $accent !important;
		}
	}
}

Don't forget to update your plugin.scss, add this code:

@import "./wishlist/wishlist";

Notes: for styling you can change it according to the color of your website.

here the reference link: https://support.yithemes.com/hc/en-us/articles/115001372967-Wishlist-How-to-count-number-of-products-wishlist-in-ajax

Good Luck.