Help shoppers decide by lining products up side‑by‑side. The Compare feature shows price, availability, rating, attributes and more in a clean comparison table — so customers buy with confidence instead of bouncing.
Part of the WooCommerce Conversion Suite. Requires WooCommerce + the WooCommerce Conversion module.
The two pieces
- Compare Button — the "Compare" toggle shoppers click on a product.
- Compare Table — the page that shows all compared products side‑by‑side.
Adding the Compare button
Turn it on inside the Product Grid (recommended)
- Edit the page and select your Tiger Product Grid widget.
- Open the Wishlist & Compare section.
- Switch Show Compare Button → On.
A compare icon appears on each product card (it turns blue once a product is added to the comparison).
The compare button is also available as a card overlay alongside Wishlist and Quick View — turn on any combination you like.
Building the Compare page
- Create a new page, e.g. "Compare Products".
- Add the Tiger Compare Table widget.
- (Optional) Set the Empty Button Link to your shop page.
- Publish and link to it (e.g. from a "Compare (2)" link in your header).
What the table shows
Products appear as columns; details appear as rows. You can switch each row on or off:
| Row | Notes |
|---|---|
| Image + Title | Always shown, with a × to remove that product. |
| Price | The product's price. |
| Availability | In stock / Out of stock. |
| Rating | Average star rating. |
| SKU | Off by default. |
| Attributes | Automatically lists every attribute the compared products use (e.g. Colour, Size, Material). |
| Short Description | Off by default. |
| Add to Cart | A buy button per product. |
When a shopper removes a product, its whole column disappears instantly. Once the last product is removed, a friendly empty message appears.
Styling
In the Style tab you can set the 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 so it always stays readable.
Tips
- Add a compare count to your header with the
0shortcode so shoppers can jump to the comparison at any time. - The Attributes rows are automatic — just make sure your products use WooCommerce attributes (e.g. Colour, Size) and they'll line up for comparison.
- Keep the table focused: turn off rows you don't need (SKU, Description) for a cleaner look.
Troubleshooting
The compare button doesn't show. Confirm WooCommerce + the WooCommerce Conversion module are active, then switch on Show Compare Button in the 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 to your products and they'll appear automatically.
A product is missing from the table. Only published, in‑catalogue products are compared; removed or unpublished products are skipped.