Building your product pages in Elementor and the wishlist button will not sit where you want it? SaveTo Wishlist ships a native Elementor widget, so you can drag the button exactly where it belongs instead of relying on the plugin’s automatic placement. This guide covers adding the widget, styling it, using it inside product grids, and fixing the issues that come up most often.
What you’ll need
- Elementor, free or Pro.
- SaveTo Wishlist Lite version 1.1.3 or later. Earlier versions do not include the widget.
- WooCommerce, with at least one published product.
- A template or page that has a product to work with, such as a single product template or a product loop.
The widget reads your existing wishlist settings, so there is nothing to set up first. Drop it onto a template and it renders the same button your store already shows.
Add the widget to a product template
- Open the product template or page you want to edit in Elementor.
- In the widget panel, search for Save to Wishlist.
- Drag the widget onto your layout where you want the button to appear.
- Click Update to save.
The widget appears under both the WooCommerce and General categories in the panel, so either one works if you prefer browsing to searching.
The button renders straight away using your current wishlist settings. If nothing appears, see the troubleshooting section below.
Choose the button type
Open the Wishlist Button section on the Content tab. It holds one setting.
- Set Button Type to the style you want.
- Defaults to whatever your product button style is set to in the wishlist settings.
- Changing it here affects this widget only, not the rest of your store.
Ten styles are available:
- Text Only
- Icon Only
- Icon and Text
- Icon and Text Pill
- Solid Icon
- Solid Icon and Text
- Solid Icon and Text Pill
- Minimal Icon
- Minimal Icon and Text
- Minimal Icon and Text Pill
The Pill variants use fully rounded corners. Solid fills the icon shape, and Minimal uses a lighter outline.
Set the alignment
Alignment sits on the Style tab, where Elementor keeps alignment for its own widgets.
- Open the Layout section on the Style tab.
- Set Alignment to Left, Center, or Right.
Alignment defaults to Left.
Change the button colors
Open the Colors section on the Style tab. You get eight color controls, each with a normal and a hover state:
- Text Color and Text Color (Hover)
- Background Color and Background Color (Hover)
- Border Color and Border Color (Hover)
- Icon Color and Icon Color (Hover)
Each one starts at the color already saved in your wishlist settings, so an untouched widget looks exactly like the rest of your store. Change one and it overrides that color for this widget only.
Colors are the only thing the widget overrides. Button size, padding, border width, and icon shape keep coming from your wishlist settings, so change those in SaveTo Wishlist > Settings > Button Placement & Styles.
The color pickers accept solid colors only. There is no transparency slider and no global colors tab, because the wishlist button stores plain hex colors.
Show the button in Loop Grid and Loop Carousel
If you use Elementor Pro, the wishlist button also works inside the Loop Grid and Loop Carousel widgets. You have two ways to get it there.
Leave it to the plugin. Your shop page button placement already applies to loop cards, so the button appears on each card without you adding anything.
Place it yourself. Edit the loop item template, then add the Save to Wishlist widget to the card layout. This gives you control over exactly where on the card the button sits.
When you place the widget yourself inside a loop item, the plugin stops its own automatic button from rendering on those cards, so you get one button per card rather than two. The one exception is when your shop button placement is set to Don’t show. In that case the plugin leaves the cards alone, because removing the automatic button without putting one back would be a step backwards.
Which method should you use?
SaveTo Wishlist gives you three ways to put wishlist features on a page, and they do different jobs. The most important difference: the Elementor widget places the button on a product, while the shortcode and the block display the wishlist itself. Most stores use both.
The Elementor widget puts the Save to Wishlist button wherever you drop it. Use it when you build product templates in Elementor. It is the only one of the three with its own styling controls.
The [saveto_wishlist] shortcode displays a customer’s wishlist. Use it when the wishlist needs to appear outside an Elementor layout, such as a classic editor page, a text widget, or a builder with no native element. See How to Use the Wishlist Shortcode.
The wishlist block does the same job as the shortcode, in the WordPress block editor. Use it when you edit pages with blocks rather than a page builder. See How to Use the Wishlist Gutenberg Block.
Troubleshooting
The button does not appear at all
Work through these in order.
- No product in context. The widget only renders where WooCommerce has a product to work with. A plain page, or a template not bound to a product, gives it nothing to render, so it stays empty. Put it on a single product template, a loop item template, or a page that sets a product.
- Guest wishlists are turned off. If Disable Guest Wishlist is enabled in your wishlist settings and you are viewing the site logged out, the button is hidden on purpose. Log in, or turn that setting off, to see it.
- SaveTo Wishlist is older than 1.1.3. The widget does not exist in earlier versions. Update the plugin.
Two wishlist buttons appear on the product page
This usually resolves itself. When your Elementor product template contains the widget, the plugin unregisters its own single product placement, so only the button you placed renders.
Related products, upsells, and cross-sells are deliberately left alone, because those cards render through the shop placement. If you see a second button on those, that is the shop placement doing its job. Change it in SaveTo Wishlist > Settings > Button Placement & Styles.
The color pickers have no effect
Two settings switch the color controls off, and each one shows a message in the panel explaining why.
If your product button mode is set to Theme Default, the button inherits your theme’s button styling and the plugin applies no color of its own. Switch the product button mode to Preset in your wishlist settings to control colors.
If your wishlist icon is a custom uploaded image, Icon Color and Icon Color (Hover) do nothing, because an uploaded image cannot be tinted. Swap it for a built-in icon shape in your wishlist settings if you want color control.
A blog layout appears instead of the wishlist
If you open a wishlist link and see your posts archive design instead of the wishlist, an Elementor Theme Builder archive template is taking over the page. This happens when that template’s display condition targets the posts archive, which also matches individual wishlist views.
To work around it:
- Open Templates > Theme Builder and select your archive template.
- Open its Display Conditions.
- Remove the condition that targets the posts archive.
- Build your posts archive as a standalone page instead of a Theme Builder template.
Frequently asked questions
Do I need Elementor Pro to use the widget?
No. The Save to Wishlist widget works in free Elementor. Elementor Pro is only needed for the Loop Grid and Loop Carousel widgets and for Theme Builder templates.
Will the widget override my wishlist settings?
Only the eight colors, and only for that one widget. Button type and alignment are per widget too. Everything else, including size, padding, border width, and icon shape, still comes from your wishlist settings.
Can I use the widget and the automatic placement together?
Yes. The plugin handles the overlap for you. On a product template containing the widget it turns off its own single product placement, and inside loop items it stands down so each card shows one button.
Why is there no transparency slider on the color pickers?
The wishlist button stores solid hex colors only. A transparent or global color would preview correctly in the editor and then fall back to the saved color on the live page, so those options are switched off rather than left to mislead you.
Need help?
If you have a question or run into any issues, we’re here to help.
- Premium users: Open a support ticket
- Free users: Visit our community forum
