Pro Wishlist

The Wishlist module enables your customers to add their favorite products to a wishlist in your WooCommerce store.

Once a product is saved to the wishlist, your customers can find it quickly and easily when they are ready to buy.

In the screenshot below, you can see an example of a Wishlist button on a WooCommerce product page (created with our Botiga WooCommerce theme):

If you want, you can also show a wishlist icon on top of each product image on your Shop and catalog pages.

In the screenshot below, the wishlist icon shows up on the top-right corner of each product image on the Shop page. As our test customer has added the first two products to their wishlist, Merchant Pro shows a solid heart icon instead of the default outline one:

Customers can view their My Wishlist page by clicking the View wishlist button that Merchant Pro displays on the product pages of the items that have been added to the wishlist.

Here’s what a My Wishlist page looks like by default — as you can see below, your customers can add any of the listed products to the cart easily by clicking the belonging Add to Cart button:

Below, we’ll see how to configure and activate Merchant Pro’s Wishlist module.

1. Open the Wishlist Module

Open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area.

Find the Improve Experience section, and click the Wishlist module to open its settings page:

2. Review the Settings of the Wishlist Module

On the admin page of the Wishlist module, you’ll find five groups of settings (in the next sections below, we’ll look into the options for each settings group):

1. General Settings – Here, you can decide where you want the wishlist button to show up in your WooCommerce store.
2. Add To Wishlist Button Settings – This group of settings allows you to customize the position, label, design, and colors of your wishlist buttons.
3. Wishlist Page Settings – These settings let you create and customize your My Wishlist page.
4. Wishlist Sharing Settings – Here, you can enable and configure the module’s wishlist sharing functionality.
5. Use shortcode – Here, you can activate the module’s shortcode that allows you to fine-tune the location of your wishlist buttons.

When you make a change, click the Save button in the top-right corner of the page:

3. Configure the General Settings

The General Settings section lets you show or hide the wishlist button on the following pages of your WooCommerce store:

• Display on shop archive – Here, you can show or hide the wishlist buttons on the shop archive page, including the Shop page, product category pages, product tag pages, etc. By default, this option is enabled.
• Display on single product – Here, you can show or hide the wishlist buttons on your single product pages. By default, this option is enabled.

4. Customize Your Wishlist Buttons

The Add To Wishlist Button Settings section allows you to configure the design of your wishlist buttons (a.k.a. add to wishlist buttons) and, optionally, enhance them with a customizable tooltip.

The available options are:

• Select an icon – Here, you can choose from two stylish heart icons for your add to wishlist buttons.
• Button vertical position – Here, you can set the distance of the wishlist button from the top of the product image on your shop archive pages (default value: 20 px).
• Button horizontal position – Here, you can set the distance of the wishlist button from the right side of the product image on your shop archive pages (default value: 20 px).
• Display tooltip – This toggle lets you enable a tooltip that shows up when your customer moves their cursor over the wishlist icon.
• Tooltip text – This is the text that Merchant Pro displays inside the tooltip when the product hasn’t been added to the wishlist (default value: “Add to wishlist”).
• Tooltip text after adding to wishlist – This is the text that Merchant Pro displays inside the tooltip after the product has been added to the wishlist (default value: “Added to wishlist”).
• Tooltip border radius – Here, you can change the corner radius of the tooltip (default value: 4 px).
• Icon stroke color – This is the color of the wishlist icon’s outline (default value: #212121).
• Icon stroke color (hover) – This is the color of the wishlist icon’s outline when your customer moves their cursor over it (default value: #212121).
• Icon fill color – This is the background color of the wishlist icon (default value: “transparent”).
• Icon fill color (hover) – This is the background color of the wishlist icon when your customer moves their cursor over it (default value: #f04c4c).
• Tooltip text color – Here, you can change the color of the text inside the tooltip (default value: #FFFFFF).
• Tooltip background color – Here, you can change the background color of the tooltip (default value: #212121).

5. Customize Your Wishlist Page

The Wishlist Page Settings allows you to customize the contents and design of your My Wishlist page.

At the top of the Wishlist Page Settings panel, you’ll find two links:

• Click here if you want to edit the page. – This link will take you to your My Wishlist page’s admin interface where you can add extra content to the page. You can also access your My Wishlist page from the Pages > All Pages menu.
• To display the page in your theme header area, assign the page to the primary menu by clicking here. – This link will take you to the Appearance > Menu admin page where you can add the My Wishlist page to one of your menus so that your customers can access it more easily (without adding it to the menu, they can just access it from the single product pages).

You can customize the following options:

• Hide page title – This toggle allows you to show or hide the title of the My Wishlist page.
• Table heading background color – Here, you can change the background color of the heading section of the wishlist table displayed on the My Wishlist page (default value: #FFF).
• Table body background color – Here, you can change the background color of the body section of the wishlist table displayed on the My Wishlist page (default value: #fdfdfd).
• Table text color – This is the text color inside the wishlist table (default value: #777).
• Table links color – This is the link color inside the wishlist table (default value: #212121).
• Table links color (hover) – This is the link color inside the wishlist table when your customer moves their cursor over a link (default value: #757575).
• Buttons color – This is the text color of the Add To Cart buttons inside the wishlist table (default value: #FFF).
• Buttons color (hover) – This is the text color of the Add To Cart buttons inside the wishlist table in mouseover state (default value: #FFF).
• Buttons background color – This is the background color of the Add To Cart buttons inside the wishlist table (default value: #212121).
• Buttons background color (hover) – This is the background color of the Add To Cart buttons inside the wishlist table in mouseover state (default value: #757575).

6. Configure Your Wishlist Sharing Settings

The Wishlist Sharing Settings section allows you to enable your customers to share their My Wishlist pages on social media.

You get access to the following options:

• Enable – Here, you can activate or deactivate the wishlist sharing functionality in your WooCommerce store. By default, this option is enabled.
• Social links – Here, you can add or remove the social networks where your customers can share their wishlists. The available options are Facebook, Twitter, Linkedin, Pinterest, Whatsapp, Telegram, VK, Weibo, Reddit, Ok, Xing, and Mail (social networks enabled by default: Facebook, Twitter, Linkedin). You can add more social networks by clicking the Add new button.
• Display copy to clipboard – Here, you can add a Copy to Clipboard link to the popup that shows up on the screen when your customers click the Share this wishlist link on their Wishlist pages. This allows them to easily copy and share their wishlist URLs with a single click.

7. Activate the Shortcode of the Wishlist Module (for Developers)

The Use shortcode section enables you to define a custom position for your Wishlist buttons on your single product pages.

The shortcode option is for developers — only activate it, if you know how shortcodes work in WordPress (note that when the shortcode is activated, the Wishlist buttons added via the module’s settings will disappear from your single product pages, as the position of the button will be controlled by the shortcode instead of the settings).

The module’s shortcode is as follows:

[merchant_module_wishlist]

To activate the shortcode, toggle the Use shortcode option on:

8. Enable the Wishlist Module

Finally, activate the module. You can do so by clicking the Enable button at the top of the page: