---
title: Finishes and swatches
description: Show finishes, upholstery and colours as swatches on product cards and as buttons on product pages.
url: "https://wpruby.com/knowledgebase/formafern-products/"
updated: "2026-11-04"
category: WPRuby Themes / Formafern
---

# Finishes and swatches

Formafern shows a variable product's options as swatches. They are WooCommerce's own variations: the swatches only choose an option, and prices, images and stock still come from WooCommerce.

Table of Contents

 [Toggle](#)

- [Set up a finish attribute](#Set_up_a_finish_attribute)
- [Swatch colours](#Swatch_colours)
- [On product cards](#On_product_cards)
- [On the product page](#On_the_product_page)
- [The material line](#The_material_line)

## Set up a finish attribute

1. Go to **Products → Attributes** and add a global attribute such as **Finish**, **Upholstery**, **Colour**, **Glaze** or **Fabric**.
2. Click **Configure terms** and add its options, for example Natural oak, Smoked oak and Walnut.
3. On the product, under **Product data → Attributes**, add the attribute, tick **Used for variations**, and create the variations.

## Swatch colours

Each term can have a swatch colour:

1. Go to **Products → Attributes → Configure terms** and edit a term.
2. Under **Swatch colour**, untick **No swatch colour (show the name)** and pick the colour.
3. Click **Update**.

[![The Swatch colour field on an attribute term](https://cdn.wpruby.com/wp-content/uploads/2026/11/04140113/formafern-docs-admin-swatch.png)](https://cdn.wpruby.com/wp-content/uploads/2026/11/04140113/formafern-docs-admin-swatch.png)

Terms without a colour show their name instead. The colour is stored on the term, so it stays with your store if you change themes.

## On product cards

A variable product's card shows the swatches of its finish options, under the price. Each swatch links to the product with that option already chosen. Cards show up to five; the rest show as **+2**, **+3** and so on.

Cards use the first of these attributes that the product's variations use, with at least two options: Finish, Wood finish, Upholstery, Fabric, Colour (or Color), Glaze, Leg colour (or Leg color) and Material. Developers can change the list with the [`formafern_swatch_attributes`](https://wpruby.com/knowledgebase/formafern-hooks/#formafern_swatch_attributes) filter.

Products without such variations show no swatches.

## On the product page

On the product page, every variation option list with **2 to 8 options** becomes a row of buttons: a colour chip and the name when the term has a swatch colour, the name alone when it doesn't. Longer lists stay as a dropdown. Options that aren't available with the other choices are shown as unavailable. Choosing a button chooses the option in WooCommerce's variation form, which updates the price, image, stock and [dimensions](https://wpruby.com/knowledgebase/formafern-furniture-details/).

[![A product page with finish buttons](https://cdn.wpruby.com/wp-content/uploads/2026/11/04140114/formafern-docs-product-page.jpg)](https://cdn.wpruby.com/wp-content/uploads/2026/11/04140114/formafern-docs-product-page.jpg)

## The material line

Products with a **Material** attribute (a global attribute or a custom one called Material) show up to three of its values under the name, on product cards and the product page: for example *Solid oak · Linen*.