How to Add Wishlist Button in WooCommerce Catalog Mode?

Do you think is it easy to add a wishlist button in WooCommerce? Well, it may be. But when it comes to WooCommerce catalog mode, users are facing problems like this:

How to Add Wishlist Button in WooCommerce Catalog ModeIf you are still reading, it means you have the same problem. But there is nothing to worry about! All you need is a wishlist plugin that integrates perfectly with your WooCommerce Catalog mode plugin. I have interesting options for you. Keep reading.

How to Add Wishlist Button in WooCommerce?

The first thing you need to know is how to add a wishlist button in WooCommerce. There are many plugins to help, but MC Wishlist performs great in WooCommerce catalog mode. So let’s continue with this plugin. 

To get started, you need to create a wishlist button. Among the various setting in the MC woocommerce wishlist plugin, you should check the wishlist button section to customize add to wishlist button. 

Wishlist Button Setting

To configure this section, follow the below path:

WordPress Dashboard > MC wishlist > Settings > Wishlist Button

For the WooCommerce Catalog Mode, the “Product lists” section is important. So let’s jump into its settings.

A) Product Lists

Add to Wishlist Button Settings1 – Show “Add to Wishlist” in listings

By activating this option, add to wishlist button will be shown in the catalog.

2 – Button position in listings 

Add to Wishlist button location settings

1: On image – top left

2: On image – top right

3: Before the “add to cart” button

4:After the “add to cart” button

5: Use shortcode

 

The image below shows all the possible locations to add wishlist button in WooCommerce catalog mode.

Add to Wishlist button possible location3 – Show “Add to Wishlist” in Gutenberg listings

Enable this option if you want to display the add to wishlist button in Gutenberg lists.

4 – Button position in Gutenberg listings

If you want to activate the wishlist for the Gutenberg menu, there will be the following states for the location of the wishlist button.

  • On Image – Top Left
  • On Image – Top Right
  • After Title
  • Before Price
  • After Price
  • Before the “Add to Cart” Button
  • After the “Add to Cart” Button
5 – Button type

In this section, you can choose three types to show the add to wishlist button:

  • Icon only
  • Text only
  • Icon and text
Add to Wishlist button design6 – Default button style

By activating this option, the add to wishlist button will have its default style according to your theme.

7 – Button icon

You can change the wishlist button icon. For this purpose, you can use the existing icons or add your own icon.

8 – Icon style

In this section, you can change the button icon size, color, and hover color.

9 – Button color

Here, you can adjust the add to wishlist button color.

10 – Button sizes

In this section, you can also change the

  • Height of the lines around the button,
  • Height of the button,
  • Amount of bend of the button from the surrounding, and
  • Distance of the button from the surrounding.
11 – Button tooltip styles (Active if Button type = only icon)

You can activate the tooltip from this section and set its color as well as the color of the tooltip text and, most importantly, the direction of the tooltip (Top, Bottom, Left, and Right). 

Add to Wishlist button tooltipB) Tooltip and Button Text Customization

In this section, you can specify your desired text for the add to wishlist button and tooltips.

Add to Wishlist button custom textC) Notification Text Customization

You can customize the notification text for your users by changing the text of the fields you see in the image below.

Add to Wishlist button notification settings

Notices that if you use pop-ups, the notifications will not work. Also, if you don’t want the notifications to work, you can leave the fields empty.

Customize Add to Wishlist Button Using ELEX WooCommerce Catalog Mode

As a WooCommerce store owner, using the catalog mode is some way required. However, it is a bit difficult to implement catalog mode in WooCommerce without special plugins. My recommended plugin to create catalog mode is the ELEX WooCommerce Catalog Mode plugin.

This plugin gives you a friendly workspace where you can define any condition in the catalog. Also, the plugin has full compatibility with the MC wishlist, meaning that you can easily make changes in both plugins without being worried about their integration.

 

After activating the ELEX WooCommerce Catalog mode plugin, there are 3 ways to show add to wishlist button in the catalog.

1 – Replace Add to Cart Button with Add to Wishlist Button

To do this, you must first follow the following path:

WordPress dashboard > WooCommerce > catalog mode

Add Wishlist Button in WooCommerce Catalog Mode with replacing add to cart buttonActivate this option so that you can turn the add to cart button into the add to wishlist button.

  1. Choose for which of the pages the mentioned process will occur.
  2. Place the HTML code related to the add to wishlist button in this section.
  3. The add to wishlist button is placed instead of the add to cart button.

2 – Customize Add to Cart Button

To do this, you must first follow the following path:

WordPress dashboard > WooCommerce > catalog mode

Add Wishlist Button in WooCommerce Catalog Mode with customizing add to cart buttonActivating this option to personalize the add to cart button and turn it into an add to wishlist button.

  1. Enter the text of the button for the product page.
  2. Enter the text of the button for the shop page.
  3. Enter the URL of your wishlist page into the field.
  4. The add to wishlist button is placed.

Wishlist Button in WooCommerce Catalog Mode3 – Hide Price and Show Add to Wishlist Button

Add Wishlist Button in WooCommerce Catalog Mode with hiding priceActivate this option to hide the price and remove the “add to cart”.

  1. Use the add to wishlist HTML code.
  2. The price is replaced with the add to the wishlist button.

Wishlist Button in WooCommerce Catalog ModeSummary

To add a wishlist button in WooCommerce catalog mode, you have two ways:

  • Use the MC Wishlist button settings
  • Customize the add to cart button in ELEX WooCommerce Catalog Mode

 

The ELEX plugin offers three ways to show add to wishlist button in the catalog:

  1. Replace Add to Cart Button with Add to Wishlist Button
  2. Customize Add to Cart Button
  3. Hide Price and Show Add to Wishlist Button

Add Wishlist Button in WooCommerce Catalog ModeNote that when customizing the wishlist button through the ELEX WooCommerce plugin, deactivate the wishlist button in the MC wishlist plugin. Otherwise, you will have two add to wishlist buttons.

As you saw, the MC wishlist and ELEX Catalog Mode plugins have full integration with each other. So if you pick one of them for the catalog mode, don’t hesitate to install the other one for getting the best result.

 

Further Reading

Popular Tags

Blog Business Case Code Snippet Documentation ELEX Address Validation & Google Address Autocomplete Plugin for WooCommerce ELEX Amazon Payments Gateway for WooCommerce ELEX Authorize.net Payment Gateway for WooCommerce ELEX Bulk Edit Products, Prices & Attributes for WooCommerce ELEX Dynamic Pricing and Discounts Plugin for WooCommerce ELEX EasyPost Auto-Generate & Email Labels Add-On ELEX EasyPost Shipping Method Plugin for WooCommerce ELEX Google Product Feed Plugin ELEX Hide WooCommerce Shipping Methods Plugin ELEX Minimum Order Amount for WooCommerce ELEX ShipEngine Multi-Carrier Shipping & Label Printing Plugin for WooCommerce ELEX Stamps.com Shipping Plugin with USPS Postage for WooCommerce ELEX Stamps.com USPS Auto-Generate & Email Labels Add-On ELEX WooCommerce Abandoned Cart Recovery with Dynamic Coupons ELEX WooCommerce Australia Post Bulk Label Printing Add-On ELEX WooCommerce Australia Post Shipping Plugin with Print Label & Tracking ELEX WooCommerce Catalog Feed for Facebook & Instagram ELEX WooCommerce Catalog Mode, Wholesale & Role Based Pricing ELEX WooCommerce Choose Your Delivery Date Plugin ELEX WooCommerce DHL Express / eCommerce / Paket Shipping Plugin with Print Label ELEX WooCommerce DHL Express Bulk Label Printing Add-On ELEX WooCommerce Discount Per Country Plugin ELEX WooCommerce Discount per Payment Method Plugin ELEX WooCommerce EasyPost Bulk Label Printing Add-On ELEX WooCommerce EasyPost Return Label Add-On ELEX WooCommerce Name Your Price Plugin ELEX WooCommerce Product Price Custom Text (Before & After Text) and Discount Plugin ELEX WooCommerce Stamps.com Bulk Label Printing Add-On ELEX WooCommerce USPS Shipping Plugin with Print Label ELEX WooCommerce Request a Quote plugin for WooCommerce ELEX WordPress Embed YouTube Video Gallery FAQ Getting Started Knowledge Base Open Source HelpDesk & Customer Support Ticketing System – Simple & Flexible Plugin Integrations Shipping Plugins Uncategorized WooCommerce WSChat - WordPress Live Chat Plugin WSDesk - WordPress Helpdesk Plugin