WordPress plugin

Swatchly Pro

Swatchly Pro extends Swatchly for WooCommerce variable products. Replace standard variation dropdowns with selectable swatches on product pages, and display them on shop and archive pages. Assign a swatch type to each attribute so colors, sizes, materials, finishes, or configurations appear in a fitting format. Selecting a variation can also change the main product image.

Swatchly Pro

Swatchly Pro extends Swatchly for WooCommerce variable products. Replace standard variation dropdowns with selectable swatches on product pages, and display them on shop and archive pages. Assign a swatch type to each attribute so colors, sizes, materials, finishes, or configurations appear in a fitting format. Selecting a variation can also change the main product image.

Attribute display

Swatchly supports color, image, label, and multi-color swatches. Pro includes radio button swatches and can create image swatches from variation images, with automatic conversion controlled for individual products. Tooltips can display text or images with adjustable dimensions and styling. For unavailable options, pick a cross sign, blur, both effects, or conceal them.

Set swatches to square, rounded, or circle shapes, then adjust their alignment, dimensions, borders, spacing, padding, typography, and colors. The responsive layout uses touch-optimized targets for smartphones and tablets.

Pro controls for products

Highlight featured attributes to give selected product choices more emphasis. Pro can automatically hide out-of-stock variations, and includes catalog mode for B2B use cases. Individual product controls let you adjust options when a product needs a different presentation.

Shop display and cart

Place swatches on shop and archive pages, with controls for their position and how many options appear for each product. Ajax add to cart adds products without a page reload, and custom cart button text lets you change the button label. PHP conditions can show or hide swatches programmatically when you need specific display rules.

Setup and configuration

After installing and activating Swatchly, assign swatch types to WooCommerce attributes and apply those attributes to variable products. Configure global styling, tooltips, unavailable states, and shop-page placement, then review the product and catalog shows. Standard configuration requires no coding; WooCommerce hooks and PHP conditions support advanced placement and display rules.