=== Product Compare for WooCommerce – Storzen ===
Contributors:      devhasib
Tags:              woocommerce, product compare, comparison table, gutenberg, blocks
Requires at least: 6.5
Tested up to:      7.1
Requires PHP:      8.1
Requires Plugins:  woocommerce
Stable tag:        1.1.2
License:           GPLv2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html

WooCommerce product compare plugin — floating bar, diff highlighter, modal mode, Gutenberg block. Let shoppers compare products side by side.

== Description ==

**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](https://webtend.net/docs/product-compare-doc.html)**

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

== Installation ==

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.

== Frequently Asked Questions ==

= 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.

== Screenshots ==

1. Product comparison table with difference highlighter active
2. Floating compare bar showing product thumbnails and Compare Now button
3. Difference highlighter — highlighted rows and filter-only view
4. Add to Compare button on shop/archive page
5. Native Gutenberg block (storzen/compare-button) in the block editor
6. Admin settings — Display tab with table style presets and hover overlay option
7. Modal/popup compare mode — comparison opens in a dialog overlay
8. Most Compared shortcode product grid on a category page

== Changelog ==

= 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

== Upgrade Notice ==

= 1.1.2 =
Adds table style presets, hover overlay button, modal compare mode, and Most Compared shortcode. Recommended update for all users.

= 1.1.1 =
Critical fix: compare button now appears on WooCommerce 8.0+ Product Collection block (default Shop page). All users on WC 8.0+ should update immediately.

= 1.1.0 =
Major feature release: floating bar, difference highlighter, product attributes, weight/dimensions, and drag-and-drop field ordering.
