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

Updated onApril 9, 2026By

Key Takeaways

  • Woo Compare widget from The Plus Addons for Elementor allows users to add a product compare button to a custom product loop.
  • Users must select 'Products' from the Post Type dropdown under the Woo Compare tab to configure the button.
  • The compare button appears in the product listing after using the custom template with the Product Listing widget.
Table Of Content

Integrating a product compare button into your custom product skin, can improve the usability of your online store and help customers make more informed purchasing decisions.

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

To check the complete feature overview documentation of The Plus Addons for Elementor Woo Compare 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 Compare widget to the desired place, then follow the steps – 

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

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

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

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 compare button in the product listing that you can use to add products to a comparison table. 

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

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

Suggested Reading: How to Show WooCommerce Product Compare 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 should I do if the product compare button isn't showing up?

If the product compare button isn't appearing, ensure you have added products to your WooCommerce store, as the button will only show in a product listing with available items. Additionally, verify that you've correctly added the Woo Compare widget from The Plus Addons for Elementor to your custom WooCommerce product skin.

Can I use the Woo Compare widget with any WooCommerce product skin?

The Woo Compare widget from The Plus Addons for Elementor can be used with any custom WooCommerce product skin that you've created. Just make sure to add the widget to the desired location within your custom template before linking it with the Product Listing widget.

What settings work best for adding the compare button in Elementor?

For optimal results when adding the compare button, select 'Button' from the Type dropdown under the Woo Compare tab and choose 'Products' from the Post Type dropdown. This ensures that the button functions correctly within the context of your WooCommerce product listings.

What happens if I don't link the custom template with the Product Listing widget?

If you fail to link your custom template with the Product Listing widget, the compare button will not function as intended. This step is crucial to display the button in your product listings, allowing customers to utilize the comparison feature effectively.

Is there a way to show the product compare count in Elementor?

Yes, you can show the WooCommerce product compare count in Elementor. For detailed instructions, you can refer to the tutorial on How to Show WooCommerce Product Compare Count in Elementor. This feature enhances user experience by allowing customers to see how many products they are comparing.

How does adding a product compare button improve my online store?

Integrating a product compare button enhances usability by allowing customers to make informed purchasing decisions. It simplifies the process of evaluating multiple products side by side, which can lead to higher customer satisfaction and potentially increased sales.

Last reviewed: April 9, 2026

Related Docs