---
title: How to style wishlist options
description: "Style every part of the wishlist in WooCommerce: buttons, icons, popup, wishlist table and custom CSS from the Style tab."
url: "https://wpfactory.com/docs/customize-wishlist-style/"
updated: "2026-09-27"
category: How to
tags:
  - Wishlist for WooCommerce
---

# How to style wishlist options

To style the wishlist buttons, popup and page in WooCommerce, go to **WPFactory > Wishlist > Style** in [Wishlist for WooCommerce](https://wpfactory.com/item/wish-list-woocommerce/) and tick **Custom style** (Enable custom style section). That unlocks colors, icons, sizes, alignment and padding for every wishlist element, plus a box for your own CSS. The Style tab is free.

![Styled wishlist button](https://wpfactory.com/wp-content/uploads/style-wishlist-button.png)

![Wishlist Style tab](https://wpfactory.com/wp-content/uploads/Style.png)

## Step 1: Enable custom styles

Go to **WPFactory > Wishlist** (also reachable at **WooCommerce > Settings > Wishlist**), open **Style**, and tick **Custom style**. It is off by default, and none of the settings below apply until it is on.

## Step 2: Work through the sections

| Section | What you can set | Key defaults |
| --- | --- | --- |
| General style options | Social icons colors and hover colors | `#a0a0a0` |
| Default button | Icon - Normal / Added, background and hover colors, text color (text and icon), font weight, border radius, font size, margin and alignment for single product and loop | Icon `fas fa-star`, background `#919191`, font size 15, alignment Left (single) / Center (loop) |
| Thumb button | Icons, pulsate on hover, icon colors (normal, added, hover), position over the image, hover size, offset, padding, font size | Position Top left, hover size 145%, font size 25 (single) / 20 (loop) |
| Thumb button - Back layer | A circle behind the thumb icon: enable, background color, size | Off, `#ffffff`, 28 px |
| Popup notifications | Add and remove icons, progress bar, colors, timeout, position | Black background, 7000 ms, Center |
| Wishlist page table | Column titles on desktop and mobile, alignment on mobile | Titles shown |
| Wishlist page remove item button | Icon, color, size, hover size | `fas fa-times-circle`, `#DC3232` |
| My account tab | Show an icon on the tab | Off, `f004` |
| Multiple wishlist - Modal color / Tab color | Popup and tab colors when multiple wishlists are on | White popup, grey tabs |
| Style customization | Add customized css | Empty |

## Step 3: Personalize buttons and icons

Pick icons for the "not added" and "added" states, set their colors, and turn on **Pulsate** (Make the icon pulsate on mouse over) for a livelier thumb button. Details: [wishlist icon color](https://wpfactory.com/docs/customize-wishlist-icon-2/) and [thumb icon](https://wpfactory.com/docs/customize-thumb-icon/).

## Step 4: Adjust alignment, padding and responsive details

Margins and padding use CSS shorthand (for example `0 0 15px 0`). Single product and loop values are separate, so you can keep the product page roomy and shop tiles compact. Which layout counts as mobile is set in **General > Responsiveness**.

## Step 5: Save your changes

Click **Save changes** and clear any cache or CSS optimization so the new styles load.

## If it does not work

- **Nothing changes:** **Custom style** is not ticked.
- **The theme overrides a value:** add a stronger rule in **Add customized css**.
- **Icons show as squares:** keep **General > Font Awesome > Load FontAwesome** ticked.

## FAQ

### Is styling a Pro feature?

No. The whole Style tab is free.

### Can I go back to the default look?

Yes. Untick **Custom style**; the plugin returns to its built-in styling while keeping your saved values.

## Related guides

- [Customize the wishlist icon color](https://wpfactory.com/docs/customize-wishlist-icon-2/)
- [Customize social icon colors](https://wpfactory.com/docs/customize-social-icons/)
- [Popup notifications](https://wpfactory.com/docs/engage-popup-notifications/)

### 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

- [How to Configure Guest Wishlists and Their Expiration](https://wpfactory.com/docs/guest-wishlist-expiration/)
- [How to Modify and Product Pages for Wishlist Reporting](https://wpfactory.com/docs/modify-user-product/)
- [Translating WooCommerce Wishlist Texts for a Personal Touch](https://wpfactory.com/docs/translate-woocommerce-wishlist/)
- [Adding Wishlist Columns During Product Import and Export in WooCommerce](https://wpfactory.com/docs/wishlist-columns-import-export/)
- [Customizing Wishlist Popup Icons in WooCommerce](https://wpfactory.com/docs/customize-popup-icons/)

 

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