Swatchly Documentation

Overview

Replace the variation dropdowns with color, image and button swatches. Customers see every option at a glance, out of stock combinations are crossed out, and color dots appear in the shop.

• Customers see every color and size at a glance
• Out of stock combinations are crossed out, no bad surprise
• Fewer clicks to choose on mobile

Best for: Fashion, home and any store with variable products

Installation

1. Download swatchly-variation-swatches.zip from My account › My plugins or from your order email. Do not unzip it.
2. In WordPress, go to Plugins › Add New Plugin › Upload Plugin, choose the zip and click Install Now, then Activate.
3. Check WooCommerce › Swatches for shape, size and shop dots.

Requires WordPress 6.0+, PHP 7.4+, WooCommerce 7.0+. Works with any theme, block themes and page builders.

Features

• Three attribute types: Color swatch (one or two colors), Image swatch, Button
• Set the color or the image of each value in Products › Attributes › Configure terms
• Other attributes (sizes, custom attributes) as buttons, or keep the dropdown
• Combinations out of stock are crossed out; unavailable ones are hidden
• The chosen value is shown next to the attribute name ("Color: Sage")
• Color dots under the product title on shop pages
• Round or rounded square, your size and selected color
• Keyboard accessible (arrow keys), screen reader labels
• Keeps WooCommerce's variation form: prices, images, stock and add to cart work as usual
• Lightweight: no jQuery needed for the swatches, no external service

For developers

Customize the plugin from your theme’s functions.php or a small plugin, without editing its files (your changes survive updates).

Filters

• swatchly_loop_show

add_filter( 'swatchly_loop_show', function ( $value ) {
	// Change $value here.
	return $value;
}, 10, 1 );

Updates

Updates are free. When a new version is out, it appears in Dashboard › Updates of your WordPress site and you can install it in one click, or turn on automatic updates in Plugins. This works for the zip downloaded from your Woo-Plugins account; older copies can be replaced by downloading the latest version from My plugins. See the changelog.

Frequently asked questions