0
DOCUMENTATION

Wishlist Icon

Add-to-wishlist toggle button for product cards and pages. Heart icon with customisable styling and animation.

Overview

The Wishlist Icon widget displays a small icon (typically a heart) that customers click to add the current product to their Goose Commerce wishlist. It is designed to sit on product cards within the Product Grid or on the Product Details page, providing a quick save-for-later action.

How to Add It

  1. Open the Elementor editor on your Product Details page or within a Product Grid template.
  2. Search for Wishlist Icon in the widget panel.
  3. Drag it onto the canvas near the product image or title.
  4. Customise the icon style and toggle state colours in the Style panel.
Note: A Wishlist page must be assigned in Goose → Settings → Pages → Wishlist Page for the full wishlist flow to work.

Settings Reference

SettingDescriptionDefault
IconThe icon for the wishlist toggle: Heart, Bookmark, StarHeart
Icon SizeSize of the icon in pixels20px
Active ColourIcon fill colour when the product is wishlisted#EF4444
Inactive ColourIcon colour when the product is not yet wishlisted#9CA3AF
Show TooltipDisplay a tooltip on hoverEnabled
Tooltip Text (Add)Tooltip when product is not wishlistedAdd to Wishlist
Tooltip Text (Remove)Tooltip when product is already wishlistedRemove from Wishlist
Guest BehaviourWhat happens when a guest clicks: Prompt login or Allow (session-based)Prompt Login

Common Use Cases

Place the Wishlist Icon in the top-right corner of product cards in the Product Grid so customers can save items while browsing. Add it to the Product Details page near the Add to Cart button as an alternative for customers not ready to purchase immediately.

Tips & Notes

Tip: Use a contrasting Active Colour so customers can clearly see when a product has been saved to their wishlist.
Note: Wishlist data for logged-in customers is stored in the Goose Commerce customer database. Guest wishlists are session-based and cleared when the browser session ends.
Powered by Goose