Using Versus

This walkthrough takes a fresh install to working product comparison, then explains the storefront behaviour you should expect.

1. Enable comparison and set the cap

Open the Versus menu, turn comparison on, and set how many products can be compared at once (2–6). Most stores pick 3 or 4 — enough to be useful, few enough to stay readable on mobile.

2. Choose where the compare button appears

Enable the Compare button on shop and archive loops, the single product page, or both. Decide with Allow guests whether logged-out visitors can compare or only logged-in customers.

3. Choose the compared fields

Pick which standard fields show as rows — price, SKU, availability, short description — and whether product attributes are included. A store selling apparel might include size, colour and material; an electronics store might lean on attributes for specs.

4. Tune the table behaviour

• Turn on Highlight differences so distinct values stand out.
• Turn on Differences only by default if shoppers should land on just the differences.
• Decide which column controls to show — image, add-to-cart, remove — per column header.

5. Confirm on the storefront

Open a shop listing. Each eligible product shows a Compare button; clicking it toggles the product on the list and the button’s pressed state updates. Open the comparison — the Compare tab in My Account for a logged-in customer, or the dedicated compare URL for a guest — and check the products line up as columns, with differences highlighted and the “differences only” toggle working.

How comparison behaves

• Guests build a list stored per browser. When a guest logs in, that list is merged into their account, so nothing is lost at sign-in.
• Customers get a persistent Compare tab in My Account.
• When the list is at the cap and a shopper adds another product, the oldest item is removed automatically.
• Removing a product from the table refreshes it in place; the live count on the compare link updates as the list changes.

Common scenarios

• Spec-heavy catalogue. Include product attributes and turn on “differences only” so a long spec table collapses to just what separates the models.
• Guest-friendly shop. Allow guests and place the button on loops, so visitors can compare before creating an account; their list carries over when they sign up.
• Compact comparison. Hide the image and add-to-cart controls in the column header for a tighter, specs-first table.

Customising the wording

Use the Labels & text section to reword the compare button, remove button, compare link, differences toggle, clear-all button and empty-list message — or leave them blank to use the translated defaults. For full localisation, translate the versus text domain (versus.pot ships in /languages).

Performance and accessibility notes

The front-end is vanilla JavaScript — no jQuery — deferred and loaded in the footer. The table scrolls horizontally inside its own wrapper, so adding columns never reflows the page (no CLS). Compare buttons carry an aria-pressed state and a polite live region announces list changes to screen readers, with visible focus styles and full keyboard operability. Network failures and double submissions are handled gracefully, and the table refreshes automatically after a remove.