--- 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-09-27 lang: en author: "Aditya Sharma" description: "A custom-built product card needs its wishlist button placed and styled to match the rest of the card, not stuck in a fixed default position. With Woo Wishlist's Type set..." image: https://theplusaddons.com/wp-content/uploads/2024/07/How-to-Add-Animated-Headings-In-Elementor-3-1-1024x570.jpg word_count: 273 --- # How to Add a Wishlist Button to a Custom WooCommerce Product Skin in Elementor? ## - The Plus Addons for Elementor Pro requires Woo Wishlist to be enabled under The Plus Addons > Widgets before the widget is used in a custom Product Listing skin template. - Woo Wishlist uses Type set to Button, and the Wish Type control offers Icon, Text, or Text/Icon content for the button. - The post says a custom-built product card places and styles the wishlist button to match the rest of the card instead of leaving it in a fixed default position. A custom-built product card needs its wishlist button placed and styled to match the rest of the card, not stuck in a fixed default position. With Woo Wishlist's **Type** set to **Button**, the **Wish Type** control matches that button's content to your card's own style. For the full settings tour of every Woo Builder widget, see [Woo Builder Settings Overview](https://theplusaddons.com/docs/woo-builder-settings-overview/). ***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/woocommerce-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Prerequisite:** [WooCommerce](https://wordpress.org/plugins/woocommerce/) installed and active, with at least one published product.- **Edition:** all Woo Builder widgets are part of **The Plus Addons for Elementor Pro** - a Pro licence is required.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Woo Wishlist** and turn its toggle on. ## Steps - Add the **Woo Wishlist** widget inside your custom Product Listing skin template, with **Type** set to **Button**.- From **Wish Type**, choose **Icon** (icon only), **Text** (text only) or **Text/Icon** (the default - both together). ![Wish Type dropdown, Icon / Text / Text-Icon](https://theplusaddons.com/wp-content/uploads/2026/09/woo-builder-wishtype.webp) ![Post Type control set for a product context](https://theplusaddons.com/wp-content/uploads/2026/09/woo-builder-wishlist-custom-skin.webp) ## Settings Overview | Setting | What it does | Default | | ------- | ------------ | ------- | | Type | Must be Button for Wish Type to apply. | Button | | Wish Type | Icon, Text or Text/Icon button content. | Text/Icon | ## Not verified So you know exactly what has and has not been checked: - Live rendering of the Wishlist button actually nested inside a built custom Product Listing skin template (as opposed to the widget's own Post Type control, which is what this doc's second screenshot shows) - needs a dedicated Product Listing skin-template fixture, not built in this pass. ## Related Docs - [How to Add WooCommerce Product Wishlist in Elementor?](https://theplusaddons.com/docs/add-woocommerce-product-wishlist-in-elementor/)- [How to Show WooCommerce Product Wishlist Count in Elementor?](https://theplusaddons.com/docs/show-woocommerce-product-wishlist-count-in-elementor/) ## Frequently Asked Questions **Q: What do I need before adding a wishlist button to a custom WooCommerce product skin in Elementor?** A: Elementor free and WooCommerce both need to be installed and active, and WooCommerce also needs at least one published product. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH treats Woo Wishlist as a Pro widget, so a Pro licence is required and the widget has to be enabled under The Plus Addons > Widgets. That matters because the button won’t be available inside your custom product listing skin until the widget is turned on. **Q: Why is the wishlist button not matching my custom product card style?** A: The key setting is Type set to Button, because that unlocks Wish Type for the button content. When Wish Type is set to Icon, Text, or Text/Icon, the wishlist control can match the card’s own design instead of sitting in a fixed default position. In practice, Text/Icon is the default option, so it’s the safest choice when you want both label and icon visible inside a custom listing skin. **Q: Can I use the wishlist button inside a custom WooCommerce product listing skin?** A: That is exactly the use case this tutorial targets. The Woo Wishlist widget is added inside your custom Product Listing skin template, and its Type must be set to Button so the Wish Type control applies. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this as part of its Woo Builder widgets, which are built for Elementor-based WooCommerce layouts. **Q: What should I choose for Wish Type: icon only, text only, or both?** A: Wish Type gives you three content styles: Icon for icon only, Text for text only, and Text/Icon for both together. The default is Text/Icon, which is usually the most readable choice when you want the wishlist action to be obvious inside a product card. Icon-only works better when space is tight, while text-only keeps the control simple if your card already has enough visual cues. **Q: What happens if I add Woo Wishlist but leave Type set to something other than Button?** A: Wish Type only applies when Type is set to Button. That means if you leave Type on another mode, you won’t get the button-content controls that let you switch between Icon, Text, and Text/Icon. For a custom product skin, that usually breaks the styling goal because the wishlist element won’t behave like part of the card design. **Q: Where can I find more settings for Woo Builder widgets after setting up wishlist buttons?** A: The full settings tour is covered in [Woo Builder Settings Overview](https://theplusaddons.com/docs/woo-builder-settings-overview/). That’s useful once the wishlist button is working inside your custom skin and you want to understand how other Woo Builder widgets behave in The Plus Addons for Elementor. Related docs also cover [How to Add WooCommerce Product Wishlist in Elementor?](https://theplusaddons.com/docs/add-woocommerce-product-wishlist-in-elementor/) and [How to Show WooCommerce Product Wishlist Count in Elementor?](https://theplusaddons.com/docs/show-woocommerce-product-wishlist-count-in-elementor/).