Early bird50% off every Moduly widget and plan in your first order. One use per customer.See prices
Get Moduly free
Extensions · Store · live demoProduct CompareHelp shoppers choose between similar products, side by side.
Get itDocs

Product Compare

Product Compare (Extension)

Help shoppers choose between similar products, side by side. Tap the compare icon on two or more products below, then press Compare in the bar.

Try it: pick two or more

Open the comparison

Help shoppers choose between similar products, side by side.

A compare button on every product card and product page. Picked products gather in a bar at the bottom of the screen. One click opens a side-by-side table: price, rating, description, availability, SKU, weight, dimensions and every attribute, with the rows that differ highlighted and Add to cart in each column.

Extension · needs WooCommerce

Requirements

  • WordPress 6.2 or newer
  • PHP 7.4 or newer
  • WooCommerce 7.0 or newer

Configure it

  1. Switch it on in Moduly → Installed Widgets.
  2. Compare buttons appear on shop and category pages, Moduly product grids and carousels, quick view and product pages.
  3. A Compare page is created the next time you open the admin; the table window links to it so a comparison can be opened full page or shared.
  4. Click Manage on Product Compare to choose the buttons’ place and text, how many products can be compared, which rows the table shows and how differences are marked.

How shoppers use it

  1. Tap the compare icon on up to four products (two to six, your choice). Picking one more drops the oldest.
  2. The bar at the bottom shows the picks; remove one with its ×, or Clear them all.
  3. Compare opens the table in a window. Show only differences hides rows where every product is the same; rows no product has (no SKU anywhere, for example) are left out on their own.
  4. Add to cart works right in the table.

With Wishlist also switched on, the compare icon sits under the wishlist heart in one stack on the card image.

Settings

Buttons

Setting What you can set
On product cards On / off
On the card Icon on the image (below the wishlist heart) · Text link below the card’s button
On the product page On / off
Place on the product page After or before the Add to cart button
Button text / once picked Defaults: “Compare” and “Comparing”

Comparison table

Setting What you can set
Products at once 2–6 (default 4)
Rows Rating, Short description, Availability, SKU, Weight, Dimensions, Every attribute, Add to cart — each on or off
Highlight rows where products differ On / off
Start with only the differences shown On / off — shoppers can switch it either way

Bar and page

Setting What you can set
Compare bar at the bottom of the screen On / off
Open the table as soon as two products are picked On / off
Accent colour The bar, its button and the highlight
Compare page title The title of the page created for the table

Shortcodes and code

The table on any page (the visitor’s picks; with ?mdly-compare=12.45.67 in the address, that list, read-only):

Nothing to compare yet. Use the compare button on any product to add it here.
Browse products

A button for one product (look is button, icon or link; without id, the current product):

Open the table from your own link or menu item: link to #mdly-compare.

The script fires iw:compare on document after each change, with { id, picked, ids } in event.detail.

How it stores picks

A first-party cookie, mdly_compare, holding up to six product IDs for 30 days. Nothing is stored on the server, and buttons are marked from the cookie, so it works on cached pages.

1 view