How to Add Wishlist Icons to Elementor WooCommerce Product Listings: A Detailed Guide

Adding a wishlist feature can help you increase customer engagement and boost conversions. The wishlist feature allows customers to save products that they want but haven't purchased yet, and return to your store later to make a purchase. This post will detail how you can add wishlist functionality to your store by using the Elementor page builder and the Premium Addons Pro plugin, add it to the list of WooCommerce productsWish List Icons, and further enhance the functionality of your store.

I. Preliminary preparations

Before getting started, make sure that the following plugins are installed and enabled for your WordPress site:

Elementor Pro: Elementor is a powerful page builder plugin, and Elementor Pro offers even more advanced features that give you even more flexibility to customize your WooCommerce store pages.
Premium Addons Pro: This plugin provides Elementor with a wealth of additional features, including the WooCommerce Product Listing widget. With this widget, it's easy to showcase WooCommerce products and add more advanced features such as wishlist icons.
MC Wishlist plug-in (software component): MC Wishlist is an easy-to-use plugin designed to add wishlist functionality to WooCommerce. It allows customers to add products to a wishlist and can display the wishlist via a widget or shortcode.

Adding a WooCommerce Product List in Elementor

After installing and activating the above plugin, you can start adding WooCommerce Product Listing widgets to your pages via Elementor page builder and configure the wishlist icon.

1. Add Woo product widget for Premium Addons

First, open the Elementor Editorfurthermorego intoThose who wish to display a list of productsweb page. Add the WooCommerce Product List widget for Premium Addons by following these steps:

Search for Woo Products in the Elementor Editor: In the search box on the left menu, type "Woo Products" and drag the widget to the page.

Configuring Product Display Settings: Choose a suitable layout (grid, rotate or masonry) and adjust the way products are displayed according to your needs. You can set the number of products to be displayed per row, the size of the product images, how the title and price are displayed, etc.

2. Enable MC Wishlist plugin

MC Wishlist plugin is the key tool that lets you add wishlist icons to your WooCommerce products. After installing and activating the plugin, it will automatically add the "Add to Wish List" button. Here is how to further configure the MC Wishlist plugin:

automatic integration: When the MC Wishlist plugin is activated, it automatically adds a wishlist icon to the WooCommerce product list with no additional configuration. Customers can click on the icon to add products to their wishlist.
Customize button appearance and position: If you are not satisfied with the default wishlist button, you can customize it by going to the Settings page of the MC Wishlist plugin. You can adjust the color, text, position and other properties of the button to match your website design style.

3. Use of advanced functions: MC Multilist

To provide your customers with richer wishlist management features, consider using the MC Wishlist plugin'sadvanced versionMC Multilist. This feature allows customers to store product categories in different wish lists, enhancing the user experience and interactivity of the site.

Enable MC Multilist: By enabling the Multilist feature on the MC Wishlist settings page, customers can add products to multiple different lists, such as "Birthday Wishlist," "Holiday Shopping List," etc.
Customized Lists: Administrators can customize Multilist related settings through the backend, such as allowing customers to create new lists, manage existing lists, etc.

III. Customizing the Wishlist Button in Elementor

Elementor provides a number of customization options to further optimize the appearance and interaction of the wishlist button by following the steps below:

1. Adding animation effects

In Elementor, you can add a variety of wishlist buttons to theanimation effectto make it more attractive. This is done as follows:

Select the Wish List button: ClickLayers for the wishlist buttonSelect the "Advanced" option in the left menu.
Selecting an animation effect: in "high level" tab, find the "movement effect", from which you can choose the animation effect that suits your needs, such as slight zoom on hover, blinking, and so on.

2. Adjusting style settings

Elementor allows adjusting the style settings of the wishlist button to make it more in line with your brand image:

Change button color: The background color, border color, and text color of the button can be modified in the style options to make it consistent with other elements on the page.
Setting up borders and shadows: You can add border and shadow effects to the wishlist button to increase its visual hierarchy.

IV. Release and testing

Once you have completed the above settings, save and publish your page. Be sure to test the wishlist feature on different devices to make sure it works on both mobile and desktop devices.

1. Equipment compatibility testing

Test the display and functionality of the wishlist button using multiple devices (e.g., mobile, tablet, and desktop) to ensure that it performs well at different resolutions.

2. Performance testing

Check if the wishlist feature has an impact on the page loading speed. If you find that it is loading slowly, consider optimizing images, reducing unnecessary plugins or using a caching plugin.

V. Summary

With Elementor and Premium Addons Pro plugin, it is easy to add wishlist icons to WooCommerce product listings. This not only improves the shopping experience for customers, but also increases the interactivity of the store, which in turn helps to increase conversions.

The MC Wishlist plugin's seamless integration with Elementor makes adding wishlist functionality easy and intuitive. With its advanced version of the Multilist feature, your customers can also categorize and store their desired products to great effect.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off