Add to Favorites puts a heart button on your WooCommerce products. One click saves the product and a second click removes it. Show the saved products anywhere with the Woo Favorites element.
Click the hearts on the products below, then open the favourites list to see what you saved.
Two elements work together: the button and the list.
Place Add to Favorites in your single product template or in the global block used by a product loop.
Create a favourites page and add the Woo Favorites element to show the saved products.
Set the icon, colours, text and hover states in Breakdance to match your shop.
A simple toggle that remembers each shopper's picks.
Click once to add a product and again to remove it. The button switches to its active style straight away.
Favourites are stored in a cookie for 30 days, so guests can use them without an account.
The saved state is loaded with an uncached request after the page loads, so hearts stay correct on cached pages.
Add it to a product loop's global block and every product card gets its own heart.
Keep the default heart or choose your own inactive and active icons.
Show different text for the inactive and active states, or use the icon on its own.
Set icon and background colours for normal, hover and active states.
Control icon size, width, height, padding, margin, borders and alignment.
The button uses role and aria-pressed so screen readers know whether a product is saved.
Give shoppers a way to come back to what they liked.
Let shoppers shortlist products as they browse and compare them later.
Visitors can build a list of ideas and come back before buying.
Offer a wishlist without asking people to create an account first.
Put a heart on every card in category and shop pages.
Add a clear save button next to add to cart.
Pair it with Woo Favorites and its copy button so shoppers can paste their list into a message.
This is the full list of settings for Add to Favorites in the Breakdance editor.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Not Active Button Text | Text shown before the product is saved. | — |
| Active Button Text | Text shown once the product is saved. | — |
| Custom Icon | Replace the default heart with your own icons. | Off |
| Inactive Icon | Icon shown before the product is saved. | — |
| Active Icon | Icon shown once the product is saved. | — |
| Button | ||
| Background Color | Button background. | — |
| Borders | Border width, colour and radius. | — |
| Padding and Margin | Space inside and around the button. | — |
| Width and Height | Button size. | — |
| Alignment | Left, centre or right. | — |
| Icon/Text Gap | Space between the icon and the text. | — |
| Icon Color | Icon colour before saving. | — |
| Active Icon Color | Icon colour once saved. | #A70223 |
| Icon Size | Icon size in pixels. | — |
| Not Active Typography | Text style before saving. | — |
| Active Typography | Text style once saved. | — |
| Active Background Color | Button background once saved. | — |
| Hover Background Color | Button background on hover. | — |
| Hover Icon Color | Icon colour on hover. | — |
No. Favourites are saved in a browser cookie that lasts 30 days, so guests can use them.
Add the Woo Favorites element to a page. It lists the saved products and can show buttons to copy or clear the list.
Yes. After the page loads, the button asks the server which products are saved and updates the hearts.
WooCommerce products. The button only shows when the current item is a product.
Up to 100 products can be saved. The newest are kept first.
Add to Favorites is included with Phox Elements, along with 150+ other premium elements for Breakdance.
