user friendlyPLUGINS Explore plugins
← All plugins
Variation SwatchesBY USER FRIENDLY PLUGINS

Make every option easier to choose.

Turn WooCommerce variation dropdowns into clear, accessible text buttons. Give customers readable choices and stock states in a design that fits your store.

Purchase options Live demo (opens in a new tab)
Built for WooCommerce · PRODUCT SELECTION
Made for your everyday
Color SageIn stock
SageSandCharcoal
Size 750 ml
500 ml750 ml 1 litre
Illustrated exampleExplore the real plugin in the live demo
THOUGHTFULLY EQUIPPED

The details that
make the difference.

Make product options easier to choose with accessible text swatches and native Pills styling.

01

Clear option buttons

Replace classic variation dropdowns with large text buttons that are easy to use on touchscreens and keyboards.

02

Readable stock states

Distinguish selected, unavailable, out-of-stock, and backorder options using WooCommerce availability data.

03

A design that feels at home

Choose presets and adjust colors, shape, spacing, typography, and responsive layouts with a live preview.

04

Native Product Blocks

Style WooCommerce Pills with separate controls and product-specific overrides for the block interface.

05

Shareable selections

Optionally keep selected attributes in the product URL so a customer can share the same selection.

06

Accessible interactions

Keep keyboard navigation, focus indicators, screen-reader states, and the original dropdown fallback.

THE REAL PLUGIN. READY TO EXPLORE.

Choose a color. Find the right variation.

Explore swatch styles, unavailable combinations, stock states, and a native WooCommerce Blocks example.

Open live demo (opens in a new tab)

Sample products and customer data.
Includes an admin settings preview.

Product choices in plain sight

Put it to work
in your store.

One practical starting point. Adapt the example to your products and your store’s settings.

  1. Start with meaningful product options

    Create a variable product with options such as size or material. Show which sizes are in stock, on backorder, or sold out using the availability recorded in WooCommerce.

  2. Choose the presentation

    Select a preset and adjust the shape, spacing, colors, and stock wording. Review Classic forms and native Product Blocks separately; each has its own presentation controls.

  3. Test choices in context

    Switch between attribute combinations, use the keyboard, and reset the selection. Confirm the variation price, image, and add-to-cart state still follow WooCommerce's resolved choice.

Make sizes easier to compare

Present small, medium, and large as visible text choices so customers can compare options without opening a dropdown.

Explain stock differences

Keep supported sold-out and backorder states readable with wording and visual treatment, instead of relying on color alone.

Match the storefront design

Use soft, outline, or pill treatments with adjustable dimensions and typography, then review the controls at desktop and mobile widths.

MADE FOR THE WAY YOU SELL

A clearer choice, before add to cart.

Bring variation choices into view so customers can compare the available options. WooCommerce stays in control of the selected variation, price, image, and add-to-cart validation.

Requires WordPress 6.5+, PHP 8.1+, and WooCommerce 8.2+. Native Product Blocks Pills require WooCommerce 10.0+. Current swatches use text buttons.

Before you get started

Swatch format
Accessible text buttons. Color or image swatches and product-archive swatches are outside the current scope.
Classic products
Enhances standard WooCommerce variation forms and retains their native selects as the fallback.
Product Blocks
Styles the native Variation Selector's Pills. Dropdown-mode blocks are not converted.
Stock information
Uses WooCommerce availability evidence. Extra Blocks stock labels require a complete supported variation matrix; otherwise native behavior remains.
Accessibility
Includes keyboard navigation, visible focus, and screen-reader states while preserving WooCommerce purchase validation.
Recent releases

Variation Swatches

  • Clear option buttons
  • Readable stock states
  • A design that feels at home
Purchase options
RIGHT AT HOME IN YOUR STACK

Built for your
WooCommerce store.

Minimum versions and supported integrations, all in one place.

For the demonstrated build: 1.7.4.

Minimum requirements

WordPress
6.5+
WooCommerce
8.2+
PHP
8.1+

Tested with WordPress 7.1 and WooCommerce 11.1.0.

Supported technology

  • Classic variable-product formsAccessible text-option buttons synchronized with WooCommerce's original dropdowns.
  • Native Product BlocksWooCommerce 10.0+ Pills and 10.9+ Chips, with separate design and availability controls.
  • Keyboard and screen readersRadio-group semantics, keyboard navigation, visible focus, and readable availability states.
  • HPOS and Checkout BlocksDeclares compatibility while leaving variation selection, prices, galleries, and cart validation under WooCommerce's control.
  • Product-level overridesInherited styling, opt-out to native controls, optional shareable selection URLs, and opt-in initial selection.

Classic swatches are text buttons. The plugin does not generate color or image swatches or transform dropdown-mode Product Blocks.

Native Product Blocks styling requires WooCommerce 10.0 or later and a supported Pills/Chips selector.

EVOLVING WITH YOUR STORE

What’s new.

Recent improvements, features, and fixes.

Full changelog
Version 1.7.4Release

Fixed

  • Fixed license deactivation and cleanup when an activation cannot be saved.
  • Corrected the link shown in plugin update details.
Version 1.7.3Version historyEarlier version

Changed

  • Manage your license from the product’s License tab, with a fallback screen when needed.

Added

  • Dismiss license notices for your own account; warnings clearly distinguish available features from disabled access.
Version 1.7.2Version historyEarlier version

Changed

  • Updated compatibility information for WordPress 7.1 and WooCommerce 11.1.0.
A BETTER EVERYDAY FOR YOUR STORE

Get Variation Swatches.

Choose your plan and review the final total in Stripe. Your license and downloads will be available in your account after payment is confirmed.

  1. 01 Choose your plan
  2. 02 Create an account or sign in
  3. 03 Review and pay in Stripe
Already a customer? My account

Purchase options are on their way.

Subscriptions for Variation Swatches are not available here yet. You can explore the features above or browse our other plugins.

Back to the collection
BEFORE YOU GET STARTED

A little more
clarity.

Does this include color or image swatches?
The current plugin focuses on accessible text buttons and native WooCommerce Pills. Color, image, and product-archive swatches are outside its current scope.
Does it work with Product Blocks?
Yes, when the native Variation Selector uses Pills. It has a separate styling workspace for that interface; dropdown-mode blocks are not converted.
How are larger variation catalogs handled?
Classic forms follow the combinations WooCommerce resolves through its AJAX flow. Extra stock decoration in Product Blocks requires a complete matrix of up to 200 visible variations; otherwise native behavior is retained.
MORE GOOD THINGS FOR YOUR STORE

Find your next
friendly advantage.

Explore the collection