SlowlySwatch
Replace WooCommerce variation dropdowns with colour, image, or text swatches.
The Swatch block replaces a WooCommerce variation dropdown with something visual, a row of colour, image, or text swatches a shopper clicks to choose a variant. It reads a product's attributes and turns each option into a swatch; the kind of swatch and its appearance come from the block's own settings and the design panel.
Adding one
- Select the product template or container where the variation picker belongs.
- Open the inserter and search "swatch".
- Pick the Swatch block, then set the attribute it should control in the settings panel.
Settings
In the swatch's own panel. Appearance lives in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Attribute | Which product attribute this swatch controls, matched by slug | Always; one swatch block per attribute (colour, size, material, etc.) |
| Type | How each option renders: colour, image, or text | Colour for hex-coded attributes, image for photo swatches, text for sizes or labels |
| Show text | Adds the option label beside or below the swatch visual | The swatch alone is ambiguous, or you want both colour and name visible |
| Tooltip | Enables a tooltip that appears on hover over each swatch | Useful when swatches are small and the label needs to stay hidden until hovered |
| Tooltip content | What the tooltip shows: the option name, a custom field, or fixed text | Match the content to what the shopper needs to confirm before selecting |
| Tooltip placement | Where the tooltip appears relative to the swatch: top, bottom, left, or right | Adjust when swatches sit near the edge of a card |
| Tooltip delay | How long the pointer must rest before the tooltip shows, in milliseconds | A short delay prevents tooltips firing on fast pointer passes |
| Tooltip duration | How long the tooltip takes to appear and disappear | Match the pace of the rest of the page's transitions |
| Tooltip arrow | Adds a small directional arrow pointing at the swatch | Helps when the tooltip placement could be ambiguous |
Styling
The swatch uses the shared design panel. Size, border radius, spacing between swatches, and colour (for the text type) are all set there per breakpoint. The states panel is where you style the selected and hovered states, the most important styling work for a swatch because it shows the shopper which option is active.
Accessibility
Each swatch acts as a button, so it needs a label a screen reader can announce. Without a visible text label, add one via the tooltip or confirm that the rendered markup carries an aria-label matching the option name. The selected state should be conveyed in a way that does not rely on colour alone: a border, a check mark, or an outline on the chosen swatch works alongside colour for shoppers who cannot distinguish hues.