Using Versus

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

1. Confirm comparison is on

Open the Versus menu. Versus ships with Enable comparison on, the button on loops and single product pages, guests allowed, the Account menu tab on, and a cap of 4. If you want a different starting point, set it here. Most stores keep the cap at 3 or 4, enough to be useful, few enough to stay readable on mobile.

2. Choose the rows

Under Comparison table, 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. Only attributes a compared product defines appear, so the table stays tight.

3. Tune the table behaviour

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

4. A shopper builds a comparison

On a shop loop or product page, the shopper clicks Compare. The click fires one AJAX request; the button switches to its active state (aria-pressed="true", label becomes the remove text) and the count badge on the compare link updates, no reload. Clicking the active button removes the product again.

When the list is at the cap and the shopper adds another product, the oldest item is removed automatically to make room, and a polite live-region message announces it to screen-reader users.

5. Opening the comparison

The compare link opens the table:

• Logged-in customers, the Compare tab in My Account (when the Account menu setting is on).
• Guests, the versus-compare endpoint URL.

Each product is a column; each enabled field is a row. With Highlight differences on, rows that differ are tinted. The Show only differences toggle hides identical rows in the browser (no reload); its starting state follows your “default to differences only” setting. From the table, Clear all empties the whole list, and a per-column Remove button drops one product, after a remove on the comparison page, the table reloads so it stays in sync with the stored list.

How lists behave

• Guests build a list stored in the versus_compare_session cookie, kept for six months.
• Customers store the list in the database against their user id, so it follows them across devices.
• On login, a guest’s list is transferred into the account (rows that have no owner yet are reassigned to the user), nothing is lost at sign-in.
• The add-to-cart button in a column header appears only when that product is purchasable and in stock.

Common scenarios

• Spec-heavy catalogue. Include product attributes and turn on “default to 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 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 for the translated defaults. For full localisation, translate the versus text domain (versus.pot ships in /languages). There is no shortcode and no theme template override; the button and table render from the plugin’s own templates wherever WooCommerce fires the loop, single-product and account hooks.

Performance and accessibility notes

The front-end is vanilla JavaScript, no jQuery, loaded defer in the footer, and the CSS/JS load only on pages that show the button or the table. The table scrolls horizontally inside its own wrapper, so adding columns never reflows the page (no CLS), and the image column reserves its space. Compare buttons are real buttons with an aria-pressed state, a polite live region announces list changes, focus styles are visible and the controls are fully keyboard operable. The script guards against double submission and announces a friendly message when the network fails.