How to Use Preset Templates to Style Wishlist Buttons

Does your store need a design refresh, but you don’t have the time to manually tweak every single pixel? Choosing the right look for your Add to Wishlist buttons shouldn’t be a time-consuming chore.

With the Configuration Mode settings in SaveTo Wishlist, you can professionally style your wishlist buttons in seconds. Whether you want to use instant Style Presets or dive into Custom Settings, you now have total control over how your buttons appear on Product, Shop, and Cart pages.

By the end of this guide, you’ll know how to toggle between design modes and give your store a cohesive, professional look that matches your brand perfectly.

Prerequisites

• SaveTo Wishlist Lite installed and active.
• Administrator access to your WordPress dashboard.
• WooCommerce installed and configured.

Why Use Button Style Presets?

Speed and consistency are vital for any growing WooCommerce store. When your buttons look great and function identically across all pages, it builds trust with your shoppers.

Presets save time — swap button looks instantly without manual CSS or color picking. And since each page location is independent, you can apply different designs to the Product, Shop, and Cart pages separately.

💡 Tip:
If you prefer a completely unique look, you can still use a preset as a “base” and then customize the colors afterwards!

1. Access the Button Style Tabs

We’ve organized the settings into easy-to-manage categories so you can style each part of your store individually.

1. Navigate to SaveTo Wishlist → Settings.
2. Go to the Button Placement & Styles tab.
3. Three sections appear: Product, Shop, and Cart. Click the one you want to edit.

2. Choose Your Configuration Mode

Each location has a Configuration Mode radio selector. This is where you decide how much control you want:

1. Select Use Presets to view the wishlist button template gallery.
2. Alternatively, select Custom Settings if you prefer to skip the templates and use the manual color pickers.

3. Apply a Preset Template

Inside each section, select the Use Presets tab under the Configuration Mode option.

1. Browse the available presets (e.g., “Classic Red,” “Minimal Dark”, or “Modern Purple”).
2. Click a preset to apply it. The tool will automatically update the button’s shape, border, and default layout.

4. Fine-Tune Your Colors

If you choose Custom Settings, the preset picker is replaced by individual design controls. Use these to build your button from scratch or customize a preset “base.”

1. Typography & Size: Set the exact Text Size and Icon Size.
2. Color Pickers: Manually choose your Background Color, Text Color, and Icon Color.
3. Border & Shape: Adjust the border width, color, and corner roundness.
4. The color picker stays open while you work, making it faster to compare different shades without closing the menu repeatedly.

5. Apply Independent Styles

Remember, you can mix and match styles for different contexts!

1. Use a large Custom button on your Product Page to make it the primary call to action.
2. Apply the Minimal Preset on your Shop Page to keep your product grid clean and uncluttered.
3. Select the Modern Preset on the Cart Page to encourage customers to save items for later instead of abandoning them.

6. Save and Review Your Changes

1. Click Save Changes at the bottom of the page.
2. Visit your shop and a product page to see your new button styles in action!

Troubleshooting Common Roadblocks

⚠︎ The preset didn’t change my button color.
Presets primarily control the structure and template of the button. If you have previously set a “Custom Color,” that color will be replaced. Update the color picker settings directly from the Custom Settings child tab to ensure your brand colors are applied to the new template.

⚠︎ The button looks different on my mobile phone.
Some WordPress themes have very strong “Global Styles” that try to override plugin buttons. If your button looks “boxed in” or the font is too small, try a different preset or check your theme’s button settings.

If your page layout isn’t updating after saving, clear your site cache. For more on this, see the official WooCommerce guide on clearing caches.

FAQ

➤ When should I use Preset mode instead of Custom mode?
Use Preset mode if you want a guaranteed “good” design quickly. Use Custom mode if your brand uses non-standard colors or if you need the button to be a very specific size.

➤ Does changing the Shop Page preset affect the Product Page?
No. Each page location (Product, Shop, Cart) is 100% independent, allowing you to optimize the user experience for each specific area of your store.

➤ Will selecting a new preset delete my previous custom colors?
Yes, if you confirm the change, your current settings will be replaced by the selected preset’s default styles. After applying the preset, you can still update the colors from the Custom Settings child tab.

Speed Up Your Store Design with Preset Templates

You’ve now moved from manual styling to high-speed design! By using Preset Templates, you ensure your store looks professional and consistent, which is a key factor in converting browsers into buyers.

Now that your buttons look perfect, head over to the General tab and enable Fade Notifications to make the “Add to Wishlist” experience even smoother!