View Product Page

Wishlists

Once you enable it, the plugin adds an Add to wishlist button right inside all product detail pages of your shop through which users can create their wishlists.

Wishlist link button in product page

When you first install the plugin, a default wishlist will be created (under the “My wishlist” name). The default wishlist is the one users use in case the “multi-wishlist” functionality hasn’t been enabled.

You can configure the name give to the default wishlist from the Wishlist page section in Customization > Labels. Click here to read more about it.

Each wishlist created in the site is registered right inside the Wishlists section of the plugin Dashboard tab.

Wishlists in dashboard

Click on the View wishlist icon to have access to the selected wishlist detail.

View wishlist button

Once you click on it, you will be redirected to the wishlist page:

View wishlist page example

Wishlist status

You can assign a status among “public”, “shared”, “private” to each wishlist. The differences between statuses are in the visibility they give to the wishlist.

Wishlist statuses
  • “Public”: the wishlist is accessible to everyone, therefore it is shown as a result in the search form in case the user’s name or email address of the wishlist owner has been typed
  • “Shared”: the wishlist can be shown only to the owner and to users who were given the direct link to the wishlist detail page. It is not shown in the search form.
  • “Private”: the wishlist is available only to its owner and site administrator. If a non-owner user tries to visit private wishlists, the plugin will return a 404 page.
Create a new wishlist

Users can edit the selected status from the Privacy section from the list of wishlists:

Wishlist privacy

If multi wishlist is disabled, the status of the default wishlist will be “public” and it cannot be changed.

Popular products

All products included in at least one of the wishlists active on the site are inserted in a dedicated list available in the “Popular” section of the plugin settings dashboard.

Popular products tab

You can see the following information for each product in the list:

  • Number of wishlists where the product is included (wishlist count).
  • When the last promotional email was sent.
  • List of users who have added the product to at least one of their wishlists. (1)
  • Create a promotional email. (2)
  • Option to export users. (3)

Promotional email

For each product in the table, you can send a promotional email in one of the following modalities:

  • Simultaneously to all users who added the product to their wishlist;
Create promotion button
  • Or you can send it to a specific user. First, click on the icon to view the list of user that added the product to their wishlist:
View users that added a popular product to their wishlist

Then select which single user you wish to send the promotional e-mail:

Create a single user promotion

How to customize the promotional email content

By clicking on Create promotion, you will have the possibility to set your promotional email choosing from HTML or Text and customizing the main content. You can use the following placeholders:

{user_name} {user_email} {user_first_name} {user_last_name} {product_image} {product_name} {product_price} {coupon_code} {coupon_amount} {add_to_cart_url}

About the {coupon_code} and {coupon_amount} placeholders, it will print out the code and the amount of the coupon that you select in the “Coupon” section immediately below:

Edit the promotional e-mail

Export users

Export users that added the product to their wishlist

With the Export users option you are able to export all users that have added that specific product to their wishlist, in CSV format. You will see the user ID, Users email, first name, and last name.

General settings

From the General tab within Settings you can configure the general options of the plugin, which include the Multi-wishlist settings too.

General settings
  • Enable wishlist for: choose to enable the plugin features for all users or only for registered ones. If you enable it only for authenticated users. As soon as they try to add a product to the wishlist or display the Wishlist page, they will be redirected to the “My Account” page and a message will be shown that invites them to register.

You can edit the login message for unauthenticated users from Customization > Labels > Multi-wishlist (click on this page to read more about it).

  • Enable Added/Removed notices: when activated, popup notices will show when a product has been added or removed from the wishlist.
Removed item from wishlist popup
Removed item popup example
  • Enable “Add to wishlist” tooltip: this allows showing a tooltip when hovering over Add to wishlist link. You can refer to the Customization settings in this page to check how to edit the text and colors for this option.
Tooltip example
Tooltip example
  • Enable AJAX loading: when activated, all wishlist elements will load via ajax, so as to avoid any issues caused by caching systems.

Multi-wishlist settings

Multi-wishlist settings

Enable the Multi-wishlist feature if you would like to allows users to create different wishlist so they can better organize their products. Once activated, you choose to enable multiple wishlist for all users or only authenticated users.

If you have previously selected in General settings the 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.

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

Choose wishlist
Multiple wishlists example

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.

Users can access their wishlists by clicking on Your wishlists link on the Wishlist page:

List of multiple wishlists

or through the widget (if added to the sidebar):

Widget link example


General settings

All the options to configure the “Add to wishlist” button actions can be found in the Settings > Add to wishlist tab. In the General settings section you can configure the general actions that are triggered when a user clicks the “Add to Wishlist” button.

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:

  • Show a notice: select this option if you want to show a notification after a product is added to the wishlist.
Notice after adding a product to the wishlist
Product added to wishlist notice
  • Show a modal window: select this option if you would like to show a modal window when a product is added to the wishlist.
Add to wishlist modal
Product added to wishlist modal window

If you select this option, you will be able to choose the modal window behavior through the Modal closure options. You can decide whether to automatically close the modal or leave it open.

Modal closure options

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
  • Show a modal window 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.
Move wishlist modal window
Move to another wishlist modal window

Loop & Product page settings

You will find the options to configure the position and display of the “Add to wishlist” button specifically on the WooCommerce’s loop and Product page in the Settings > Add to wishlist tab.

Loop settings

From the Loop settings section you enable to show 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. Then, you can set the position, icon style and counter options:

Loop options
  • 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. You can choose On top of the image, before “add to cart” button, after “add to cart” button or use a shortcode.

If you select the position on top of the image, you can also configure the following options:

Top of the image position options
  • Position on product image: select in which part inside the product image you wish to show the “Add to wishlist” icon. You can choose top left, top right, bottom left or bottom right.
  • Icon style: choose whether to show the wishlist icon permanently inside the product image or only when the user hovers the mouse over the product.
  • Show a count of users with a specific product in wishlist: enable if you want to show users a counter that displays how many times the product has been added to the wishlist.

Product page settings

You can configure the ‘Add to wishlist’ button position and counter options in the Product page settings:

  • Position of the add to wishlist on product page: choose in which part of the product page to show the “Add to wishlist” button or link. You can choose from after “add to cart” button, after thumbnails, after summary or use a shortcode.
  • Show a count of users with a specific product in wishlist: enable if you want to show users a counter that displays how many times the product has been added to the wishlist.
Wishlist counter example

Wishlist page

From the Settings > Wishlist page tab you will be able to configure the settings related with the Wishlist page and the Wishlist detail page.

Wishlist page settings

In this post, we’ll review the Wishlist page section, where you can configure options related to the page displaying all wishlists created by the user.

Please, note: multiple wishlists can be created only if the Multi-wishlist feature is enabled from the plugin general settings, as explained here. If disabled, the wishlist page and wishlist detail page settings will apply to the default wishlist.

  • Wishlist page: pick which page will be the main Wishlist page. For correct functioning, after enabling the plugin, a default “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.
View wishlist page example

With this option you can show the wishlist on any page of your site, different from the one selected by default.

Please note: the page you choose to use as a Wishlist page must necessarily include the “[yith_wcwl_wishlist]” shortcode. In case you have issues to display the wishlist page, regenerate the permalinks.

  • Layout for wishlist view: select the style option to display the page to manage your wishlists. You can choose between Traditional or Modern:
Your wishlists traditional style
Traditional style
Your wishlists modern style
Modern grid style
  • 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
  • Create wishlist in popup: you can let your users create a new wishlist directly in the popup rather than using the endpoint.
Create wishlist from the popup example

Now we can move to the next step, which is to configure the Wishlist detail page.

Wishlist detail page

From the Wishlist detail page settings available in Wishlist page tab, you can configure the information and actions available in the page of a specific wishlist. Here are the options you can set:

Wishlist detail page

Choose the style of the product list

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.

Product list layout options
Traditional content
Traditional layout
Modern content
Modern layout
Images content
Only images with info at click

Choose wishlist table info

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

Based on the options enabled, users will be able to check the information in the wishlist table:

Wishlist table info

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.

Move wishlist popup
Popup style
Move wishlist dropdown
Dropdown style

Add to cart options from the wishlist

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

Redirect and remove 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 to cart option
Add all products in the wishlist 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
Drag and drop option to arrange products

Actions on wishlist page

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

Wishlist actions option
Actions on wishlists
  • Create a new wishlist: To create a new wishlist, you have to insert the name and select the status, to choose from “public”, “private” and “shared”.
Create a new wishlist

Please, note: This option is available only if the multi-wishlist feature is enabled. If not, users cannot create a new wishlist and all items will be saved in the default wishlist. You can enable the multi-wishlist as explained in this page.

  • 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 your wishlists
  • 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

Share wishlist

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

Share wishlist on social media option
Share wishlist on social media example

To configure the social media title, text and icons, you can refer to the Customization tab from this page.

Ask for an estimate

By enabling the Ask for an estimate button, users will be able to ask the administrator for the final price of the products added to the Wishlist. The administrator receives an email with a link to the concerned wishlist asking for an estimate.

Ask for an estimate

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.

Ask for an estimate button

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

Ask for an estimate popup

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.

Select field

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

Select field example

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

Email settings

In the Email Settings tab, you’ll be able to manage and customize the emails sent to users about the wishlist. There are four:

  • Back in stock email
  • On sale email
  • Ask for an estimate
  • Promotional email: This notification allows sending a promotional email to all the users who have a certain product in their wishlist or only to specific users. You can manage it either from the Popular tab from the Dashboard or directly from the Email Settings. For further details about this email, please refer to this page of the documentation.

You can edit and manage each type of email by clicking on the edit icon:

Email settings

Back in stock email notification

Once enabled, the plugin will automatically send a notification email to the user when an out-of-stock product added to a wishlist is back in stock. Users can unsubscribe from this kind of notification by using the link provided in the email they receive.

In-stock email 1

You can modify the subject line using the Subject field and enter the title of the email notification in the field Email heading (or leave empty to use the default one).

After enabling the email, you can choose the products that won’t be affected by this email notification by adding them to the related field Product exclusion. The same behavior can be applied to product categories by adding them to the Category exclusion field.

The option Email type allows selecting the type of email you want to send (plan, HTML or multipart).

In-stock email 2

To change the main content, according to the email type chosen, you can use the field Email HTML or plain content and take advantage of the following placeholders: {user_name} {user_email} {user_first_name} {user_last_name} {products_table} {unsubscribe_link}

On sale email notification

To send notifications to users when a product in their wishlist is on sale, the site admin can enable and send the On sale item email. Users can unsubscribe from this kind of notification by using the link provided in the email they receive.

Wishlist On sale item email settings 1

After enabling the email, you can modify the Subject and the Email heading (leave empty to use the default options).

Choose the products that won’t be affected by this email notification by adding them to the related field Product exclusion. The same behavior can be applied to product categories by adding them to the Category exclusion field.

Wishlist On sale item email settings 2

The option Email type allows selecting the type of email you want to send (plan, HTML or multipart).

To change the main content, according to the email type chosen, you can use the field Email HTML or plain content and take advantage of the following placeholders: {user_name} {user_email} {user_first_name} {user_last_name} {products_table} {unsubscribe_link}

Ask for an estimate email notification

By default, this email is sent to the site administrator’s email address, in which he will receive a link to the wishlist sent by the user asking for an estimate.

To add new recipients and change other details related to the email, use the following options:

  • Email type
  • Email heading
  • Email subject
  • Recipient(s)
  • Send CC option

Style

From the Customization tab you can configure the style and labels for the plugin options. In this post we’re going to see how to customize the style for:

Customization style

Add to wishlist

From this section you can customize the style of the options related to when a user adds, moves or removes a product from the wishlist.

Add to wishlist style example

Let’s see how to configure them:

Add to wishlist style options
  • Add to wishlist tooltip style: choose the colors for the add to wishlist tooltip.
  • Style of “Add to wishlist”: choose from Textual, Button with theme style or Button with custom style. If you select a Button with custom style, you’ll be able to configure the colors and border radius:
Add to wishlist button with custom style
  • Add to wishlist” icon: You can choose between the same used for “Add to wishlist”, use a default icon or upload a custom one. If you chose the default icon, you can also select:
  • “Added to wishlist” icon: select an icon for the Added to wishlist button from the dropdown (optional)
  • Icon color: choose the icon color (only if you selected the Default or the same icon in “Add to wishlist”).
  • Custom CSS: enter custom CSS to be applied to Wishlist elements (optional).

Wishlist page

From this section you can customize the elements from the wishlist page. First, we can set the style of the “Add to cart”:

Add to cart button in wishlist

The available options are:

Select add to cart button style
  • 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 custom style 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)

Now, let’s see the available custom color options for Primary and Secondary buttons:

Primary and secondary button colors
  • 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

Share button style options
  • Share button text color: the color of the text for the Share buttons
  • Facebook share button icon: choose wether to Show social label without icon, use the Social default icon or Upload a custom icon.
  • Facebook share button style: set the colors of the Facebook share button

The same style and icon options will be available for Twitter (X), Pinterest, Email, and WhatsApp.

Share wishlist button options

Modals

In this section you can configure the icon and color options for the Modals available in the plugin.

Modals icon options
  • Modal icon type: Select which icon type you want to use for the “Add to wishlist” modal
    • Use default icons
    • Same used for the “Add to wishlist” button
    • Same user for the “Added to wishlist” button
    • Use an icon from the default set: selecting this option will allow you to choose one from the plugin library
    • Upload a custom icon

Then, you can set the color options for the elements inside the modal:

Here is an example of the modal window if we select a Star icon with the colors configured in the Modal style options:

Modal options

Ask for an estimate

In this last section, you can configure everything related to the ask for an estimate button.

Ask for an estimate button

The available options are:

Ask estimate custom style options
  • Style of “Ask for an estimate”: 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).

If you select Button with custom style, you can configure:

  • “Ask for an estimate” button style: select the backgrounds, texts and borders colors.
  • Border radius
  • Ask for an estimate” icon type: choose to either show the button without icon, use a default icon or upload a custom icon. When you select the default icon option, you can choose one of the available from the selector.