Style and 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 TwitterPinterest, Email, and WhatsApp style, buttons, and icons.

Getting started with free version of the plugin

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

General settings

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.

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.

How to show “Add to wishlist” in loop

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

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.

Add to wishlist on product pages

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

The option 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.

 

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

Style and color customization

In the section Style and 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)

 

 

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.

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.

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.

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

Users can only share the wishlist for the socials you selected in YITH Plugins -> Wishlist.

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.