FAQ
Does it require WooCommerce?
Section titled “Does it require WooCommerce?”Yes. Swatch extends WooCommerce’s variable products and does nothing without it active. Its JavaScript loads only on single product pages that carry a variations form; the stylesheet also loads on shop and category listings, where the optional shop-loop swatches render.
What swatch types are available?
Section titled “What swatch types are available?”Two: colour dots and button / label pills. You pick the type per attribute on the Products > Attributes screen, with a store-wide default for attributes you have not set. There are no other types in the free edition, image swatches are a Swatch Pro feature.
Where do I set colours and labels?
Section titled “Where do I set colours and labels?”On each global attribute’s term screen (Products > Attributes > Configure terms). Swatch colour is a hex value used by colour swatches; Swatch label is optional short text for button swatches that defaults to the term name. Both are stored as term meta.
What happens to attributes I have not configured?
Section titled “What happens to attributes I have not configured?”They keep WooCommerce’s standard dropdown. A colour-type attribute with no colours set on any term also falls back to the dropdown automatically, and custom (product-level) attributes, which have no taxonomy or terms, always use the dropdown. A half-configured attribute never breaks the page.
Does it work without jQuery?
Section titled “Does it work without jQuery?”Yes. The front-end is vanilla JavaScript that hooks WooCommerce’s own variation events. It sets the value on the original (hidden) <select> and fires its change event, so price, stock and the add-to-cart button update exactly as they do with the dropdown.
Are the swatches accessible?
Section titled “Are the swatches accessible?”Each attribute’s swatches form a radiogroup with arrow-key, Home/End and Space/Enter navigation and visible focus-visible rings. Every swatch carries the term name as an aria-label. Disabled (out-of-combination) swatches are dimmed and struck through with a diagonal line, so the state is not conveyed by colour alone. Built with WCAG 2.2 AA in mind.
How is the colour stored?
Section titled “How is the colour stored?”Per term, as the swatch_color term meta, sanitised on save with sanitize_hex_color, an invalid or empty value is removed rather than stored. The custom label is stored as the swatch_label term meta.
Can I change the swatch size and shape?
Section titled “Can I change the swatch size and shape?”There is no size or shape setting on the admin screen. Sizing, radius, gap, border and the selection accent are exposed as --swatch-* CSS custom properties, so you re-theme them from your theme stylesheet without overriding markup. Focus rings, contrast, dark mode and reduced-motion behaviour are built in.
Will swatches show in the shop or category listings?
Section titled “Will swatches show in the shop or category listings?”Yes, once you tick Swatches in the shop loop on WooCommerce > Swatch. It is off by default because it changes how your shop page looks. With it on, each variable product in a listing gets one swatch row under its title, from its first attribute that has usable swatch data, and each swatch links to the product with that option preselected.
What Swatch Pro adds in the loop is image swatches: it replaces the colour chips with the images set on the attribute terms, through the free plugin’s swatch/archive_html filter. Per-variation image galleries are PRO too.
Is there a shortcode?
Section titled “Is there a shortcode?”No. Swatch has no shortcode, the swatches appear automatically wherever WooCommerce renders the variations form. Developers can adjust the markup with the swatch/swatch_group_html filter.
Does it cause layout shift?
Section titled “Does it cause layout shift?”No. The swatches are server-rendered and reserve their space up front, the only script loads defer, and the design respects prefers-reduced-motion, so there is no jump as the page settles.