The Compare Table widget renders the side-by-side comparison page where shoppers see the products they’ve marked for comparison — price, availability, rating, attributes, and more, lined up in columns. It’s the display half of Tiger’s compare feature, paired with the Compare Button (usually enabled directly on the Product Grid’s card overlay). Both are part of the free WooCommerce Conversion Suite, requiring WooCommerce plus the WooCommerce Conversion module active.
The two pieces
A working compare feature needs a trigger and a destination. The trigger is almost always the Product Grid’s own Show Compare Button toggle (in its Wishlist & Compare section) — it puts a compare icon on every card that turns active once a product is added. The destination is this widget: build one page (e.g. "Compare Products") and add the Tiger Compare Table widget to it; that’s where the compared items actually render.
Building the compare page
- Create a new page — "Compare Products" or similar.
- Add the Tiger Compare Table widget.
- Set an Empty Button Text and Empty Button Link (pointing at your shop) for the state before anything’s been added to the comparison.
- Publish, and link to it from a header "Compare (2)" style link — pair it with a
0shortcode so the count updates live.
What the table shows
Compared products appear as columns; their details appear as rows, and each row can be switched on or off independently: Image + Title (always shown, with a × to remove that product from the comparison), Price, Availability (in stock / out of stock), Rating, SKU (off by default), Attributes, Short Description (off by default), and Add to Cart (a real buy button per product). The Attributes row is fully automatic — it lists every WooCommerce attribute the compared products actually use (Colour, Size, Material, whatever’s assigned), so there’s no manual row-mapping required; just make sure your products carry real WooCommerce attributes and the comparison lines them up on its own.
Removing a product drops its whole column instantly, no page reload. Once the last product is removed, the widget’s empty-state message and button take over.
Styling
The Style tab covers column width, header and row-label backgrounds, border colour, title and price colours, cell typography, and the Add-to-Cart button colours. The table scrolls horizontally on small screens automatically, so a four-or-five-product comparison stays usable on mobile without needing a separate mobile layout.
Practical tips
- Turn on the compare button alongside Wishlist and Quick View on the same Product Grid — all three live in the same "Wishlist & Compare" section and are designed to be combined.
- Keep the table focused: turn off rows you don’t need (SKU, Description) for a cleaner comparison — the more rows shown, the more scrolling on smaller screens.
- Make sure comparable products actually share attributes (e.g. all use a "Colour" attribute) — the automatic attribute rows are most useful when the compared products are genuinely similar, not one product against something unrelated.
Troubleshooting
The compare button doesn’t show on the grid. Confirm WooCommerce and the WooCommerce Conversion module are both active, then switch on "Show Compare Button" in the Product Grid’s Wishlist & Compare section.
Attributes aren’t showing in the table. Attribute rows only appear for products that actually have WooCommerce attributes assigned — add attributes on the product edit screen and they’ll appear automatically on this table.
A product is missing from the comparison. Only published, in-catalogue products are compared; removed or unpublished products are silently skipped from the table.