Browse documentation

Wishlist Buttons & Placement

Styling the wishlist button

Give your wishlist action a look that feels at home in your storefront-while keeping the save state obvious and reassuring for every shopper.

Style with purpose, not guesswork

A well-styled wishlist button makes saving feel intentional. GoScript Advanced Wishlist for WooCommerce gives you a focused set of visual controls, so you can match your store’s tone without turning a familiar customer action into an experiment.

1. Start with a button preset

Presets are a fast, reliable starting point. Choose the closest visual direction, then make only the refinements your store genuinely needs.

  1. Open Advanced Wishlist → Settings.
  2. Find the Button style section.
  3. Select a Preset: Minimal, Classic, Pill, Outline, or Filled.
  4. Review the live preview, then save your changes when the action feels balanced beside your product controls.

2. Refine the visible states

Once you have a strong base, the button controls let you keep normal, hover, and saved states clear across your storefront. This is especially valuable when shoppers return to a product they have already saved.

Default stateAdjust the background, text colour, border, border radius, and visual weight of the initial action.
Hover stateSet hover background, text, and border colours that offer a small but confident interaction cue.
In-wishlist stateUse the dedicated saved-state text colour so customers can instantly understand that the product is already in their list.
Scale and shapeChoose Small, Medium, or Large, set icon size, and use border radius to match the character of your storefront.

3. Keep the action clear in every context

Good styling should make the button easier to understand, not simply more decorative. Review it on single product pages and product grids, then check both its untouched and saved states.

  • Keep enough contrast between text, icon, background, and surrounding product content.
  • Check the hover treatment on desktop and the resting state on touch devices.
  • If you choose Icon only, make sure the hover label remains meaningful to shoppers.
  • Use the preview’s Preview in wishlist option to assess the saved state before publishing.
  • Use Use theme button styling when your theme’s established button language is the strongest fit.

Next steps

Fine-tune the individual button details or decide when your theme should take the visual lead.

Need help with Advanced Wishlist?

Check the documentation first, or contact us if you still need a hand.

Contact Support