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.
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 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
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.
Product page settings
In the Product page settings section, you can choose the position of the Add to wishlist button.
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
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” 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)
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.
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.
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.
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.
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
Add to cart from wishlist
The site admin can choose what happens after the user adds a product to the cart from the wishlist.
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.
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
From the section Text customization in Wishlist page options, you can customize the texts of the wishlist page and add to cart button.
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.
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 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: 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 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.
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
Compatibility with YITH WooCommerce Frequently Bouthgt Together allows to insert, in “Wishlist” page, a slider that will show all the products related to one or more products of the wishlist (through the use of Frequently Bought Together).
For all information about the functioning of YITH WooCommerce Frequently Bought Together, we suggest you to read the official documentation of plugin