View Product Page

General settings

In the General section from the Settings tab, you can choose to enable the plugin features for all the users or only for registered ones through the option Enable wishlist for. The features available are the same for both types of users.

General settings

Within the same section, you will find the following options:

  • Enable Added/Removed notices: when activated, popup notices will show when a product has been added or removed from the wishlist.
  • Enable “Add to wishlist” tooltip: this allows showing a tooltip when hovering over Add to wishlist link.
  • Add to wishlist tooltip style: you can choose the text and background colors for the Add to wishlist tooltip.
  • Enable AJAX loading: when activated, all wishlist elements will load via ajax, so as to avoid any issues caused by caching systems.

Tooltip sample

Wishlist tooltip example

Multi-wishlist settings

“Multi-wishlist” function allows users to create different wishlists to organize products better. In order to make this possible enable the “Enable multi-wishlist feature” option in “YITH -> Wishlist -> Settings -> General -> Multi-wishlist settings”. Then select whether you want to enable multi-wishlists to all users or only to registered ones.

Please note: if you have previously enabled the option Enable wishlist for > Only authenticated users, the same will apply to the multi-wishlist feature and the option Enable multiple wishlists for will be automatically disabled.

Multi-wishlist settings

Every time users will add a new product to the wishlist, they will be able to select one of those already available or to create a new one.

Please note: this depends on the settings configured in Add to wishlist options, specifically on the option “When clicking on Add to wishlist” that, if set to “Automatically add to the default list”, it won’t give users the possibility to choose.

Choose wishlist - frontend example

Users can access their wishlists by clicking on Your wishlists link on the Wishlist page or through the widget (if added to the sidebar).

Manage your wishlists
View wishlist sidebar

Manage logged and unlogged users

By default, the plugin allows its functionalities both to registered users and to unauthenticated users. However, you can choose to limit wishlist use only to registered users by enabling “Enable wishlist for >  Only authenticated users option in the General options of the plugin Settings, mentioned above.


As soon as they try to add a product to the wishlist or display Wishlist page, they will be redirected to the “My Account” page and a message will be shown that invites them to register.

My account wishlist login message

When plugin functionalities are enabled also for unregistered users, it is shown a message by default, right inside the “Wishlist” page, that invites them to log in. This message can be changed in Login message for non-authenticated users field available in General settings > Multi-wishlist settings.

Use %login_anchor% placeholder to show login link; leave empty to hide.

Only authenticated users options
Login wishlist message

Add to wishlist – General settings

All the options to configure the Add to wishlist button can be found in the plugin’s Settings section > Add to wishlist.

In the General settings section, you will be able to decide what to show when clicking on the Add to wishlist button and after a product is added to the wishlist.

Add to wishlist general settings

The option When clicking on Add to wishlist has three different options. Choose the action that will be the default one from:

  • Automatically add to the default list: the product will be added to the default wishlist without any possibility to choose a different wishlist
  • Show a modal window to allow users to choose a wishlist: this will give users the possibility to select the wishlist where they want to add the product from a popup
  • Show a dropdown to allow users to choose a wishlist: this will give users the possibility to select the wishlist where they want to add the product from a dropdown.

The option When product is added to wishlist allows choosing the modal window behavior. Choose the action that will be the default one from:

  • Automatically close the modal: this will automatically close the popup after adding the product to the wishlist
  • Leave the modal open: the popup will be kept open.

The option After product is added to wishlist allows choosing the look of the wishlist button when the product has already been added to a wishlist. Choose the action that will be the default one from:

  • Show “Add to wishlist” button: this will show the button Add to wishlist, so your customers will be able to add the plugin to multiple wishlists if they want to
  • Show “View wishlist” link: this will show the link to view the wishlist
  • Show “Remove from list” link: this will show the link to remove the product from the wishlist
  • Add to wishlist button now opens a modal to move or remove items (available only with multi-wishlist option enabled): this allows showing a modal window to remove the product or move it to another wishlist.

Loop & Product page settings

Loop settings

The plugin also allows showing the Add to wishlist button on your shop page, category pages, product shortcodes, product sliders, and all the other places where the WooCommerce products’ loop is used.

To do it, go to the Add to wishlist section and enable the following options in Loop settings:

  • Show “Add to wishlist” in loop: enable it to show the Add to wishlist button to WooCommerce products loop
  • Position of “Add to wishlist” in loop: choose the position of the Add to wishlist button in WooCommerce products loop.
Loop settings

Tip: If you want to give a special look to the Add to wishlist style, select the position On top of the image and you’ll get the following result.

Wishlist button on top of the image loop example

Product page settings

In the Product page settings, you can choose the position of the Add to wishlist button and decide whether to show the count of users related to products added to wishlists.

Product page settings
  • Position of “Add to wishlist” on product page allows you to select the position of the button among After Add to cart, After thumbnails, After summary or using the shortcode
  • Show a count of users with a specific product in wishlist allows users to know how many times the product has been added to a wishlist by other users
Wishlist user count example

Text, style & color customization

Text customization

In the section Text customization, you can configure the text to show for the different options listed below:

  • Add to wishlist” text: used to customize the button text
  • “Product added” text: to customize the text shown when a product has been added to a wishlist
  • “Browse wishlist” text: to customize the text of the Browse wishlist link
  • “Product already in wishlist” text: to customize the text shown to users when they are viewing a product already added to their wishlist
  • “Add to wishlist” popup button text: to customize the button shown in the popup
Add to wishlist text customization

Style & Color customization

In the section Style & Color customization, you will be able to set up the style and color of the button that shows on the product pages.

  • Style of “Add to wishlist”: choose from Textual (uses anchor), Button with theme style (uses the style of the theme currently used), Button with custom style (uses the settings you configure)
  • “Add to wishlist” button style: choose the colors for the Add to wishlist button also on mouseover
  • Border radius: set the radius for the Add to wishlist button
Add to wishlist style & color settings
  • “Add to wishlist” icon: select an icon for the Add to wishlist button from the dropdown (optional)
  • “Add to wishlist” custom icon: upload an icon for the Add to wishlist button (suggested px 32 X 32)
  • “Added to wishlist” icon: select an icon for the Added to wishlist button from the dropdown (optional)
  • “Added to wishlist” custom icon: upload an icon for the Added to wishlist button (suggested px 32 X 32)
  • Custom CSS: enter custom CSS to be applied to Wishlist elements (optional)
Wishlist icons settings

Wishlist page

For correct functioning, after enabling the plugin, a “Wishlist” page is generated on WordPress: it includes the “[yith_wcwl_wishlist]” shortcode that provides the insertion of the table of all products added to the wishlist.

Wishlist page frontend example

You can show the wishlist on any page of your site, different from the one selected by default, by choosing it from “Wishlist Page” field of the plugin section Wishlist page options.

Please note: the page you choose to use as a “wishlist” page must necessarily include the “[yith_wcwl_wishlist]” shortcode.

In case you had issues to display the “wishlist” page, regenerate the permalinks.

Through the option Layout for wishlist view, you can choose from two different styles – Traditional and Modern grid – to be used for the page Manage your wishlists.

Traditional style

Wishlist traditional layout example

Modern grid style

Wishlist modern grid style

The feature Show wishlist info allows you to select the data to show on the wishlists. The options are:

  • number of items in wishlist
  • date of creation of the wishlist
  • download PDF version of the wishlist
  • rename wishlist button
  • delete wishlist button

Finally, by enabling the option Create wishlist in popup, you can let your users create a new wishlist directly in the popup rather than using the endpoint.

Wishlist detail page

From the Wishlist detail page settings available in Wishlist page tab, you can:

Product list style

From the Wishlist detail page settings available in Wishlist page options, you can choose the style of the product list of the wishlists created by the users.

Layout for product list options

Traditional

Traditional product list layout

Modern grid

Modern product list layout

Only images with info at click

What to show in the wishlist table

The plugin makes available a list of options to let you decide what you want to show in the wishlist table. These options are:

  • Product variations selected by the user (example: size or color)
  • Product price
  • Price variation info (show the price difference compared to when the product was added to the list)
  • product quantity (so users can manage the quantity of each product from the wishlist)
  • Product stock (show if the product is available or not)
  • Date on which the product was added to the wishlist
  • Add to cart option for each product
  • Icon to remove the product from the wishlist – to the left of the product
  • Checkbox to select multiple items, add them to the cart or delete them with one click
  • Button to remove the product from the wishlist – to the right of the product
Wishlist table example

How to move products from a wishlist to another

For those users who have created more than one wishlist, you can allow them to move products from one to another by enabling the option Show Move to another wishlist.

Move wishlist options

Now you can choose the style to show this option from a popup or a dropdown.

Popup

Wishlist pop up

Dropdown

Wishlist dropdown

Add to cart from wishlist

The site admin can choose what happens after the user adds a product to the cart from the wishlist.

Wishlist cart options

The options are:

  • Redirect to cart: redirect to cart page if Add to cart button is clicked in the wishlist page
  • Remove if added to the cart: remove the product from the wishlist if it has been added to the cart

To offer users the possibility to add all the products of their wishlist to the cart, you must enable the option Enable “Add all to cart”.

Add all wishlist products to cart

How to arrange products in the wishlist

By enabling the option Enable drag and drop, you will give users the possibility to easily arrange the order of the products they have added to their wishlist through a drag-and-drop action.

Drag and drop wishlist products

Actions on wishlist

There are three wishlist actions: creation, management, and search. You can manage these by enabling the option Show link to pages.

Wishlist actions option
  • Create a new wishlist: To create a new wishlist is essential to insert the name and to select the status, to choose from “public”, “private” and “shared”. To better understand the differences between statuses, follow this step of documentation.
Create a wishlist example
  • Manage wishlists: To edit one of the created wishlists click on “Your wishlists” field. From the page you will be redirected to, you could edit the status of the wishlist or remove it.
Manage wishlist example
  • Search wishlist: The search wishlist function allows obtaining a complete list of all the wishlists, with “public” status, related to the user’s name or to the specified email address.
Search wishlist example

Share wishlist

Users can only share the wishlist for the socials you selected in the Wishlist detail page options:

Share wishlist options
Share wishlist on social media example

Parameters you can configure in order to share the wishlist on social are:

  • “Social title”: text used as the sharing title
  • “Social text”: It will be used by Facebook, Twitter, and Pinterest. Use %wishlist_url% where you want to show the URL of your wishlist.
  • “Social image URL”: image URL that will be used for each wishlist sharing.

If you want to customize the style and colors of the social media buttons, please check this page.

Text, style & color customization

Text customization

From the section Text customization in Wishlist page options, you can customize the texts of the wishlist page.

Wishlist page text customization

The options available are:

  • Default wishlist title: default title of the wishlist page if users do not enter a new one
  • “Create wishlist” page name: the title that will be used for Create wishlist page
  • “Manage wishlist” page name: the title that will be used for Manage wishlist page
  • “Search wishlist” page name: the title that will be used for Search wishlist page
  • “Add to cart” text: text for the Add to cart button in the table included in the wishlist page.

Style & color customization

Here, we will analyze how to customize the styles and colors of the different elements shown on the wishlist page. To do it, go to the Style & color customization section that you find in Wishlist page options.

Let’s start from the Add to cart button.

Add to cart wishlist button customization

The available options are:

  • Style of “Add to cart”: choose from Textual (uses anchor), Button with theme style (uses the style of the theme currently used), Button with custom style (uses the settings you configure)

By selecting Button with custom style, you will be able to configure the following options:

  • “Add to cart” button style: choose the colors for the Add to cart button also on mouseover
  • Border radius: set the radius for the Add to cart button
  • “Add to cart” icon: select an icon for the Add to cart button from the dropdown (optional)
  • “Add to cart” custom icon: upload an icon for the Add to cart button (suggested px 32 X 32)

Now, let’s see how to customize the style and colors for Primary and Secondary buttons.

Primary and secondary buttons style
  • Primary button style: through this option, you can customize the style and colors of the Edit title button on Wishlist view, Submit Changes button on Manage view and Search wishlist button on Search view also on mouseover.
  • Secondary button style: this allows customizing style and color of Show title form and Hide title form buttons on Wishlist view and Create a new Wishlist button on Manage view also on mouseover.

To customize the wishlist table, you have two options:

Wishlist table style
  • Wishlist table style: this allows choosing the color of the wishlist table (when set to Traditional layout)
  • Highlight color: this allows choosing the color that will be used as background for the wishlist table heading and footer (when set to Traditional layout), and for different forms in the wishlist views

The last settings of this section are related to the customization of sharing buttons for social media which are the following:

Social media share buttons customization
  • Share button text color: the color of the text for the Share buttons
  • Facebook share button icon: choose the icon for the Facebook share button
  • Facebook share button custom icon: upload an icon to be used for the Facebook share button
  • Facebook share button style: the color of the Facebook share button

The same options will be also available for Twitter, Pinterest, Email, and WhatsApp style, buttons, and icons.

Ask for an estimate and additional notes pop up settings

By enabling “Enable “Ask for an estimate” button”, a button will appear on the wishlist page of the user. By clicking on it, users will be able to ask the administrator for the final price of the selected products. The administrator receives an email with a link to the concerned wishlist and with the email sent by the user asking for the estimate.

You can see how to manage the “ask for an estimate” email options in the Email settings.

Ask an estimate settings

To give users the possibility to add some notes to the request to be sent, enable the Show additional notes popup option.

The plugin automatically shows the email field to unregistered users. Other fields can be added through the button Add new field. We will analyze later how to set these fields.

The popup will show after users click on Ask for an estimate on the wishlist page.

According to the fields configured, the popup will look like this

Ask for an estimate pop up

How to set additional fields

Let’s analyze the options available in the settings of the additional fields that will show in the popup.

  • Label for the field: insert the name of the field you want to show
  • Required field: enable if you want the field to be required. Leave it disabled to show it as optional
  • Placeholder for the field: enter the placeholder to show in the field
  • Field description: type here the description of the field
  • Position of the field in the form: choose from three different positions: first (this will show the field as first), last (this will show the field as last when two or more available), wide (this will show the field in the whole row).
  • Type of field: choose the type of field from TextEmail, Phone, URL, Number, Date, Textarea, Radio, Checkbox, and Select.

If choosing Select and Radio, a new entry (Enter options for the field) will appear to let you enter the options to be shown in the dropdown.

Ask for an estimate - select field

Here is an example of how the Select field looks like:

"Select" field ask for an estimate popup example

Text, style and color customization

Text customization

You can customize the labels of Ask for an estimate button and the Additional notes text area in the Text customization section

Ask estimate and additional notes text customization

Style and Color customization

From the section Style and Color customization, you can configure the style and colors of the button Ask for an estimate. 

You can choose either a textual link or a button (theme or custom style). If you select Button with custom style, you can set the colors for background, text and border, the border-radius and, optionally, the icon for the button also by uploading a custom one.

Ask for an estimate style and color customization