SaveTo Wishlist for WooCommerce

Insights & Updates

SaveTo Wishlist Blog

WordPress guides and resources for boosting sales with SaveTo Wishlist

Woostify Wishlist: How To Set Up Buttons In WooCommerce (Placement & Styling Guide)

Woostify Wishlist: How To Set Up Buttons In WooCommerce (Placement & Styling Guide)

You install a wishlist plugin on your Woostify store and load the shop page. The button is sitting somewhere odd. It crowds the Add to Cart button, or it hides behind a product image. Sometimes it vanishes when you hover over a product card.

That isn’t a small cosmetic problem. A Woostify wishlist button nobody can find is a save that never happens. And a save that never happens is a shopper you can’t bring back.

Here’s the good news: SaveTo Wishlist Lite handles the styling side for you the moment it spots Woostify. What it can’t decide for you is where the button should sit.

So this guide covers both halves. First, what the integration does on its own. Then, the placement choices you’ll make to get a seamless layout, including two specific positions you’ll want to avoid.

Table of Contents


Why Wishlist Button Placement Decides Whether Shoppers Save

Smiling young woman holds a colorful handheld "Bark Translator" device beside a surprised German Shepherd in a bright product photo.
A clear wishlist button placement helps shoppers save items so they don’t lose track of them (click to zoom).

A wishlist only earns its keep if shoppers actually use it, and placement plays a major role. Industry evidence highlights just how much room there is to stand out with great design.

The Baymard Institute’s product page UX benchmark was updated in March 2026. It found that 52% of leading desktop ecommerce sites have mediocre or worse product page performance. On mobile, that figure climbs to 62%. The benchmark covers 155 or more sites and over 30,000 manually rated scores.

Product listings offer an even bigger opportunity. Baymard’s benchmark found that 80% of ecommerce sites leave significant room for usability improvement on product lists. This means a clean, intentional layout will immediately set your store apart.

Then there’s the device split. Adobe Analytics reported that mobile drove 56.4% of online transactions over the 2025 holiday season, up from 54.5% a year earlier. Testing your placement across both desktop and mobile screens ensures a seamless experience for all shoppers.

🔍️ One thing we see repeatedly: a store owner picks a placement, checks it once on a laptop, and moves on. The problems almost always turn up somewhere else. Usually on a category archive, on a variable product, or on a phone. Check all three before you call it done.

Want the broader picture of shoppers who look and leave? Our guide to WooCommerce browse abandonment covers that pattern in detail.


What The SaveTo Wishlist And Woostify Integration Actually Does

Young woman in a blazer taps a holographic shopping interface labeled Save to Wishlist over a city rooftop setting.
The same button, a dozen possible homes — the integration styles it, you place it.

The integration works automatically as a lightweight compatibility stylesheet, keeping your store fast and saving you from having to dig through complex settings screens.

SaveTo Wishlist Lite 1.1.1 checks the active WordPress template identifier. When it reads exactly woostify, the plugin loads an extra stylesheet. That stylesheet sits on top of whichever base frontend stylesheet you’ve selected. It then adjusts stacking, alignment, and spacing so the button fits Woostify’s markup.

Here’s what it changes, and what it deliberately leaves alone.

ContextWhat the Woostify stylesheet adjusts
Shop and archive, on-image placementsRaises the button container to z-index: 3, so it stacks above the product image
Shop and archive, inline placementsSets a vertical flex layout with a 10 pixel top margin. Also matches Woostify’s left, centre, and right alignment
Single product summaryAdds a 12 pixel top margin to create clean, balanced spacing from the element above it
Colours, typography, borders, sizingPreserved as-is. These remain fully customizable via your plugin and theme settings.

Our guide to wishlist button customization covers the settings that do control appearance.

What the integration doesn’t do

The list of things the SaveTo Wishlist and Woostify integration doesn’t do is just as useful. It adds no JavaScript, no REST endpoints, and no database records. It processes no user data. It also registers no Woostify-specific rendering hooks, and adds no Woostify settings page.

Since the integration runs automatically in the background, you won’t need to look for a dedicated Woostify settings tab or toggle. Detection is automatic, and no setting turns the Woostify stylesheet on or off by itself.

Child themes are covered too. Run a child theme whose parent identifier is still woostify, and the stylesheet loads the same way. The child theme’s own identifier isn’t used for detection.

Even if a customized setup prevents automatic detection, your site remains completely functional. SaveTo Wishlist Lite seamlessly falls back to its standard stylesheet to ensure your buttons keep working smoothly.

Flowchart showing how SaveTo Wishlist Lite detects the Woostify theme and loads its compatibility stylesheet
Automatic theme detection runs seamlessly in the background on every frontend page (click to zoom).

What You Need Before You Start

The requirements are short, and each one is essential for the integration to run.

ComponentRequirement
SaveTo Wishlist Lite1.1.1 or later
WordPress5.8 or later, tested through 7.0
PHP7.4 or later
WooCommerce4.0 or later, tested through 10.2
Active themeWoostify, or a child theme built on Woostify

SaveTo Wishlist Lite automatically verifies that WooCommerce is active before initializing, keeping your dashboard running smoothly and safely.

Two things you don’t need: a paid plan and a specific Woostify version. The compatibility stylesheet ships in SaveTo Wishlist Lite, the free version. Plus, the code checks no Woostify version, licence, or companion plugin. There’s no free versus Pro distinction on the Woostify side either.

This gives you broad compatibility across different Woostify releases. We always recommend giving your pages a quick visual check on your active theme version to make sure everything lines up as expected.


How To Set Up Your Woostify Wishlist Buttons

The Woostify integration works out of the box, so you can focus entirely on selecting the placement that gives your store the most polished look.

Placement is one of the levers we cover in our guide to wishlist conversion optimization.

Everything lives in one screen: SaveTo Wishlist → Settings → Button Placement & Styles. You’ll need administrator permissions (manage_options) to access this screen, ensuring your site’s styling settings remain secure.

Set your shop and archive placement

Under Shop Page, open the Button Placement dropdown. This one control covers your main shop page, product category pages, and other product archives. Five options are documented as working well with Woostify’s product cards.

Advanced Coupons has a great rule of thumb for this in its guide to optimising an ecommerce site: can you spot the button from across the room?

  • Top Right of the Product Image: The stylesheet stacks the button above the image.
  • Top Left of the Product Image: Same handling as the right corner. Pick whichever corner your sale badges don’t already use.
  • Above the Product Title: Sits in Woostify’s card content area and inherits your card alignment.
  • Below the Product Title: Sits under the title, so long titles push it down rather than crowd it.
  • Above the Add to Cart Button: Keeps the save action beside the buy action without competing with it.
SaveTo Wishlist Shop Page settings with Button Placement set to Above the Add to Cart Button
The Shop Page Button Placement control, set to one of the placements that suits Woostify product cards (click to zoom).

The three content-area placements inherit Woostify’s alignment automatically. Set your product cards to centred text, and the button centres. Left and right aligned cards behave the same way.

SaveTo Wishlist buttons rendering inside a Woostify product grid on a WooCommerce shop page
Wishlist buttons sitting inside Woostify product cards on the shop page (click to zoom).

Set your single product placement

Under Product Page, you’ll find a second Button Placement dropdown. The two settings work independently, so changing one does nothing to the other.

SaveTo Wishlist Product Page Button Placement dropdown open, showing all wishlist button position options
The Product Page Button Placement dropdown, with every position option visible (click to zoom).

Four placements are documented as working well on Woostify product pages.

  • Above the Add to Cart Button: Puts the save option in front of shoppers before they commit.
  • Below the Add to Cart Button: The settings screen’s own default, and it picks up the 12 pixel top margin.
  • Above the Product Title: Useful when your product summary runs long and you want the save action visible early.
  • Below the Product Title: Sits with the title block rather than the buying controls.
SaveTo Wishlist button on a Woostify single product page below the Add to Cart button
The wishlist button in the Woostify single product summary (click to zoom).

There’s a fifth option: Inline with the Add to Cart Button. Feel free to test this position against your custom product layout to see if it suits your theme design.

Both dropdowns also carry a Don’t show option. Choosing it stops the button rendering hook from being registered in that context. That’s cleaner than hiding the button with CSS.

Choose how much styling to load

Still on the same screen, find Frontend Styling and the setting labelled Frontend CSS Loading. It picks which base stylesheet loads. The Woostify stylesheet then loads on top of whichever you choose.

  • Full styling: Uses the plugin’s own colours and fonts. This is the factory default.
  • Minimal styling: Lets your theme override colours and fonts.
  • No styling: Loads positioning only, and inherits everything visual from Woostify.
SaveTo Wishlist Button Placement and Styles settings showing the Frontend CSS Loading options
Frontend CSS Loading sits under Frontend Styling on the Button Placement and Styles tab (click to zoom).

Have you already tuned Woostify’s typography and colours? Then Minimal or No styling usually gives a more native result. Importantly, the Woostify layout rules stay active in all three modes. You aren’t trading the integration away to get theme colours.

Each mode loads a different stylesheet file, so your choice also changes what the browser downloads. If frontend weight matters to you, our WooCommerce wishlist plugin speed test measures what SaveTo Wishlist actually adds to a page.


The Two Placements To Avoid On Woostify

To ensure the cleanest layout right out of the box, here are two placement options you’ll want to bypass for Woostify.

  • On shop and archive pages, avoid Below the Add to Cart Button. Woostify renders that row inside a fixed-height animated area on desktop product cards. The wishlist button can get clipped there, hiding part or all of it.
  • On single product pages, avoid the two on-image placements. Woostify uses a custom product gallery, and top-corner buttons don’t display reliably inside it.

These recommendations are context-specific. Image corners look great on shop cards but aren’t ideal for product galleries, while Below the Add to Cart works best on single product pages. Setting each context independently keeps your buttons looking clean across all templates.

Matrix of SaveTo Wishlist button placements showing which are recommended or discouraged on Woostify shop and product pages
Matching placement options to the right context ensures clean alignment across all pages (click to zoom).

⚙️ Important Setup Step: SaveTo Wishlist Lite 1.1.1 doesn’t apply placement options automatically upon activation. If left untouched, both contexts use default values—Top Right of the Product Image on product pages and Below the Add to Cart Button on shop pages. On Woostify, updating these defaults ensures your buttons align perfectly with the theme’s layout.

The fix takes seconds: Open both placement dropdowns, select recommended options, and press Save, even if the values on screen already look correct. Saving writes the options to the database and ends the guesswork.


How To Confirm The Woostify Styles Are Loading

Since there’s no setting to check, verification happens in the browser. It takes about a minute.

  1. Confirm Woostify, or a Woostify child theme, is active under Appearance → Themes.
  2. Load any frontend page and open your browser’s developer tools.
  3. Search the page source for savetowishlist-woostify.css. That file is the integration.
  4. Check the order. It must load after the main SaveTo Wishlist frontend stylesheet, since it depends on it.
  5. Inspect a button. With a corner placement, the container should resolve to z-index: 3.
  6. In a single product summary, that container should carry a 12 pixel top margin.

If the file isn’t showing up, double-check your template identifier. Detection matches woostify exactly, so a theme that has been renamed or forked away from that identifier won’t trigger the stylesheet.

Since detection runs quietly behind the scenes without admin pop-ups, a quick check in developer tools confirms that your assets are loading perfectly.

Working deeper in the code? Our wishlist REST API guide covers programmatic access.


Guest Wishlists Matter More Than The Styling

One setting does more for your save rate than any styling decision. It’s whether logged-out shoppers can use the button at all.

The control is Disable Guest Wishlist, and it defaults to off. That means guests can save. Turn it on, and SaveTo Wishlist Lite stops registering its shop and product button hooks for logged-out visitors. The button doesn’t appear at all.

We highly recommend keeping this default enabled. Baymard’s product page benchmark found that 89% of sites don’t make save features easily accessible to guests, meaning you have a great opportunity to stand out. Meanwhile, 21% of surveyed shoppers say they rely on save features. That gap is the opportunity.

The same logic drives WooCommerce guest checkout: making key actions seamless for guests boosts engagement and increases conversions.

The Woostify integration doesn’t branch on login status. Guests and logged-in customers get the same placements and the same layout rules. There’s no separate guest styling to configure.

Chart comparing 89 percent of sites hiding guest save features against 21 percent of shoppers who use them
Enabling guest wishlists bridges the gap for the 20% of shoppers who prefer saving items before creating an account (click to zoom).

Scope & Compatibility Guidelines

The stylesheet targets standard WooCommerce and Woostify markup. Where your store departs from that markup, the rules stop matching.

  • Page builder and block product grids: Designed for standard Woostify card markup; custom block grids should be checked by eye.
  • Quick view interfaces: Uses standard button placement; review your modal layout to ensure proper alignment.
  • Custom product loops: A loop built in a custom template sits outside the tested scope.
  • Woostify premium modules and companion plugins: No compatibility is established for these.
  • Cart page behaviour: Cart layouts are handled separately and aren’t affected by this specific Woostify integration.

This stylesheet focuses specifically on core wishlist layouts in SaveTo Wishlist Lite. If you use advanced extensions (like SaveTo Wishlist Pro or Gift Registry Addon features), giving them a quick visual review ensures everything renders as intended.

While core features undergo continuous automated testing, custom theme styling is best verified with a quick visual check on your live store.

Custom layouts and special product types (such as out-of-stock or non-purchasable items) are simply worth a quick visual check on your live store to ensure the button renders exactly where you want it.

Diagram showing which WooCommerce contexts the Woostify compatibility stylesheet covers and which fall outside its scope
Standard WooCommerce and Woostify markup render seamlessly out of the box (click to zoom).

Does your store lean on any of the uncovered contexts? Our product table integration guide shows how a different layout context gets handled.


Frequently Asked Questions: SaveTo Wishlist And Woostify

Do I need to turn the Woostify integration on?

No. There’s no Woostify settings page, no toggle, and no option controlling the stylesheet on its own. SaveTo Wishlist Lite checks the active template identifier when it loads frontend assets. If it reads woostify, the stylesheet is enqueued automatically.

Does it work with a Woostify child theme?

Yes. Detection looks at the parent template identifier, not the child theme’s own identifier. As long as the parent is still woostify, the compatibility stylesheet loads normally.

Do I need SaveTo Wishlist Pro for this?

No. The Woostify compatibility stylesheet ships in SaveTo Wishlist Lite, the free version, from release 1.1.1. Paid plans add wishlist analytics, price drop alerts, and back-in-stock alerts. None of those are required for Woostify layout support.

Will it change my button colours or fonts?

No. The Woostify stylesheet assigns no colours, typography, borders, or button dimensions. It only adjusts layout properties: stacking order, flex alignment, and spacing. Appearance stays under your button settings, your Frontend CSS Loading mode, and your theme.

Which Woostify version is supported?

SaveTo Wishlist Lite automatically supports current Woostify versions via template identification, giving you full flexibility across theme updates. We always recommend giving your active theme version a quick visual review when adjusting layouts.

Why is my wishlist button missing on the shop page?

Check three things in order. First, whether Shop Page placement is set to Don’t show, which stops rendering entirely. Second, whether Disable Guest Wishlist is on while you view the page logged out. Third, whether you’re using Below the Add to Cart Button on the shop page, which can sometimes conflict with Woostify’s animated product cards.


Give The Save Button A Place To Live

The Woostify integration is designed to be lean, fast, and effortless. It removes layout friction so your save buttons look like a natural, native part of your theme, working quietly in the background without adding unnecessary bloat.

All that’s left is choosing the placements that best highlight your products and fit your store’s style.

  • Confirm the requirements and that Woostify is the active template (what you need).
  • Open both placement dropdowns and save them explicitly, even if they look correct (how to set up).
  • Select recommended layout positions for shop archives and single product pages (placements to avoid).
  • Check that the compatibility stylesheet is loading to verify your theme setup (how to confirm).
  • Keep guest wishlists enabled to maximize shopper saves (guest wishlists).
  • Review page builder grids, quick views, and custom loops on your live site (limits).

Your Woostify wishlist buttons should look designed alongside your theme, not bolted on afterwards. Our Woostify setup guide walks through the settings screen. Or compare what each plan includes on the SaveTo Wishlist pricing page.

author avatar
Michael Logarta

Get The Best WooCommerce Wishlist Plugin

Create wishlist functionality and grow your store quickly & easily.
Get SaveTo Wishlist Now

Share article

Complete Your Purchase