---
title: Customizing Thumb Icon on WooCommerce Product Pages
description: "![Customizing Thumb Icon on WooCommerce Product Pages screenshot](https://wpfactory.com/wp-content/uploads/pasted-image-0-34.png) To customize the thumb icon in Wishlist for WooCommerce, go to WooCommerce > Settings > Wishlist, open the Style tab, and find the Thumb button section. Set Icon - Normal and Icon…"
url: "https://wpfactory.com/docs/customize-thumb-icon/"
updated: "2026-09-27"
category: How to
tags:
  - Wishlist for WooCommerce
---

# Customizing Thumb Icon on WooCommerce Product Pages

![Customizing Thumb Icon on WooCommerce Product Pages screenshot](https://wpfactory.com/wp-content/uploads/pasted-image-0-34.png)

To customize the thumb icon in Wishlist for WooCommerce, go to WooCommerce > Settings > Wishlist, open the Style tab, and find the Thumb button section. Set Icon - Normal and Icon - Added, choose icon colors for the normal, added, and hover states, adjust the position and size, and save your changes.

#### ** Step 1: Navigate to WooCommerce Wishlist Settings**

1.  Log in to your WordPress dashboard.
2.  Click on **"WooCommerce****"** in the left-hand menu.
3.  Locate the **"[Wishlist](https://wpfactory.com/item/wish-list-woocommerce/)****"** tab under WooCommerce settings.

![Step 1 screenshot](https://wpfactory.com/wp-content/uploads/pasted-image-0-35.png)

#### **Step 2: Access Wishlist Style Settings**

1.  Within the Wishlist settings, click on the **"Style****"** tab.

####  **Step 3: Customize Thumb Icon**

1.  Find the **"Thumb button****"** section under **"Style for thumb button."**
2.  Customize the normal icon using the **"Icon - Normal****"** option. For example, you can use **`fas fa-arrow-alt-circle-down`.**
3.  Similarly, customize the added icon using the **"Icon - Added****"** option. Consider using **`fas fa-arrow-circle-down`.**
4.  Adjust the **"Pulsate****"** option if you want the icon to pulsate on mouseover.

####  **Step 4: Set Icon Colors**

1.  Choose colors for the normal, added, and hover states of the icon using the **"Icon color - Normal,"** **"Icon color -Added,"** and **"Icon color - Hover"** options respectively.

####  **Step 5: Position the Thumb Button**

1.  Set the position of the thumb button relative to the product thumbnail. Options include **"Top left."**

####  **Step 6: Adjust Size and Styling**

1.  Fine-tune the size, offset, padding, font size, and hover size options to ensure the thumb icon complements your product pages.

#### ** Step 7: Customize Back Layer (Optional)**

1. If desired, enable the back layer and customize its appearance using options like background color and size.

####  **Step 8: Save Changes**

1.  Save your changes to apply the customized thumb icon settings.

Now, your WooCommerce product pages, shop pages, and archive pages will feature a thumb icon that aligns with your store's visual identity.

Related articles

- [Customizing Social Icons Color on Wishlist Page in WooCommerce](https://wpfactory.com/docs/customize-social-icons/)
- [How to Customize Wishlist Icons on WooCommerce Product Pages](https://wpfactory.com/docs/customize-wishlist-icon/)
- [How to Modify and Product Pages for Wishlist Reporting](https://wpfactory.com/docs/modify-user-product/)
- [Customizing Wishlist Popup Icons in WooCommerce](https://wpfactory.com/docs/customize-popup-icons/)
- [Customizing Wishlist Icon Color in WooCommerce](https://wpfactory.com/docs/customize-wishlist-icon-2/)

 

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