Product Compare for WooCommerce – Storzen

Skildring

Product Compare for WooCommerce – Storzen is the lightweight, conversion-focused WooCommerce product comparison plugin that helps shoppers make faster, more confident buying decisions.

When customers can compare products side by side — seeing price, rating, SKU, attributes, weight, and dimensions in one clean table — they buy faster. Studies show product comparison reduces cart abandonment and increases average order value, especially for electronics, fashion, furniture, and high-ticket items.

📖 Full Documentation

Whether you run a small boutique or a large WooCommerce store, Storzen Product Compare works out of the box — no coding, no bloat, no SaaS fees.

Trusted by WooCommerce store owners who want conversion-focused, developer-clean comparison tools.

What Makes Storzen Product Compare Different?

Most WooCommerce compare plugins are either too basic (just a simple table) or too heavy (loaded with premium-only features). Storzen gives you the full comparison experience for free — floating bar, live difference detection, modal mode, Gutenberg block, WooCommerce Blocks support, and more.

  • Zero SaaS dependency — no external APIs, no monthly fees
  • Lightweight — loads assets only when needed, no impact on store speed
  • AJAX-powered — add, remove, compare without any page reloads
  • WooCommerce Blocks ready — works with Product Collection (WC 8.0+ default Shop page)
  • FSE / Full Site Editor compatible — drag the Compare Button block into any template
  • HPOS compatible — works with High-Performance Order Storage
  • Translation ready — compatible with WPML, Polylang, and translate.wordpress.org

Core Features

Product Comparison Table

  • Dedicated Compare Page — created automatically on plugin activation
  • Add to Compare button on Shop, Category, and Single Product pages
  • Compare up to 3 products (configurable up to 5 in settings)
  • Fully responsive — works on desktop, tablet, and mobile
  • Remove individual products or clear all with one click
  • Shortcode: [storprco_compare_table]

Compare Fields — Choose What Customers See

Show or hide any combination of product data in the comparison table:

  • Product Image
  • Product Title & Link
  • Price (with sale price support)
  • Star Rating
  • SKU
  • Stock Availability
  • Weight (with WooCommerce weight unit)
  • Dimensions (L × W × H with dimension unit)
  • Short Description
  • Add to Cart (AJAX, adapts for variable, grouped, and external products)
  • WooCommerce Global Attributes — Color, Size, Material, and any pa_* taxonomy

Floating Compare Bar (v1.1.0)

The floating bar sits at the bottom of the screen and shows product thumbnails as customers browse — no scrolling back to the top, no losing track of selected products.

  • Sticky bottom bar with product thumbnails and slot placeholders
  • One-click Compare Now button — goes straight to the compare table
  • Auto-hides when the compare list is empty
  • Smooth slide-in animation, fully accessible

Difference Highlighter (v1.1.0)

Helps shoppers focus on what actually matters — the differences.

  • Auto-detects rows where product values differ
  • Same / Different color badges on every row label
  • 3-state toggle: Off Highlight differences Show differences only
  • Configurable highlight color with live admin preview

Field Management (v1.1.0)

  • Enable / disable any compare field with a toggle
  • Drag-and-drop reordering — change table row order in admin
  • Keyboard accessible: Up/Down arrow key support
  • WooCommerce attribute checklist — add Color, Size, Material as compare rows in seconds

WooCommerce Blocks & Gutenberg Support (v1.1.1)

  • Compare button auto-injected into Product Collection block (WC 8.0+ default Shop page block)
  • Works with All Products, Products block, and product-template inner block
  • Native storzen/compare-button Gutenberg block — drag into any FSE template, product archive, or single product template via the Block Editor
  • Product ID resolved from block rendering context — reliable on WC 8.0+ stores

Table Style Presets (v1.1.2)

  • Default — dark purple header, white rows
  • Clean — light minimal header, subtle borders
  • Bold — purple accent header, striped rows
  • All themes built on CSS custom properties — override easily in your child theme

Archive Page Hover Overlay (v1.1.2)

  • Compare button appears on the product image when hovered on shop and category pages
  • Pure CSS hover reveal — zero extra JavaScript
  • Toggle between Inline (classic) and Hover Overlay in Settings Display

Modal / Popup Compare Mode (v1.1.2)

  • Open the comparison table in an AJAX-powered <dialog> overlay — no page reload
  • Customers stay on the product they were browsing
  • Native HTML <dialog> element — no third-party modal library
  • Works alongside the floating compare bar (smart z-index layering)

Most Compared Shortcode (v1.1.2)

  • [storprco_most_compared limit="5" columns="3" show_price="yes" show_button="yes"]
  • Displays a grid of your most-compared products — great for homepage or category pages
  • Compare counts tracked per session via postmeta — no custom database tables
  • Drives social proof and repeat engagement

AJAX & Performance

  • All compare actions (add, remove, clear) are AJAX — no page reloads
  • Assets loaded only on pages that need them (shop, archive, compare page)
  • has_block() detection for block-based page asset loading
  • No jQuery bloat — lightweight vanilla patterns where possible
  • Session-based data storage via WooCommerce sessions

Elementor Integration

  • Elementor Compare Table widget — place the comparison table anywhere via drag-and-drop
  • No coding required
  • Works with all Elementor templates and kits

Developer Friendly

  • Clean OOP architecture — one class per responsibility
  • Full WordPress Coding Standards (WPCS) compliance
  • WooCommerce CRUD and hook system
  • Filterable field list: storprco_fields, storprco_field_value, storprco_max_products
  • Action hooks: storprco_before_compare_table, storprco_after_compare_table
  • GPL-2.0+ licensed — fork, extend, and build on it freely

Who Is This For?

  • Electronics stores — compare specs, weight, dimensions, and price side by side
  • Fashion & apparel — compare sizes, colors, and materials with attribute rows
  • Furniture & home — compare dimensions and weight for large items
  • Sporting goods — compare product attributes and ratings instantly
  • B2B stores — share and bookmark compare lists with the shareable URL feature
  • Agencies — clean code, developer hooks, and no licensing headaches

Skjermbilete

Blokker

Denne utvidinga gjev 1 blokk.

  • Compare Button Add a Compare button to any product page or template. Requires Storzen Product Compare for WooCommerce.

Installasjon

  1. Go to Plugins Add New in your WordPress admin and search for Storzen Product Compare.
  2. Click Install Now, then Activate.
  3. A Compare Products page is created automatically on activation.
  4. The Add to Compare button appears on your WooCommerce shop and product pages immediately.
  5. Go to Compare Products in your admin sidebar to configure settings, fields, and display options.

Manual installation:

  1. Download the ZIP file.
  2. Go to Plugins Add New Upload Plugin.
  3. Upload the ZIP and activate.

Vanlege spm.

Does this work without Elementor?

Yes — Elementor is completely optional. All features (comparison table, floating bar, modal mode, blocks) work without Elementor installed.

Will the Compare button appear automatically?

Yes. After activation, the Add to Compare button is injected automatically into your WooCommerce shop and product archive pages using standard WooCommerce hooks. No template editing required.

Does it work with the WooCommerce Product Collection block (WC 8.0+)?

Yes — fully supported. The Product Collection block is the default Shop page block in WooCommerce 8.0 and later, and Storzen explicitly targets it via the render_block filter. The compare button is injected into each product card automatically.

How do I use the native Gutenberg block?

Go to the Block Editor (any page, post, or FSE template) and search for Compare Button in the block inserter. The block is listed under the WooCommerce category. When placed inside a product loop template, it reads the product ID from context automatically.

How does the Difference Highlighter work?

The compare table header has a Show differences only toggle button. Click once to highlight rows where values differ. Click again to hide identical rows entirely (filter mode). Click a third time to reset. The highlight color is customisable in Settings Display.

What is the Hover Overlay button?

When enabled in Settings Display Archive Button Style, the Compare button appears as a CSS overlay on the product image when hovered — no JavaScript events, just pure CSS transitions.

What does the Most Compared shortcode do?

[storprco_most_compared limit=»5″ columns=»3″] renders a product grid sorted by compare count — showing your most popular products for comparison. Counts are tracked per WooCommerce session to prevent inflation, stored as postmeta, with no custom database tables.

Can I show WooCommerce attributes like Color and Size in the table?

Yes. Go to Compare Products Advanced Product Attributes and enable any global attribute. Each enabled attribute (Color, Size, Material, etc.) becomes its own row in the compare table.

How many products can customers compare at once?

3 by default. You can increase this up to 5 in Settings General Max Products.

Does it work with HPOS (High-Performance Order Storage)?

Yes — fully compatible with WooCommerce HPOS.

Will it slow down my store?

No. Plugin assets are enqueued only on pages that need them (shop page, product archive, compare page). On all other pages, no CSS or JavaScript is loaded.

Is it compatible with my theme?

Storzen uses only standard WooCommerce and WordPress hooks. It is compatible with most WooCommerce themes — classic themes, FSE block themes, Storefront, Astra, Flatsome, Divi, and more.

Can I customise the table appearance?

Yes — in two ways. First, choose from 3 built-in presets in Settings Display. Second, all colours are CSS custom properties (e.g. --storprco-header-bg) that you can override in your child theme with a single line of CSS.

Is there a Pro version?

A Pro version with ACF/custom field attributes, advanced typography customiser, and PDF export is coming soon. Core features — including Gutenberg block, floating bar, diff highlighter, modal mode, and all attributes — are and will remain free.

Omtalar

There are no reviews for this plugin.

Bidragsytarar og utviklarar

“Product Compare for WooCommerce – Storzen” is open source software. The following people have contributed to this plugin.

Contributors

Endringslogg

1.1.2

  • New: Table Style Presets — 3 built-in themes (Default, Clean, Bold) selectable from Settings Display; all use CSS custom properties for easy child theme override
  • New: Archive Page Hover Overlay Button — compare button appears on product image on hover; pure CSS reveal, zero extra JavaScript; toggle in Settings Display Archive Button Style
  • New: Modal / Popup Compare Mode — AJAX-powered native <dialog> overlay; customers stay on the current page with no reload; toggle in Settings General Compare Mode
  • New: «Most Compared» shortcode [storprco_most_compared] — product grid ordered by compare count; session-deduplicated tracking via postmeta, no custom DB tables
  • Improvement: compareMode, tableTheme, and buttonStyle passed to frontend JS for dynamic behaviour

1.1.1

  • New: Native Gutenberg block storzen/compare-button — drag the Compare Button into any FSE template, product page, or layout via the Block Editor
  • Fix: Added woocommerce/product-collection to supported block targets — this is the default Shop page block in WooCommerce 8.0+ and was previously missing, causing the Compare button not to appear on most modern stores
  • Fix: Product ID in block context now resolved from $block['context']['postId'] (WC 8.0+ Product Collection) with fallback to block attrs and global $product — reliable across all block variants
  • Fix: Asset enqueue now covers woocommerce/product-collection and woocommerce/product-template in addition to woocommerce/all-products
  • Fix: Injection point expanded to </li> </article> </div> for better FSE theme compatibility

1.1.0

  • New: Floating Compare Bar — sticky bottom drawer with product thumbnails, slot placeholders, and one-click Compare Now button
  • New: Difference Highlighter — auto-detects rows where values differ; Same/Different badges; 3-state toggle (off / highlight / filter)
  • New: Admin-configurable highlight color with live preview
  • New: WooCommerce Product Attributes support — enable any global attribute (Color, Size, Material…) as compare rows from Settings Advanced
  • New: Weight and Dimensions rows — pulls automatically from WooCommerce product data
  • New: Drag-and-drop field reordering — reorder compare table rows in admin; keyboard accessible (Up/Down arrows)
  • Improvement: Accessibility — scope="col"/"row" on all table headers, aria-selected sync, focus-visible styles, skip-link for keyboard users

1.0.0

  • Initial release
  • AJAX product comparison with toast notifications
  • Dedicated compare page with [storprco_compare_table] shortcode
  • Add to Compare button on shop and single product pages
  • Responsive comparison table
  • Elementor Compare Table widget
  • HPOS compatibility
  • WooCommerce Blocks compatibility