Wishlist for WooCommerce

  1. Home
  2. Docs
  3. Wishlist for WooCommerce
  4. How To
  5. Customizing Thumb Icon on WooCommerce Product Pages

Customizing Thumb Icon on WooCommerce Product Pages

pasted image 0 34

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.

pasted image 0 35

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.


Wishlist for WooCommerce