SparkSwipe Variation Swatches for WooCommerce
Color swatches on a product page

Color swatches on a product page

SparkSwipe Variation Swatches replaces WooCommerce variation dropdowns with color, label, and button swatches on variable products. It uses WooCommerce’s native product attributes and variations as the source of truth — it does not duplicate products, stock, or prices.

Why merchants like it

  • Easy — a setup wizard configures attributes in a couple of minutes
  • Beautiful — three style presets (Minimal, Classic, Modern) with shape, size, and gap controls
  • Fast — frontend CSS and JS load only on product pages
  • Compatible — works with WooCommerce’s variation form, prices, images, and add to cart

Free features

  • Color, label, button, and dropdown swatches
  • Circle, square, and rounded shapes
  • Size, spacing, borders, and selected states
  • Basic term-name tooltips
  • Global attribute configuration
  • Product-level overrides (display + shape)
  • Disable or cross unavailable variations
  • Reset variations
  • Setup wizard / tutorial and live preview
  • System status report
  • Translation-ready and RTL-friendly

Pro (separate plugin)

Additional features are available in a separate Pro plugin (not included here):

  • Image swatches and image + text
  • Radio, dual color, and gradient types
  • Term images and secondary colors
  • Per-product swatch image overrides
  • Shop, category, and search swatches
  • Blur / hide unavailable options
  • Custom CSS

This free plugin is fully functional on its own.