> For the complete documentation index, see [llms.txt](https://madeindonesia.gitbook.io/mi-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://madeindonesia.gitbook.io/mi-guide/plugins/woocommerce/add-wishlist-counter-yith-js.md).

# 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:

<figure><img src="/files/wsDWd46AkjNSBIN4me6e" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/AFgKxHBrQx0GtIG55MvT" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/NRKFFaDMrwoP4VNeHN9T" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/XVKqVeujUhw3dmQ1CSC8" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/B01VNdTIN0isEeB1574H" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="/files/Pi3vUj7ylzWujkRiUwyF" alt=""><figcaption></figcaption></figure>

Here the code **class-WishlistIcon.php,** you can cop&#x79;**:**

```php
<?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 cop&#x79;**:**

```html
<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 cop&#x79;**:**

```php
<?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]**

<figure><img src="/files/4Aj42RinVQn3DzPhvHa4" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/g07SaYaG9jITAPryNwLb" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/3lqfwq2PEuhSyYObGPoH" alt=""><figcaption></figcaption></figure>

here the code **wishlist.scss,** for styling the icon hear&#x74;**:**

```scss
.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 cod&#x65;**:**

```
@import "./wishlist/wishlist";
```

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

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.**