Live WooCommerce demo

Interactive WooCommerce Swatch Demos

See how separate WooCommerce products can behave like native variation swatches while keeping independent URLs, images and SEO content.

Works with real WooCommerce products Inspired by Amazon-style product navigation

Interactive live demo

Open one hoodie. The swatches link the rest.

These are real WooCommerce products. Open any product page to see linked swatches, hover previews and separate product URLs in context.

Live WooCommerce products

Swatch behaviours

Different stores, same linked product logic.

Fashion products

Image swatches

Use real product photos as swatches for colors, fabrics or finishes.

/product/hoodie-slate-blue
  • Image changes
  • URL changes
  • Real product pages
Furniture products

Color and material swatches

Link separate wood, fabric or finish products while keeping unique URLs.

/product/oak-chair-natural
  • Material pages
  • Unique SEO copy
  • Native product links
Cosmetic products

Shade navigation

Let every shade keep its own product content, images and SEO target.

/product/lipstick-rose
  • Shade URLs
  • Image previews
  • Separate indexing
Electronics

Model swatches

Connect capacities, finishes or models without flattening every option into one variable product.

/product/headphones-midnight
  • Model-specific pages
  • Independent prices
  • Linked product UX

Shortcode

Manual placement when you need exact control.

The real shortcode implemented by the plugin is [lpswc]. No shortcode attributes are currently implemented.

Correct shortcode syntax [lpswc]
Template usage <?php echo do_shortcode('[lpswc]'); ?>
Supported parameters None. Use the admin settings for mode, position, style and compatibility.

Features

Focused features for native WooCommerce product pages.

Real linked products

Connect simple WooCommerce products together.

SEO-friendly URLs

Each swatch can open a separate product page.

Image swatches

Use product photos, custom icons or colors.

Fast setup

Automatic category mode or manual linked mode.

WooCommerce native

Works with normal products, prices and stock.

Mobile optimized

Touch devices navigate directly.

Lightweight frontend

Focused output without extra product systems.

Flexible styling

Control size, radius, spacing and selected state.

FAQ

Demo questions, answered quickly.

Can I link simple WooCommerce products?

Yes. The plugin is designed to connect separate WooCommerce products and display them as swatches.

Does each swatch have its own URL?

Yes. Each linked product keeps its own product URL, images, title and SEO content.

Is this compatible with page builders?

Yes. Use automatic WooCommerce hook placement or the real shortcode [lpswc] in builder layouts.

Can I use custom images?

Yes. Swatches can use product images, uploaded icons or generated color images.

Does it work on mobile?

Yes. Hover previews are skipped on touch devices so taps navigate directly to the linked product.

Is it SEO-friendly?

Yes. Important variations can become indexable WooCommerce product pages instead of hidden attributes.

Next step

Ready to add linked product swatches to WooCommerce?

Start with the product demo, then use the documentation for setup details.