# The product page - Swatchline 1.x documentation

> What customers see and do: choosing swatches, the chosen value next to the name, Clear, tooltips and the keyboard.

On a variable product, every attribute with a swatch type shows its swatches where WooCommerce's dropdown was.

![Colour and label swatches on the product page](https://storage.extendiment.com/media/149/screenshot-1.png)

## Choosing

- Click a swatch to choose it. Its outline darkens, and the value's name appears next to the attribute's name: **Colour: Navy**.
- Click the chosen swatch again to clear it. WooCommerce's **Clear** link clears all the choices at once.
- Once every attribute is chosen, WooCommerce does what it always does: shows the variation's price, stock and description, switches the product image to the variation's, and enables **Add to cart**.

## Tooltips

Hovering a colour or image swatch, or reaching it with the keyboard, shows its name above it. Image swatches also show a larger preview, so customers can see the grain or weave before choosing. Label swatches show their name already: their tooltip only appears to say why one can't be chosen.

![Image swatches with a larger preview in the tooltip](https://storage.extendiment.com/media/151/screenshot-2.png)

## Keyboard and screen readers

Each attribute's swatches are a radio group, like any group of radio buttons:

- **Tab** moves into the group (to the chosen swatch, or the first) and on to the next attribute.
- **Arrow keys** move between swatches and choose them. Swatches that can't be chosen are skipped.
- **Space** chooses the focused swatch, or clears it when it's chosen already.
- The focused swatch has a clear outline, and its tooltip shows.

Screen readers read each attribute's name, each value's name, whether it's chosen, and "Out of stock" or "Not available with your other choices" for those that can't be chosen.

## How it works with WooCommerce

WooCommerce's dropdowns are still in the form, hidden. Choosing a swatch sets the dropdown, and WooCommerce's variation script takes it from there. That's why prices, images, stock messages, the add-to-cart button and plugins that work with the variation form behave exactly as without Swatchline.

Source: https://www.extendiment.com/plugins/swatchline/docs/1.x/product-page