How to Add a Wishlist Button to a Custom WooCommerce Product Skin in Elementor?

Updated onApril 9, 2026By

Key Takeaways

  • Woo Wishlist widget from The Plus Addons for Elementor allows users to add a wishlist button to a custom product loop.
  • Users must select 'Products' from the Post Type dropdown under the Woo Wishlist tab to configure the wishlist button.
  • The wishlist button can be aligned for responsive devices in the Alignment section of the Woo Wishlist widget settings.
Table Of Content

Do you want to add a wishlist button to the WooCommerce product listing? The wishlist feature allows customers to save their favorite items for future reference, making it easier for them to come back and make a purchase.

With the Woo Wishlist widget from The Plus Addons for Elementor, you can easily add a wishlist button to a custom product loop.

To check the complete feature overview documentation of The Plus Addons for Elementor Woo Wishlist widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

To do this, make sure you’ve created a custom WooCommerce product skin. Open the template and add the Woo Wishlist widget to the desired place, then follow the steps – 

1. Select Button from the Type dropdown under the Woo Wishlist tab.

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

2. Then from the Post Type dropdown, select Products.

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

3. After making the necessary adjustments and style to the button update the template

4. Then you have to use this template with the Product Listing widget.

Now you’ll see the wishlist button in the product listing that you can use to add products to your wishlist. 

Note: Make sure you’ve added some products to your WooCommerce store to see the listing.

Woo wishlist type button demo how to add a wishlist button to a custom woocommerce product skin in elementor? From the plus addons for elementor

Suggested Reading: How to Show WooCommerce Product Wishlist Count in Elementor?

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
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What if the wishlist button doesn't appear after following the steps?

If the wishlist button doesn't show up in your product listing, ensure that you have added products to your WooCommerce store. Without products in your store, the wishlist functionality will not be visible. Additionally, verify that the Woo Wishlist widget from The Plus Addons for Elementor is installed and activated, as this is a requirement for adding the wishlist feature.

Can I use the wishlist button for specific products only?

The wishlist button can be added to any product in your WooCommerce store as long as you follow the steps to integrate the Woo Wishlist widget with your custom product skin. This allows customers to save their favorite items across your product listings. For detailed guidance, refer to the steps outlined in the tutorial.

What settings work best for aligning the wishlist button?

When aligning the wishlist button, consider the responsive design settings in the Alignment section. This ensures that the button looks good on all devices, including desktops, tablets, and mobile phones. Proper alignment enhances user experience and accessibility, making it easier for customers to interact with the wishlist feature.

Is there a way to show the number of items in the wishlist?

Yes, you can show the number of items in the wishlist by following the tutorial on How to Show WooCommerce Product Wishlist Count in Elementor?. This feature provides customers with a quick overview of their saved items, enhancing their shopping experience.

What happens if I don't create a custom WooCommerce product skin?

If you skip creating a custom WooCommerce product skin, you won't be able to add the wishlist button to your product listings. The wishlist feature relies on the integration of the Woo Wishlist widget within your custom skin, which is essential for its functionality in Elementor. Therefore, creating a custom skin is a crucial step.

Can I customize the style of the wishlist button?

Yes, you can customize the style of the wishlist button after selecting it from the Type dropdown under the Woo Wishlist tab. Adjustments can include color, size, and alignment to match your site's design. Customizing the button enhances its visibility and encourages users to utilize the wishlist feature effectively.

Last reviewed: April 9, 2026

Related Docs