Title: Swatchline – Variation Swatches for WooCommerce Author: Extendiment Published: October 23, 2026 Last modified: October 23, 2026 --- Search plugins ![](https://ps.w.org/swatchline/assets/banner-772x250.png?rev=3761096) ![](https://ps.w.org/swatchline/assets/icon-256x256.png?rev=3761096) # Swatchline – Variation Swatches for WooCommerce By [Extendiment](https://profiles.wordpress.org/extendiment/) [Download](https://downloads.wordpress.org/plugin/swatchline.1.0.1.zip) * [Details](https://wordpress.org/plugins/swatchline/#description) * [Reviews](https://wordpress.org/plugins/swatchline/#reviews) * [Installation](https://wordpress.org/plugins/swatchline/#installation) * [Development](https://wordpress.org/plugins/swatchline/#developers) [Support](https://wordpress.org/support/plugin/swatchline/) ## Description Let customers pick a colour by its colour, a finish by its photo and a size by a button. Swatchline turns the attribute dropdowns of your variable products into swatches. No code, and nothing to change on your products. **Set up once, per attribute** * Choose a **swatch type** for each global attribute under **Products Attributes**: Colour, Image, Label (buttons) or Dropdown (WooCommerce’s own, the default). * Give each value a **colour** (WordPress’s colour picker) or an **image** (from the media library) under **Configure terms**. The term list shows them in a Swatch column. * Attributes you type on a single product can show as label swatches too, if you switch that on. **On the product page** * Swatches replace the dropdowns of the variation form. WooCommerce’s dropdowns stay in the form, hidden, so the price, image, stock and add to cart update exactly as they always do, and so does anything else that works with them. * Combinations that can’t be bought are **crossed out**: out of stock, or no such variation with what the customer already chose. That works for products with any number of variations, also above the number where WooCommerce stops loading them all into the page. * The chosen value shows next to the attribute’s name (“Colour: Sage”). WooCommerce’s** Clear** link clears the swatches; choosing a chosen swatch again clears it too. * **Tooltips** with the value’s name, and a larger preview for image swatches. * **Accessible**: each attribute is a radio group, so the keyboard’s arrow keys move between swatches, the focus is clearly visible, and screen readers read out each value and whether it’s out of stock. * Works in **classic themes** such as Storefront and in **block themes**: in the Add to Cart Form block and in the **Add to Cart + Options** block, where Swatchline’s swatches take the place of the block’s text chips. **Settings** Under **WooCommerce Settings Products Swatches**: the shape (circle, rounded or square), the size, how the chosen label swatch looks, tooltips and image previews, the chosen value next to the name, and label swatches for custom attributes. **For developers** Swatchline is built to be extended: add swatch types (`swatchline_swatch_types`), change an attribute’s type on a product (`swatchline_attribute_type`), its swatches, colours and images (`swatchline_attribute_swatches`), the variation data the page uses (`swatchline_variation`) and the script’s settings (`swatchline_frontend_config`).` swatchline_loaded` fires once Swatchline has loaded. The hooks are documented on [extendiment.com](https://extendiment.com/plugins/swatchline). **Swatchline Pro** The separate Swatchline Pro add-on adds swatches on shop and category pages and in Product Collection blocks (with the product image changing to the variation’s, and add to cart from the shop), swatches set per product (also for custom attributes), sold-out swatches blurred or hidden, two-colour swatches, image swatches from the variations’ own images, and swatches in the shop’s attribute filters. Everything described above is in this plugin and works without it. See [extendiment.com/plugins/swatchline](https://extendiment.com/plugins/swatchline). ## Screenshots [⌊Colour and label swatches on the product page, with the chosen colour next to its name and a sold-out size crossed out.⌉⌊Colour and label swatches on the product page, with the chosen colour next to its name and a sold-out size crossed out.⌉[ Colour and label swatches on the product page, with the chosen colour next to its name and a sold-out size crossed out. [⌊Image swatches for a lamp's finishes, with a larger preview in the tooltip.⌉⌊Image swatches for a lamp's finishes, with a larger preview in the tooltip.⌉[ Image swatches for a lamp’s finishes, with a larger preview in the tooltip. [⌊The Add to Cart + Options block in a block theme, with swatches in place of its text chips.⌉⌊The Add to Cart + Options block in a block theme, with swatches in place of its text chips.⌉[ The Add to Cart + Options block in a block theme, with swatches in place of its text chips. [⌊An attribute's swatch type on Products → Attributes.⌉⌊An attribute's swatch type on Products → Attributes.⌉[ An attribute’s swatch type on Products Attributes. [⌊Each value's colour or image under Configure terms, with the Swatch column.⌉⌊Each value's colour or image under Configure terms, with the Swatch column.⌉[ Each value’s colour or image under Configure terms, with the Swatch column. [⌊The settings under WooCommerce → Settings → Products → Swatches.⌉⌊The settings under WooCommerce → Settings → Products → Swatches.⌉[ The settings under WooCommerce Settings Products Swatches. ## Installation 1. Install and activate Swatchline from **Plugins Add New Plugin**, or upload the zip there. WooCommerce must be active. 2. Go to **Products Attributes**, edit an attribute (or add one) and set its **Swatch type** to Colour, Image or Label. 3. For Colour and Image, click **Configure terms**, edit each value and choose its colour or image. 4. Open a variable product that uses the attribute: its dropdown is now a row of swatches. ## FAQ ### Which products show swatches? Variable products, for each attribute used for variations whose swatch type isn’t Dropdown. Attributes you added on a single product (not under Products Attributes) show as label swatches when “Custom attributes” is switched on in the settings. ### Does it work with my theme? Swatchline adds its swatches where WooCommerce draws the attribute dropdowns, so it works with themes that use WooCommerce’s variation form: classic themes like Storefront, and block themes with the Add to Cart Form or Add to Cart + Options block. Its styles follow your theme’s text colour and font. ### Why is a swatch crossed out? No variation can be bought with it and the values already chosen: either the variation is out of stock, or it doesn’t exist (for example, Navy only comes in S and M, and the customer chose L). Hover over it, or focus it with the keyboard, for the reason. ### My product has hundreds of variations. Does crossing out still work? Yes. Above 30 variations WooCommerce no longer puts them all in the page and looks a variation up only once everything is chosen. Swatchline adds a compact list of which combinations exist and are in stock, read in two quick database queries, so swatches are crossed out the same way. ### What about WooCommerce’s own swatches in block themes? WooCommerce’s Add to Cart + Options block shows an attribute’s values as text chips. For an attribute with a swatch type, Swatchline shows its swatches there instead, through the block’s own dropdown, so the block keeps working as WooCommerce built it. Attributes left on Dropdown keep the block’s chips or dropdown. ### What happens to my data if I delete Swatchline? When you click **Deactivate** on the Plugins screen, Swatchline asks what should happen to its data if you then delete the plugin. Keep it (the default) and the swatch types, colours and images are still there if you install Swatchline again. Choose **Delete it permanently when the plugin is deleted** to have them removed when you delete it. Your attributes and products are never touched: they show WooCommerce’s dropdowns again. ### Can I translate Swatchline? Yes, on [translate.wordpress.org](https://translate.wordpress.org/projects/wp-plugins/swatchline/). The template is also included as `languages/swatchline.pot`. Attribute and value names are what you type under Products Attributes. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Swatchline – Variation Swatches for WooCommerce” is open source software. The following people have contributed to this plugin. Contributors * [ Extendiment ](https://profiles.wordpress.org/extendiment/) [Translate “Swatchline – Variation Swatches for WooCommerce” into your language.](https://translate.wordpress.org/projects/wp-plugins/swatchline) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/swatchline/), check out the [SVN repository](https://plugins.svn.wordpress.org/swatchline/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/swatchline/) by [RSS](https://plugins.trac.wordpress.org/log/swatchline/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0.1 * Fixed: On a multisite network, deleting the plugin now removes a site’s data only if that site chose to; deactivating it on one site no longer decides for the others. * Fixed: Saving an attribute no longer resets a swatch type that an inactive add- on had set for it. * Fixed: The Swatch image field of an attribute value is now named by its label, for screen readers and keyboard users. #### 1.0.0 * First release. ## Meta * Version **1.0.1** * Last updated **2 days ago** * Active installations **Fewer than 10** * WordPress version ** 6.5 or higher ** * Tested up to **7.1.3** * PHP version ** 7.4 or higher ** * Tags * [color swatches](https://wordpress.org/plugins/tags/color-swatches/)[image swatches](https://wordpress.org/plugins/tags/image-swatches/) [product variations](https://wordpress.org/plugins/tags/product-variations/)[variation swatches](https://wordpress.org/plugins/tags/variation-swatches/) [woocommerce](https://wordpress.org/plugins/tags/woocommerce/) * [Advanced View](https://wordpress.org/plugins/swatchline/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/swatchline/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/swatchline/reviews/) ## Contributors * [ Extendiment ](https://profiles.wordpress.org/extendiment/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/swatchline/)