SwatchCraft – Variation Swatches for WooCommerce

SwatchCraft replaces WooCommerce’s variation dropdowns with swatches: colour dots, pattern images, size buttons or radio buttons. Shoppers see every option at once, see which ones are out of stock, and pick a variation in one click.

SwatchCraft is the new name and a complete rewrite of WP Smart Variations. The plugin slug is still wp-smart-variations. Everything is free.

Swatches

• Colour swatches with one colour, or two colours split diagonally (“Navy and white”).
• Image swatches for patterns, materials and prints, chosen from the media library.
• Button swatches with the value name or a short label (“XL” for “Extra large”), and radio buttons.
• Automatic buttons: attributes without a swatch type show as buttons, so every product gets swatches without any setup. Switch it off to keep dropdowns for those attributes.
• Set the type on each attribute (Products → Attributes), colours and images on its terms, and override both per product in the new Swatches tab of the product data box. Custom attributes of a single product can have swatches too.
• Already use WooCommerce’s colour and image fields on attribute terms? SwatchCraft uses them.

Made for shoppers

• Unavailable combinations are crossed out or hidden; clicking a crossed-out value starts the choice again from it.
• Out-of-stock values are crossed out, left clickable (for backorders) or hidden.
• The chosen value next to the attribute name (“Colour: Navy”), tooltips with the value name, and optionally its price and stock.
• Price, stock, image and add to cart update exactly as with dropdowns: WooCommerce still runs the form, so themes and plugins that work with variations keep working.
• Accessible: each attribute is a radio group with arrow-key navigation, and screen readers hear the names of colour and image swatches.
• Large products (hundreds of variations) work too: SwatchCraft follows WooCommerce when it loads variations one at a time.
• Works without JavaScript: the dropdowns stay until the swatches can work.

Extras

• Swatches on product cards in the shop, categories and related products. Choosing a swatch shows that variation’s image on the card and links to the product with the value already chosen. Works with classic shop templates and the Product Collection block.
• Variation image galleries: add more images to each variation. Choosing it shows them in the product gallery.
• Variations table: every variation with its image, price, stock and a quantity field, added to the cart in one go. Show it below the add-to-cart form, instead of it, or only on chosen products, or place it anywhere with the Variations Table block or the [swatchcraft_table id="123"] shortcode.

For any theme

• Works with block themes and classic themes, on phones and desktops.
• Round, rounded or square swatches in three sizes, styled with CSS custom properties so your theme can restyle them.
• A settings page with a live preview: WooCommerce → SwatchCraft.
• Compatible with WooCommerce order storage (HPOS) and the cart and checkout blocks.
• No external services, no tracking.