--- title: "How to Add Product Compare Button to a Custom WooCommerce Product Skin in Elementor?" url: https://theplusaddons.com/docs/add-product-compare-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 (via Product Listing's skin editor) needs its own compare control placed exactly where you want it, not wherever a default theme puts one. With Woo Compare's..." image: https://theplusaddons.com/wp-content/uploads/2024/07/How-to-Add-Animated-Headings-In-Elementor-1-3-1024x565.jpg word_count: 310 --- # How to Add Product Compare Button to a Custom WooCommerce Product Skin in Elementor? ## - Woo Compare sets Type to Button so the Compare Type control applies to a custom Product Listing skin template in Elementor. - Compare Type offers three button content options: Icon, Text, and Text/Icon, with Text/Icon as the default. - The Plus Addons for Elementor Pro requires Elementor and WooCommerce to be installed and active, and Woo Compare is enabled under The Plus Addons > Widgets. A custom-built product card (via Product Listing's skin editor) needs its own compare control placed exactly where you want it, not wherever a default theme puts one. With Woo Compare's **Type** set to **Button**, the **Compare Type** control lets you match that button's look to the rest of your custom card. 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 Compare** and turn its toggle on. ## Steps - Add the **Woo Compare** widget inside your custom Product Listing skin template, with **Type** set to **Button**.- From **Compare Type**, choose **Icon** (icon only), **Text** (text only) or **Text/Icon** (the default - both together). ![Compare Type dropdown, Icon / Text / Text-Icon](https://theplusaddons.com/wp-content/uploads/2026/09/woo-builder-btn-type.webp) Placing the widget inside a custom skin (rather than a fixed template position) means the compare button follows your card's own layout, spacing and hover states. ![Post Type control set for a product context](https://theplusaddons.com/wp-content/uploads/2026/09/woo-builder-compare-custom-skin.webp) ## Settings Overview | Setting | What it does | Default | | ------- | ------------ | ------- | | Type | Must be Button for Compare Type to apply. | Button | | Compare 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 Compare 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 Product Compare in Elementor?](https://theplusaddons.com/docs/add-product-compare-in-elementor/)- [How to Add a Compare Button to Custom or Any Other Post Type in Elementor?](https://theplusaddons.com/docs/add-a-compare-button-to-custom-or-any-other-post-type-in-elementor/) ## Frequently Asked Questions **Q: What do I need before adding a compare button to a custom WooCommerce product skin in Elementor?** A: Elementor free and WooCommerce both need to be installed and active, and WooCommerce needs at least one published product. The widget is part of The Plus Addons for Elementor Pro, so a Pro licence is required too. In practice, that matters because the compare control is meant for a real product listing setup, not a half-finished test site. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this Woo Builder widget inside Elementor. **Q: Why is my compare button not showing in my custom product card?** A: The usual blocker on this page is that the Woo Compare widget has to be enabled first under The Plus Addons > Widgets. The tutorial also says the widget must be added inside your custom Product Listing skin template, not left in a default theme position. That placement matters because the button follows the card’s own layout, spacing, and hover states only when it lives inside the skin. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH enables that workflow. **Q: How do I make the compare button match the design of my custom product card?** A: The Compare Type control is what aligns the button with the rest of the card when Woo Compare’s Type is set to Button. The page lists three content styles: Icon for icon only, Text for text only, and Text/Icon as the default. That gives you a simple way to keep the compare action visually consistent with your skin instead of looking like a separate widget dropped on top. For a full settings tour, see [Woo Builder Settings Overview](https://theplusaddons.com/docs/woo-builder-settings-overview/). **Q: Can I place the compare button anywhere inside a custom WooCommerce product listing skin?** A: The tutorial is built around placing the Woo Compare widget inside your custom Product Listing skin template so it sits exactly where you want it. That is different from a fixed template position or a default theme location. The practical upside is that the compare control follows your card’s own spacing and hover states, which matters when you are designing a custom product grid rather than using a standard layout. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH supports that inside-Elementor workflow. **Q: What happens after I add Woo Compare to a custom product skin?** A: Once the widget is inside the skin template and Type is set to Button, the compare control becomes part of that product card’s layout instead of sitting outside it. The page calls out that this lets the button follow your card’s spacing and hover states, which is useful if you want every action on the card to feel designed together. If you want to see how this fits into other Woo Builder widgets, [Woo Builder Settings Overview](https://theplusaddons.com/docs/woo-builder-settings-overview/) covers the broader setup. **Q: Is there another way to add a compare button besides using a custom product skin?** A: The related docs point to two other paths: [How to Add Product Compare in Elementor?](https://theplusaddons.com/docs/add-product-compare-in-elementor/) and [How to Add a Compare Button to Custom or Any Other Post Type in Elementor?](https://theplusaddons.com/docs/add-a-compare-button-to-custom-or-any-other-post-type-in-elementor/). That tells you this tutorial is specifically about putting compare controls into a custom WooCommerce Product Listing skin, while those docs cover broader or different use cases. If your goal is not tied to a skin template, those pages are the closer match.