View Product Page

General settings

Once you enable it, the plugin adds an “Add to wishlist” button on all the products of your shop.

If you want to load Wishlist shortcodes and widgets that may be cached, you must enable the Enable AJAX loading option available in the plugin General settings.

General settings - AJAX loading

Add to wishlist options

In the Add to wishlist options section, you will be able to decide what to show when clicking on the Add to wishlist button.

Add to wishlist general settings - free version

Loop & Product page settings

Loop settings

The plugin also allows showing the Add to wishlist button on your shop pagecategory pagesproduct shortcodesproduct sliders, and all the other places where the WooCommerce products’ loop is used.

To do it, go to Add to wishlist options 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
Wishlist free 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.

On top of the image frontend example

Product page settings

In the Product page settings section, you can choose the position of the Add to wishlist button.

Product page settings - wishlist free

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: 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
Wishlist page text customization - free version

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 - free version 1
  • “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)
Add to wishlist style - free version 2

Wishlist page

For a correct functioning, once you enable 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 example - free version

You can show the wishlist on any page of your site, different from the one selected by default, and you can choose it in the “Wishlist Page” field of the plugin settings dashboard.

Wishlist page option - free version

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

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

Wishlist detail page

Select the wishlist page

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.

Wishlist page option - free version

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
  • 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
  • Button to remove the product from the wishlist – to the right of the product
Wishlist table - free version
Wishlist table example - free version

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 add to cart options - free version

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

Share wishlist

If you enable the Share wishlist option, you will be able to select the socials in which users can share their wishlist.

Share wishlist options - free version
Share wishlist frontend example - free version

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

  • Social title: Text used as the sharing title (only used on Twitter and Pinterest)
  • Social text: It will be used by 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 to pin the wishlist on Pinterest

Text, style and color customization

Text customization

From the section Text customization in Wishlist page options, you can customize the texts of the wishlist page and add to cart button.

Wishlist page text customization - free version

The options available are:

  • Default wishlist title: default title of the wishlist page if users do not enter a new one
  • “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 button style - free version

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 - free version
  • 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 - free version
  • 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:

Share button customization - free version
  • 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 TwitterPinterest, Email, and WhatsApp style, buttons, and icons.

Shortcodes

YITH Add to Wishlist

The shortcode “[yith_wcwl_add_to_wishlist]” loads the content of the “add-to-wishlist.php” template (the file is in the “templates” folder of the plugin), and prints the “Add To Wishlist” button in the front end.

Shortcode attributes are:

  • ‘wishlist_url’: (string) the URL of the page that contains the wishlist; it is showed only if the product is already in the wishlist.
  • ‘product_id’: (int) the ID of the product to add to the wishlist with the button.
  • ‘label’: (string) the label to show inside the button.
  • ‘browse_wishlist_text’: (string) the label of the button that redirects to the wishlist. This is showed when the product is already in the wishlist.
  • ‘already_in_wishslist_text’: (string) the label showed when the product is already in the wishlist.
  • ‘product_added_text’: (string) the “product added” label, which is showed when a product is added to the wishlist.
  • ‘icon’: (string) the icon to show in the button (selected among the ones of font-awesome).
  • ‘link_classes’: (string) possible classes that can be added to the button. If it is a real button, the default class is “add_to_wishlist single_add_to_wishlist button alt”, if on the contrary is plain text, the default class is “add_to_wishlist”.”

YITH Wishlist Table

Shortcode “[yith_wcwl_wishlist]” loads the content of the “wishlist.php” template (the file is in the “templates” folder of the plugin), to make appear the wishlist in the page.
Shortcode attributes:

  • ‘per_page’: (int) the number of elements per page (the default value is 5).
  • ‘pagination’: (string: yes/no) it sets whether to paginate the wishlist; in case this parameter is set to “no”, the attribute “per page” will not be considered.
  • ‘wishlist_id’: (int) ID of the wishlist to show; the system will automatically choose which wishlist to show if no ID is specified
  • ‘action_params’: (string) used to alter the output of the shortcode; shouldn’t be used normally
  • ‘no_interactions’: (string: yes/no) “yes” disables any interactive element of the wishlist