What this article covers (who it helps and why)

If you run a WooCommerce shop on Elementor and want stronger intent signals before checkout, JetCompareWishlist gives you two high-leverage touchpoints: a Compare flow for side-by-side decision making and a Wishlist flow for saving later. This review mixes operator priorities (conversion, UX, support) with developer details (templates, dynamic tags, AJAX endpoints, performance). We use the exact widget names and show copy-paste CSS/JS snippets you can ship today. For transparency: we also maintain tooling catalogs at gplpal and optimize for practical outcomes over buzzwords.

download paid wordpress plugins for free

1) Quick verdict (TL;DR)

Strengths: Native Elementor widgets, clean wishlist/compare buttons, flexible compare tables, per-product rules, and Ajax flows that don’t reload the page.
Where JetCompareWishlist shines: Minimal setup friction, good defaults, and styling consistency with Elementor theme styles.
Watch-outs: Variable/Grouped products need careful attribute mapping; large catalogs require caching discipline; analytics must be wired to capture compare/wishlist events.
Fit: Stores where users must choose between close alternatives (electronics, tools, furniture, fashion variants). If you already build in Elementor, JetCompareWishlist slots in naturally.

Keywords from the product name used throughout: JetCompareWishlist, Elementor.

2) What JetCompareWishlist actually adds to Elementor

Core widgets (names may vary slightly by version):

Compare Button / Icon – adds the product to a compare list (Ajax).
Compare Table – renders side-by-side product attributes; supports custom fields and Woo attributes.
Wishlist Button / Icon – adds/removes products from a persistent wishlist.
Wishlist Widget – shows the saved list with remove / add-to-cart actions.
Compare / Wishlist Count – badge widgets for headers.
Empty State / Notice controls – microcopy and CTAs when lists are empty.

Why it’s compelling in Elementor: you can treat compare/wishlist as first-class blocks in your design system, not ad-hoc shortcodes. That keeps spacing, fonts, and colors consistent, which matters for trust and conversion.

3) Clean setup (10–20 minutes)

Install/activate JetCompareWishlist.
In Elementor Theme Builder, edit Archive and Single Product templates:
- Drop Compare Button next to Add to Cart.
- Drop Wishlist Button near price or below gallery; keep above the fold on mobile.
Create a new Compare page and insert Compare Table.
Create a Wishlist page and insert Wishlist Widget.
In plugin settings, enable Ajax, configure page slugs, and pick your storage strategy (cookie/localStorage + usermeta).
Add header badges (Compare/Wishlist Count) to your site header template.

Pro tip: Use a global color token for button/notice states in Elementor Site Settings so Compare/Wishlist styles follow your theme.

4) Designing a comparison table that persuades (not just lists)

When users compare, they are looking for differences. Encode that visually.

Recommended rows (WooCommerce + custom fields):

Featured image + title
Price (with sale badge & per-unit if relevant)
Key specs (2–6 bullet lines, e.g., size, material, wattage)
Availability (stock/lead time)
Warranty/return
CTA row (Add to Cart / View Details)

Row highlighting

Add a subtle background on the best metric per row (e.g., lowest price, longest warranty).
Strike through fields that don’t apply; don’t leave blanks.

CSS (paste into Elementor → Custom CSS or your child theme)

/* Compare table readability */
.jcw-compare-table tr:nth-child(odd){ background: rgba(0,0,0,.02); }
.jcw-compare-table td, .jcw-compare-table th{ padding:12px 14px; vertical-align:top; }
.jcw-compare-table .is-best { background: rgba(0,150,0,.06); border-left:3px solid rgba(0,150,0,.35); }
.jcw-compare-table .price del { opacity:.6; }
.jcw-compare-table .spec-missing { color:#888; text-decoration:line-through; }

You can set the is-best class dynamically with a tiny script if your theme doesn’t support it out of the box (see §8).

5) Wishlist UX that actually converts later

Where to place the button

Product cards (archive grid) and product page near the price.
On mobile, keep it within the first viewport; use a heart icon with text label (“Save”).

Micro-interactions

Use a filled heart when added; outline when not.
Trigger a toast (“Saved to Wishlist”) with a View link.
Show badge counts in the header for both Compare and Wishlist.

Copy suggestions

Empty state: “Nothing saved yet. Browse our favorites → [Collection link]”
After add: “Saved. Compare it or keep shopping.”

6) WooCommerce integration (what to wire)

Add to cart from Compare/Wishlist – enable in widget settings; ensure variable products prompt for attributes.
Stock & price sync – table should reflect real-time stock/price; enable AJAX refresh or set short cache TTL.
Coupons – if you run “wishlist-only” coupons, surface a hint near the wishlist CTA.

Enroll events

If you use WooCommerce analytics or GA4, fire events (see §10) so you can attribute revenue to compare/wishlist usage.

7) Handling variable and grouped products

Variable products

Expose key attributes in the Compare Table (e.g., size, color).
If the user added a parent product without a variation, prompt a variation picker in the table row before adding to cart.

Grouped/bundled

Compare headline price and list bundle components as a nested bullet list; make “Add group to cart” a grouped action.

Edge cases

Out-of-stock items remain on lists but show a restock notice; let users keep them (don’t silently drop).

8) Lightweight enhancement scripts (optional)

Auto-mark the best numeric value per row

<script>
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.jcw-compare-table tr[data-metric="price"]').forEach(row=>{
    const cells=[...row.querySelectorAll('td[data-value]')];
    const nums=cells.map(td=>parseFloat(td.dataset.value||'Infinity'));
    const min=Math.min.apply(null, nums);
    cells.forEach(td => { if(parseFloat(td.dataset.value)==min) td.classList.add('is-best'); });
  });
});
</script>

Add data-metric="price" to your price row and data-value="123.45" to each price cell (Elementor → Advanced → Attributes). This gives a visual “winner” without heavy logic.

Toast helper after add/remove

<script>
window.jcwToast = (msg)=>{
  const t=document.createElement('div');
  t.className='toast'; t.textContent=msg; document.body.appendChild(t);
  setTimeout(()=>t.classList.add('show'),10);
  setTimeout(()=>t.remove(),2600);
};
</script>
<style>
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
background:#111;color:#fff;padding:10px 14px;border-radius:8px;opacity:0;transition:.2s}
.toast.show{opacity:.95}
</style>

Hook this to plugin events if exposed, or call on button click handlers.

9) Performance checklist (important for large catalogs)

AJAX endpoints: confirm they’re cached for logged-out users where possible (or use micro-caches like 30–60s).
LocalStorage: track anonymous lists client-side; sync when a user logs in (plugin provides this flow).
CDN: cache product images aggressively; set proper cache-control headers.
Critical CSS: for compare/wishlist widgets, inline minimal styles to avoid layout shift.
Lazy-load: thumbnail cells in the Compare Table can lazy-load below the fold.

10) Analytics & experiments (measure real impact)

GA4 examples (vanilla JS)

<script>
function ga4(eventName, params){ window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({event: eventName, ...params}); }

// Compare add/remove
document.addEventListener('click', e=>{
  if(e.target.closest('.jcw-compare-add')) ga4('compare_add', {item_id: e.target.dataset.id});
  if(e.target.closest('.jcw-compare-remove')) ga4('compare_remove', {item_id: e.target.dataset.id});
});
// Wishlist add/remove
document.addEventListener('click', e=>{
  if(e.target.closest('.jcw-wishlist-add')) ga4('wishlist_add', {item_id: e.target.dataset.id});
  if(e.target.closest('.jcw-wishlist-remove')) ga4('wishlist_remove', {item_id: e.target.dataset.id});
});
</script>

A/B ideas

Button placement: below price vs. below gallery.
Copy: “Add to Compare” vs. “Compare with similar items”.
Table order: price first vs. spec first.
Empty state: minimal vs. curated suggestions.

Track add-to-cart rate from compare/wishlist pages and wishlist-to-checkout latency (days).

11) Styling with Elementor (tokens + responsive)

Set global Primary/Accent colors once; inherit in widget styles.
For badges (counts), keep contrast ratio ≥ 4.5:1.
Use Container layout with a max width (e.g., 1200px) for the Compare page; avoid full-width tables on ultra-wide screens.

Helpful CSS tokens

:root{
  --btn-radius: 10px;
  --btn-pad: 10px 14px;
}
.jcw-btn{ border-radius: var(--btn-radius); padding: var(--btn-pad); }

12) Accessibility (ship it right)

All buttons need visible focus states and aria-pressed toggling for add/remove.
Compare tables need scope="row"/scope="col" on headers for screen readers.
Provide text labels next to heart/scale icons; don’t rely on icons alone.

13) Security & data hygiene

Sanitize custom attribute outputs in tables.
For logged-out storage, don’t store PII; keep only product IDs.
Rate-limit AJAX if you expose custom endpoints.

14) Common pitfalls (and how to avoid them)

Buttons don’t update state → check JS conflicts; defer third-party scripts; ensure no double jQuery.
Variable product can’t be added from table → enable variation picker or link to single product with pre-selected attributes.
Table too wide on mobile → enable horizontal scroll with sticky first column or stack specs vertically per product.

Mobile scroll helper

.jcw-compare-wrapper{ overflow-x:auto; }
.jcw-compare-table{ min-width: 720px; }

15) Launch checklist (one page you can print)

Buttons placed on archive + single product
Compare & Wishlist pages live and linked in header/footer
Ajax adds/removes without page reload
Table shows key specs; “best” highlight tested
GA4 events fire; dashboards wired
Mobile table scroll OK; buttons reachable with thumb
Empty states, toasts, and microcopy reviewed
Cache rules verified; CDN on; image weights checked

16) Who benefits most (and who can skip)

Adopt now if your users choose between near substitutes (e.g., two 27″ monitors), or your catalog has variants where specs truly matter.
Skip if you sell one-off custom pieces where comparisons don’t help and wishlists create noise.

17) Final take

If you already build your storefront in Elementor, JetCompareWishlist is the most “native” way to add comparison and wishlist flows without fighting your design system. Treat the Compare page like a product—curate the rows, highlight winners, and wire analytics. The conversion lift tends to show within a week. (Side note: we keep neutral how-to resources at gplpal, focused on measurable outcomes.)

Build Better Product Comparisons in Elementor: JetCompareWishlist Deep-Dive for Store Owners and Developers