How to Add WooCommerce Product Wishlist in Elementor?

Key Takeaways

  • Woo Wishlist widget from The Plus Addons for Elementor allows adding a wishlist feature to WooCommerce products and other post types.
  • Users can choose between two types of wishlist options: Button and Count.
  • The Woo Wishlist widget can be added to various post types including products, standard posts, and custom post types.
  • Customization options for the wishlist button include text, icons, and alignment settings for responsive devices.
Table Of Content

A wishlist allows customers to save items they are interested in purchasing at a later date, making the shopping experience more convenient and personalized.

With the Woo Wishlist widget from The Plus Addons for Elementor, you can easily add a wishlist feature to WooCommerce products as well as to other post types in Elementor.

Required Setup

How to Activate the Woo Wishlist Widget?

Go to 

  • The Plus Addons Widgets 
  • Search the widget name and turn on the toggle.

Tpae woo wishlist activate how to add woocommerce product wishlist in elementor? From the plus addons for elementor

Key Features

  • 2 Types – You can add a wishlist option in two types – Button and Count.
  • Different Post Types – You can add the wishlist feature to products, standard post types, and custom post types.

How to Use the Woo Wishlist in Elementor?

Based on your usage requirements you have to add the Woo Wishlist widget to a page or template.

Woo Wishlist

From the Type dropdown, you have to select the wishlist type you want to add. 

Woo wishlist type how to add woocommerce product wishlist in elementor? From the plus addons for elementor

Here you’ll find two options – 

Select the option as per your requirements. Options will vary based on your selection. Let’s select Button here.

Then from the Post Type dropdown, you have to select the post type where you want to add the wishlist button, here you’ll find a few options –

  • Post – To add a wishlist button to a blog post custom skin loop or single blog post.
  • Page – To add a wishlist button to a page custom skin loop or a single page.
  • Custom Post Type – To add a wishlist button to a custom post type using the custom skin loop or single custom post type.
  • Product – To add a wishlist button to a product custom skin loop or a single product.

Note: The custom post type option name will depend on the custom post type name and the number of items will depend on the number of custom post types you have.

Select the option as per your requirements.

From the Alignment section, you can align the wishlist button for responsive devices.

Woo Wishlist Button

From the Wish Type dropdown, you have to select the content type on the button. 

Woo wishlist button how to add woocommerce product wishlist in elementor? From the plus addons for elementor

Here you’ll find three options – 

  • Icon – To show the button with an icon only.
  • Text – To show the button with text only.
  • Text/Icon – To show the button with an icon and text.

Select the option as per your requirements. Let’s select Text/Icon here.

In the Add Wishlist field, you can edit the default button text.

Then in the Remove Wishlist field, you can customize the button text when the item is added to the wishlist.

From the Already Wishlist field, you can edit the tooltip text of the button when the item is already added to the wishlist.

In the Add Icon section, you can add an icon when the item is added to the wishlist.

In the Remove Icon, you can add an icon when the item is removed from the wishlist.

How to Style the Woo Wishlist Widget?

To style the Woo Wishlist widget you’ll find all options in the Style tab. The options will vary based on the selected wishlist type.

Icon – You’ll see this option only when the Button type is selected in the Content tab. From here, you can style the icon of the wishlist button.

Woo wishlist style how to add woocommerce product wishlist in elementor? From the plus addons for elementor

Spinner – You’ll see this option only when the Button type is selected in the Content tab. From here, you can style the spinner on the wishlist button visible when an item is added or removed. 

Button – You’ll see this option only when the Button type is selected in the Content tab. From here, you can style the wishlist button.

Count – You’ll see this option only when the Count type is selected in the Content tab. From here, you can style the counter. 

Advanced options remain common for all our widgets, you can explore all its options from here.

View Advanced Tab Tutorial

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the Woo Wishlist widget doesn't activate?

If the Woo Wishlist widget doesn't activate, first ensure that you have both Elementor and The Plus Addons for Elementor installed and activated. You must also have the PRO version of The Plus Addons for Elementor, as this is a premium widget. To activate it, navigate to The Plus Addons u2192 Widgets, search for the Woo Wishlist widget, and turn on the toggle.

Can I add a wishlist button to custom post types using The Plus Addons for Elementor?

Yes, you can add a wishlist button to custom post types. The Woo Wishlist widget allows you to select from various post types, including products, standard posts, and custom post types. This flexibility helps you personalize the user experience across different content types in your Elementor designs.

What are the best practices for styling the Woo Wishlist widget?

When styling the Woo Wishlist widget, focus on the options available in the Style tab, which vary based on the selected wishlist type. For the Button type, you can style the button, icon, and spinner that appears when an item is added or removed. Ensure your styles are consistent with your overall site design to enhance user experience.

What happens if I select the Count option for the wishlist?

Selecting the Count option for the wishlist will display the number of items saved in the wishlist. This is useful for providing users with a quick visual cue of their saved items. Keep in mind that the styling options for the Count type will differ from the Button type, allowing you to customize its appearance accordingly.

Is there a way to customize the text on the wishlist button?

Yes, you can customize the text on the wishlist button within the Woo Wishlist settings. You can modify the text for when an item is added, removed, or already in the wishlist. This customization ensures that the button aligns with your site's tone and enhances user engagement.

What types of wishlist options can I add using The Plus Addons for Elementor?

The Plus Addons for Elementor provides two types of wishlist options: Button and Count. The Button type allows you to add a wishlist button to a product or post, while the Count type displays the number of items in the wishlist. Choose the type that best fits your design and user experience goals.

Last reviewed: April 9, 2026