Wishlist button
The Add to Wishlist button on shop, category and product pages: where it appears, how it sits on product cards, its labels and icons, its style and colors, the confirmation tooltip, and a live preview in the settings.
- Here: After Add to Cart with Match theme's Add to Cart, joining the theme's hover icons
- "Add to wishlist" beside Add to cart, at the same height
- Visibility and Shop & Category Pages with the four Position choices
- The Live preview beside the form
Visibility
Choose which pages show the button.
Product grids on the shop, category, tag and search pages.
Next to or below Add to cart.
Anywhere else: use [siteryn_wishlist_button]. See Shortcodes.
Shop & category pages
How the button sits on each product card.
- On the image · After the title · After the price · After Add to Cart
On the image (floating over the product photo), After the title (under the product name), After the price (under the price) or After Add to Cart (beside your theme's Add to Cart). Works with any theme.
Icon + label, Icon only or Label only.
With On the image: Top left, Top right, Top center, Bottom left, Bottom right, Bottom center or Center center.
With On the image: space from the image's edges. Not used with Center center.
With On the image: appears when the card is hovered or something in it has keyboard focus. Touch screens always show it.
With After the title, After the price or After Add to Cart: where the button sits across the card. Left, Center or Right.
With After Add to Cart: copies the look of your theme's Add to Cart, including icon toolbars over the image. Turn off to use the colors below. Next to an icon-only cart button the wishlist button becomes an icon too; the Added color still marks saved products.
The settings screen only shows the options that apply to the Position you pick; hidden options keep their values. Over an image, the button sits on a small white surface so it stays readable on any photo, whatever the Style. Once saved, its icon turns the Added color.
Single product page
How the button sits next to Add to Cart.
Beside Add to Cart (same row as quantity and Add to cart, at the same height; full width on phones) or Below Add to Cart.
Icon + label, Icon only or Label only. Also used by the shortcode button.
Labels & icon
What the button says and which icon it uses.
"Add to wishlist" · "Remove from wishlist". Kept for screen readers even when only the icon shows.
Heart, Heart Solid, Heart Classic, Heart Classic Solid, Heart Modern, Heart Modern Outline, Heart Bold, Heart Bold Outline, Heart Rounded Outline, Heart Line, or Custom (upload).
Only with Icon set to Custom (upload): a small square image (SVG or PNG recommended). Select Icon, Change Icon or Remove.
"Same as Icon" keeps the icon and switches it to the Added color. Or pick another icon or upload one (Custom icon once added).
Before or After label.
Size & shape
Small, Medium or Large.
Filled, Outline or Plain (no box).
0 is square. Any value of at least half the button's height makes it fully round (999 for a pill or circle).
Space above the button where you place it with the shortcode or siteryn_wishlist_button().
Size, Style and Corner radius don't apply while the button matches your theme's Add to Cart.
Colors
The settings screen shows only the colors the chosen Style uses.
| Color | Default | Shown for | Used for |
|---|---|---|---|
| Icon | #155bff | Outline, Plain | The icon (and, with Plain, the label too) |
| Text | #155bff | Filled, Outline | The label (and the icon with Filled) |
| Background | #ffffff | Filled | The button's fill |
| Border | #155bff | Filled, Outline | The outline |
| Hover background | #155bff | Filled, Outline | Fill on hover |
| Hover text & icon | #ffffff | Filled, Outline | Label and icon on hover |
| Added (saved) | #c41e3a | All styles | Once saved: the fill with Filled (icon and label turn white); the icon, label and border with Outline and Plain |
Each color can be fully transparent (the Transparent checkbox) or semi-transparent (the opacity slider). Clearing a field falls back to its default. The defaults meet WCAG AA contrast.
Tooltip
The short message shown after a click.
A short confirmation after adding or removing. The other tooltip options are hidden while it's off.
"Added to wishlist" · "Removed from wishlist"
Adds a link to the wishlist page when a product is added.
Below or Above the button. If there isn't room on that side (for example inside a product image), it flips to the other side, and wraps or shifts sideways to stay inside the card.
The tooltip stays for 1.5 seconds, or 4 seconds when it shows the link. Avoid apostrophes and ampersands in tooltip messages for now; on the storefront they can show as codes such as '.
Live preview
- Shop card · Product page and Normal · Added switches
- The button drawn from your unsaved settings
Beside the Wishlist Button settings, a Live preview card ("Unsaved changes show here") draws the button from the values in the form as you change them, using the real storefront styles. It stays in view while you scroll; on narrower screens it moves above the form.
- Shop card · Product page switches between a sample product card and a sample product page, built from your newest published product.
- Normal · Added shows the button before and after saving. Clicking the button in the preview toggles it and shows the tooltip.
- With a page type turned off under Visibility, the preview says so, for example "The button is turned off for shop & category pages."
- With Show only on hover on: hover the sample card to see the button.
The preview doesn't load your theme's styles, so "Match theme's Add to Cart" is shown with a sample Add to cart. Nothing is applied to your store until you click Save Changes.