---
title: Customizing Wishlist Icon Color in WooCommerce
description: "Change the wishlist icon color in WooCommerce: enable Custom style, then set normal, added and hover colors on the Style tab."
url: "https://wpfactory.com/docs/customize-wishlist-icon-2/"
updated: "2026-09-27"
category: How to
tags:
  - Wishlist for WooCommerce
---

# Customizing Wishlist Icon Color in WooCommerce

To change the wishlist icon color in WooCommerce, go to **WPFactory > Wishlist > Style** in [Wishlist for WooCommerce](https://wpfactory.com/item/wish-list-woocommerce/), tick **Custom style**, then set **Icon color - Normal**, **Icon color - Added** and **Icon color - Hover** in the **Thumb button** section. For the text button, the icon follows **Default button > Text color**. All of this is free.

![Wishlist icon color settings on the Style tab](https://wpfactory.com/wp-content/uploads/pasted-image-0-28.png)

**Note:** none of the Style tab settings apply until **Custom style** (Enable custom style section) is ticked. It is off by default, which is the most common reason a new color "does nothing".

## Step-by-step

1. Go to **WPFactory > Wishlist** (also reachable at **WooCommerce > Settings > Wishlist**) and open the **Style** tab.
2. In **Style section**, tick **Custom style**.
3. In **Thumb button**, click the color field for **Icon color - Normal** (product not in the wishlist yet) and pick a color.
4. Set **Icon color - Added** (product already saved) and **Icon color - Hover** (mouse over).
5. For the text button, set **Default button > Text color**, which colors both the text and the icon, plus its background colors.
6. Click **Save changes** and clear any page or CSS cache.

![Thumb button icon color options](https://wpfactory.com/wp-content/uploads/pasted-image-0-29.png)

## Color options and defaults

| Section | Label | Option ID | Default |
| --- | --- | --- | --- |
| Thumb button | Icon color - Normal | `alg_wc_wl_style_thumb_btn_color` | `#afafaf` |
| Thumb button | Icon color - Added | `alg_wc_wl_style_thumb_btn_color_enabled` | `#333333` |
| Thumb button | Icon color - Hover | `alg_wc_wl_style_thumb_btn_color_hover` | `#7d3f71` |
| Thumb button - Back layer | Enable / Background Color | `alg_wc_wl_style_thumb_btn_back_l_enable` / `alg_wc_wl_style_thumb_btn_back_l_bkg` | No / `#ffffff` |
| Default button | Text color (text and icon) | `alg_wc_wl_style_default_btn_txt_color` | `#ffffff` |
| Default button | Background color / Hover | `alg_wc_wl_style_default_btn_bkg` / `alg_wc_wl_style_default_btn_bkg_hover` | `#919191` / `#bfbfbf` |
| Wishlist page remove item button | Icon color - Normal / Hover | `alg_wc_wl_style_wish_list_remove_btn_icon_color` / `..._color_hover` | `#DC3232` / `#DC3232` |

Custom style and every option in this table are free.

## What the customer sees

- The thumb icon over product images uses the Normal color, switches to the Added color once the product is saved, and to the Hover color on mouse over. The same colors apply on product pages and shop pages.
- The wishlist icon in your navigation menu uses the thumb button's Added and Hover colors.
- The back layer, if enabled, draws a circle behind the thumb icon so it stays visible on busy product photos.

## Change the icon itself

Next to the colors, **Icon - Normal** and **Icon - Added** set which Font Awesome icon is used for each button (both default to `fas fa-star`). See [customizing the thumb icon](https://wpfactory.com/docs/customize-thumb-icon/) and [managing Font Awesome icons](https://wpfactory.com/docs/manage-font-awesome-icons/).

## If it does not work

- **No change at all:** tick **Custom style** and save.
- **Your theme wins:** a theme rule can be stronger than the plugin's. Add your own rule in **Style customization > Add customized css**, which also needs **Custom style** ticked.
- **Old colors still show:** clear your cache plugin and any CSS minification or combining.
- **No icon, only an empty square:** Font Awesome is not loading; keep **General > Font Awesome > Load FontAwesome** ticked.

## FAQ

### Can the icon have a different color on the product page and the shop page?

Not with the settings: the colors are shared. Sizes, padding and offset can differ between single product and loop.

### Can I color the popup notification?

Yes, in the **Popup notifications** section of the Style tab (background, text and progress bar colors). See [popup notifications](https://wpfactory.com/docs/engage-popup-notifications/).

### Is custom styling Pro?

No, the whole Style tab is free.

## Related guides

- [Customize the thumb icon](https://wpfactory.com/docs/customize-thumb-icon/)
- [Style the wishlist buttons, popup and page](https://wpfactory.com/docs/customize-wishlist-style/)
- [Manage Font Awesome icons](https://wpfactory.com/docs/manage-font-awesome-icons/)

### Get more control

This feature is free. [Wishlist for WooCommerce](https://wpfactory.com/item/wish-list-woocommerce/) Pro adds drag-and-drop, arrow and dropdown sorting, copying a wishlist, hiding buttons by product tag, extra shortcodes and CSV wishlist import. [See what Pro unlocks](https://wpfactory.com/item/wish-list-woocommerce/).

Need a hand? Our team answers every ticket on the [Wishlist for WooCommerce support forum](https://wpfactory.com/support/item/wish-list-woocommerce/).

Related articles

- [Customizing Social Icons Color on Wishlist Page in WooCommerce](https://wpfactory.com/docs/customize-social-icons/)
- [Customizing Wishlist Popup Icons in WooCommerce](https://wpfactory.com/docs/customize-popup-icons/)
- [Adding Icons to Wishlist Tab in WooCommerce](https://wpfactory.com/docs/add-icons-wishlist-tab/)
- [How to Enable Loading Icon for Wishlist in WooCommerce](https://wpfactory.com/docs/enable-loading-icon-wishlist/)
- [How to Add a Wishlist Icon to the WooCommerce Navigation Menu](https://wpfactory.com/docs/wishlist-icon-navigation/)

 

[![Wishlist for WooCommerce](https://wpfactory.com/wp-content/uploads/Wishlist-for-WooCommerce.webp)](https://wpfactory.com/item/wish-list-woocommerce/)