# Wishlist Button

The wishlist button is the heart-icon button that allows customers to add or remove products from their wishlist. This guide covers how to configure and customize it.

## Default Behavior

By default, the wishlist button:

- Appears **after the "Add to Cart" button** on single product pages.
- Appears alongside each product on **shop/catalog pages** (product loop).
- Uses a **heart icon** (♡ when not in wishlist, ♥ when in wishlist).
- Shows **"In Wishlist"** text when the product is already saved.
- Works via **AJAX** — no page reload required.

> **Screenshot placeholder:** *Wishlist button in its default position after the Add to Cart button on a single product page.*

> **Screenshot placeholder:** *Wishlist button on the shop page product cards.*

## Changing Button Position

Go to **Bizzwishlist > Settings > General** to change the button position.

Available positions:

| Position | Description |
|----------|-------------|
| **After Add to Cart** | Below the Add to Cart button (default) |
| **Before Add to Cart** | Above the Add to Cart button |
| **After Product Title** | Below the product title on the single product page |
| **Before Product Title** | Above the product title on the single product page |
| **Custom Hook** | Use a custom WordPress action hook (for developers) |
| **None** | Hide the automatic button (use shortcode or hook to place manually) |

> **Screenshot placeholder:** *Admin settings showing the wishlist button position dropdown.*

## Using the Custom Hook Position

If you select **"Custom Hook"** as the button position:

1. Enter the hook name in the **"Custom Hook Name"** field that appears.
2. The plugin will attach the wishlist button to that WordPress action hook.

For example, if your theme fires `do_action( 'my_theme_after_price' )`, enter `my_theme_after_price` as the custom hook name.

## Placing the Button Manually

### Using the Shortcode

Add the wishlist button anywhere using the shortcode:

```
[bizzwishlist_button]
```

To display the button for a specific product:

```
[bizzwishlist_button product_id="123"]
```

### Using Action Hooks in Theme Templates

In your theme's PHP template files:

```php
<?php
// Display the wishlist button for the current product in the loop
do_action( 'bizzwishlist_button' );

// Display the button for a specific product ID
do_action( 'bizzwishlist_button', 123 );

// Alternative hook (same behavior)
do_action( 'bizzwishlist_button_show', 123 );
?>
```

## Button States

The wishlist button has two visual states:

| State | Appearance | Behavior on Click |
|-------|------------|-------------------|
| **Not in Wishlist** | Outlined heart (♡) | Adds the product to the wishlist |
| **In Wishlist** | Filled heart (♥) + "In Wishlist" text | Removes the product from the wishlist |

The button state updates instantly via AJAX without reloading the page. All button instances for the same product on the page update simultaneously.

> **Screenshot placeholder:** *Side-by-side comparison of the button in "not in wishlist" and "in wishlist" states.*

## Button on Shop Loop Pages

The wishlist button also appears on product listing pages (shop, category, tag, and search results). It is rendered alongside or near the "Add to Cart" button in the product loop.

The loop button works the same way as the single product button — click to toggle, with instant AJAX feedback.