Use WooCommerce Wishlist Plugins in your Product Tables & Quick View

Published on: Updated: April 15, 2019

Lots of customers have asked us how to add wishlists to their WooCommerce product tables and quick view lightboxes. We’ve tested our WooCommerce Product Table and WooCommerce Quick View Pro plugins with the 2 most popular free WooCommerce wishlist plugins. This tutorial will help you to choose the right wishlist plugin to use with your product tables and quick views, with setup instructions on how to use them together.

Both wishlist plugins have a Pro version with extra features. We tested the free ones, so you can follow the steps in this tutorial without having to buy a wishlist plugin.

WooCommerce Product Table

Add a wishlist feature on your site today!

GET THE PLUGIN

TI WooCommerce Wishlist Plugin

With over 3,000 active installs, TemplateInvaders’ WooCommerce wishlist plugin is a popular choice for many stores. It’s also the most compatible plugin to work with WooCommerce Product Table and WooCommerce Quick View Pro.

The wishlist plugin comes with a widget which shows the number of items in the wishlist. It has a handy link to the main wishlist page.

GET WISHLIST PLUGIN

How it works with WooCommerce Product Table

WooCommerce added product to wishlist in tableThis flexible plugin works beautifully with product tables – both the standard and lazy load methods of loading the table. The ‘Add to Wishlist’ links (which you can reword to anything you like) appear either above or below the add to cart button, or in any other column in the table. If you’re using the add to cart checkbox option that comes with WooCommerce Product Table, then the ‘Add to Wishlist’ link appears before the checkbox.

When you click on the ‘Add to Wishlist’ link for any product, a lightbox will appear confirming that the product has been added. You can either close the popup or click through to the wishlist page, where you can view the items, share them on social media, or buy using WooCommerce.

Demo: See it in action on our product table wishlist demo page.

How to set it up

  1. Install the WooCommerce Wishlist and WooCommerce Product Table plugins, as per the documentation.
  2. Add a product table to any page on your site.
  3. When you activate the WooCommerce wishlist plugin, you’ll be taken through a handy setup wizard where you can choose how your wishlist will work. You can choose to position the ‘Add to Wishlist’ button above or below the add to cart button, and both will appear correctly in the product table. Or if your product table doesn’t have an add to cart column, then choose the ‘Custom position with code’ option and add the shortcode [ti_wishlists_addtowishlist] to any other product field that appears in the table. For example, if you add this shortcode to the short description, long description or a custom field for each of your products, then it will appear in the table.
  4. View the page with your product table, and you will see the Add to Wishlist links!

Tip: If you’re using the ‘Custom position with code’ option, then you must add shortcodes=”true” to your product table. You can either do this in the plugin settings page, or directly in the product table shortcode.

TI WooCommerce Wishlist Plugin Product Table

How it works with WooCommerce Quick View Pro

The TI WooCommerce Wishlist plugin works beautifully with WooCommerce Quick View Pro, automatically adding wishlist links to the quick view lightbox. You can choose to position the links before or after the add to cart button.

WooCommerce Quick View

The quick and easy way for customers to explore and buy your products.

GET THE PLUGIN

How to set it up

  1. Install the WooCommerce Wishlist and Quick View plugins using the documentation for each plugin.
  2. When you activate the WooCommerce wishlist plugin, you’ll be taken through a handy setup wizard where you can choose how your wishlist will work. You can choose to position the ‘Add to Wishlist’ button above or below the add to cart button, and both will appear correctly in the quick view lightbox. Or if you don’t need add to cart buttons in the quick view, then you can show the wishlist links by adding the shortcode [ti_wishlists_addtowishlist] to the short description for each product and including this in the quick view instead.
  3. Test the quick view lightbox for any product, and you will see the Add to Wishlist links!

Please note: The TI WooCommerce Wishlist plugin has a ‘Show successful notice in popup’ option on the settings page. DO NOT enable this option because quick view is a popup, and you can’t have two popups at a time. (If you do enable this option, then nothing terrible will happen – but you won’t see a success message saying that the product has been added to your wishlist.)


YITH WooCommerce Wishlist Plugin

YITH’s wishlist plugin is one of the most popular ways of adding wish lists to WooCommerce. You can use it with WooCommerce Product Table or WooCommerce Quick View Pro by adding the wishlist shortcode to the appropriate place. I’ll provide instructions for both plugins below.

GET WISHLIST PLUGIN

How it works with WooCommerce Product Table

You can use the YITH WooCommerce wishlist plugin to add ‘Add to Wishlist’ text links in your product table. When you add a product to the wishlist, the text will change to “Product added! Browse Wishlist” (you can change this if you like), with a link to the wishlist page.

The plugin works fine with WooCommerce Product Table. However, you can’t add the wishlist link within the add to cart column. You can add it to any other text-based column in the table. Or if you’re a developer, then you can use the developer documentation to add a custom column containing the wishlist shortcode.

WooCommerce Product Table

Add a wishlist feature on your site today!

GET THE PLUGIN

How to set it up

  1. Install the WooCommerce Wishlist and Product Table plugins, as per the documentation. Add product tables to your site as required.
  2. On the YITH plugin settings page (YITH Plugins -> Wishlist), select ‘Shortcode’ from the ‘Position’ dropdown list. (If you select any of the other options then the ‘Add to Wishlist’ link will appear on the single product page, but not in the product table.)
    YITH WooCommerce wishlist plugin settings
  3. The next step is to paste the wishlist shortcode [yith_wcwl_add_to_wishlist] into one of the fields that you’re displaying as column in the product table. You need to do this for every product. You can either add the shortcode to the short description for each product, the main product description for each product, or a custom field (e.g. created using the Advanced Custom Fields plugin).
  4. On the WooCommerce Product Table plugin settings page (WooCommerce -> Settings -> Products -> Product tables), enable the ‘Shortcodes‘ option. You should also use the columns option to ensure that whichever field you’ve added the wishlist shortcode to is present as a column in the table (for example, if you have added it to the short description then your table must contain a short-description column).
  5. Now view the page where you added a product table in Step 1, and you will see the ‘Add to Wishlist’ buttons in the correct column:

YITH wishlist plugin product table

How it works with WooCommerce Quick View Pro

You can use YITH WooCommerce Wishlist with WooCommerce Quick View Pro by adding a wishlist shortcode to the short description field. When your customers open up the quick view lightbox for a product, they’ll see a wishlist link. This appears at the end of the short description:

How to set it up

To use YITH’s wishlist plugin with WooCommerce Quick View Pro, you must add a wishlist shortcode to the short description for each product.

  1. Install the WooCommerce Wishlist and Quick View plugins using the documentation for each plugin.
  2. On the Quick View settings page (WooCommerce -> Settings -> Products -> Quick view), make sure you enable the short description field. This is where the wishlist links will appear.
  3. On the YITH plugin settings page (YITH Plugins > Wishlist), select ‘Shortcode’ from the ‘Position’ dropdown list. (The other options will add the wishlist link to the single product page. But it won’t appear in the product table.)
    YITH WooCommerce wishlist plugin settings
  4. Next, edit each product and add the following shortcode to the short description (this normally appears at the very bottom of the Edit Product screen) – [yith_wcwl_add_to_wishlist].

Which is the best WooCommerce wishlist plugin?

If you want to use wishlists with WooCommerce Product Table or WooCommerce Quick View Pro, then I’d recommend TemplateInvaders’ WooCommerce Wishlist plugin. This is easier to set up because the wishlist buttons automatically appear in your product tables and quick view popups.

YITH’s WooCommerce wishlist plugin is good too. However, you need to manually add the wishlist shortcode. If you’re happy to do that, then this is a valid option too.

Other WooCommerce wishlist plugins

If you’re using WooCommerce Product Table or WooCommerce Quick View Pro with any other wishlist plugins, please let us know. We’d love to test them and publish the details of any more that are compatible. We might even be able to feature your website as a case study!

Filed under: WooCommerce Product Table, WordPress Plugins , ,