# 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
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**:**
```html
```
Here the code **autoload.php,** you can copy**:**
```php
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**:**
```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 code**:**
```
@import "./wishlist/wishlist";
```
Notes: for styling you can change it according to the color of your website.
here the reference link:
\
**Good Luck.**
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://madeindonesia.gitbook.io/mi-guide/plugins/woocommerce/add-wishlist-counter-yith-js.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
