---
title: "How to Add a Wishlist Button to a Custom WooCommerce Product Skin in Elementor?"
url: https://theplusaddons.com/docs/add-a-wishlist-button-to-a-custom-woocommerce-product-skin-in-elementor/
date: 2024-07-02
modified: 2026-04-09
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/07/How-to-Add-Animated-Headings-In-Elementor-3-1-1024x570.jpg
word_count: 240
---

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

## 

- Integrates the Woo Wishlist widget from The Plus Addons for Elementor into custom WooCommerce product skins.
- Enables users to select 'Button' and 'Products' from the Woo Wishlist tab and Post Type dropdown respectively.
- Requires installation and activation of The Plus Addons for Elementor to utilize the wishlist feature.

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](https://theplusaddons.com/docs//add-woocommerce-product-wishlist-in-elementor/).*

***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](https://theplusaddons.com/docs//create-a-custom-woocommerce-product-skin-in-elementor/). 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.

![](https://theplusaddons.com/wp-content/uploads/2024/07/woo-wishlist-type-button.gif)

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](https://theplusaddons.com/docs//create-a-custom-woocommerce-product-skin-in-elementor/#Use-the-Template-With-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.*

![](https://theplusaddons.com/wp-content/uploads/2024/07/woo-wishlist-type-button-demo.gif)

***Suggested Reading***: *[How to Show WooCommerce Product Wishlist Count in Elementor?](https://theplusaddons.com/docs//show-woocommerce-product-wishlist-count-in-elementor/)*