Customizing Thumb Icon on WooCommerce Product Pages

Make a statement with your WooCommerce product pages by customizing the thumb icon appearance. Our plugin offers easy-to-use settings to modify the color and icon of the thumb button on product pages, shop pages, and archive pages. Follow these steps to customize the thumb icon to suit your store’s style:

 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“ tab under WooCommerce settings.

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.