How to use Woo YITH Compare

The Woo YITH Compare widget adds a compare icon that opens the product comparison table, for stores using the YITH WooCommerce Compare plugin.

Adding the Widget #

1. Open the page in the Elementor editor.
2. Search the widget panel for Woo YITH Compare, under the BEW Elements category.
3. Drag it into any section or column — a header is the most common spot.

Note: This widget needs both WooCommerce and the YITH WooCommerce Compare plugin active. Without them, it shows an error notice in its place instead of the icon — the message tells you specifically which of the two is missing.

Icon and Label #

• Label — the text shown with the icon (defaults to “Compare”).
• Icon — pick any icon from Elementor’s icon library.
• Label Tool Tip — switch on to hide the label as regular on-page text and show it as a tooltip on hover instead, leaving just the icon visible normally.

How the Compare Popup Works #

Clicking the icon opens YITH’s comparison table in a popup, right on the current page, showing whatever products the visitor has already added to compare using YITH’s “Add to Compare” buttons elsewhere in your store. This widget is the entry point to view that comparison — it doesn’t add products to it itself.

Styling #

The Style tab has two sections:

• Icon — size, color and background for Normal and Hover states, plus border, border radius, margin, and padding.
• Label — typography, text color, and background for Normal and Hover states, plus border, border radius, margin, and padding. These controls style the label whether it’s shown as regular text or as the Label Tool Tip.

Frequently Asked Questions #