Chapter 3 — Setting Up Variable Products

Now that your attributes are set up with swatches, it is time to attach them to a product. This chapter covers creating or editing a Variable Product so your swatches actually show up in your store.

What is a Variable Product?

A Variable Product is a WooCommerce product type that lets a single product listing offer multiple options — for example, a moisturizer that comes in Rose Blush, Ivory Cream, and Midnight Black. Each combination of options is called a variation.

When you use Chiseiko Essential Swatches, those options will appear as color circles or image buttons instead of dropdown menus.

Already have a variable product? Skip to Step 3.

Step 1 — Create or Open a Product

1. Go to Products → Add New (or click an existing product to edit it).
2. Give your product a Title and fill in a description.
3. Scroll down to the Product data box.

Step 2 — Set the Product Type to "Variable Product"

1. In the Product data dropdown (top-left of that box), select Variable product.

The tabs on the left side of the Product data box will change. You should now see tabs like: General, Inventory, Shipping, Attributes, and Variations.

Step 3 — Add Your Attribute to the Product

1. Click the Attributes tab inside the Product data box.
2. In the dropdown that says "Add existing attribute or custom attribute", select the attribute you created earlier (e.g., Color).
3. Click Add.

The attribute will expand to show its options.

4. In the Value(s) field for your attribute:
   • Click inside the field and start typing to search for your terms, OR
   • Click Select all to add every term at once
5. Make sure the checkbox "Used for variations" is ticked.
6. Click Save attributes.

Important: The "Used for variations" checkbox MUST be checked for the swatch buttons to appear on the product page.

Step 4 — Create the Variations

1. Click the Variations tab.
2. In the dropdown that says "Add variation", choose Create variations from all attributes.
3. Click Go.

A confirmation popup will ask how many variations will be created. Click OK.

WooCommerce will automatically generate one variation for every combination of your attribute options. For example, if you have 4 colors, it will create 4 variations.

4. For each variation, click the triangle/arrow on the left to expand it and set:

   • Regular price — required, otherwise the variation won't be purchasable
   • Stock status (optional) — mark as "In stock" or "Out of stock"
   • Any other details you need (SKU, weight, etc.)

5. Click Save changes at the bottom of the Variations tab.

Step 5 — Publish the Product

Scroll back up and click Publish (or Update if editing an existing product).

Step 6 — Check Your Store

1. Click View product at the top of the edit screen (or visit your product page directly).
2. Scroll down to where customers select attributes.

Instead of a plain dropdown menu, you should now see swatch buttons — colored circles, images, or text pills, depending on what you configured in Chapter 2.

How Swatches Behave on the Product Page

Here is what customers will experience:

• Clicking a swatch selects that variation (the button gets a highlighted ring/border to show it is selected).
• Unavailable variations (out-of-stock combinations) are shown with a crossed-out line through them so customers know the option exists but isn't available right now.
• The hidden dropdown underneath the swatches stays in sync automatically — WooCommerce uses it to track the selection, but customers never see it.
• Multiple attribute swatches (e.g., Color AND Size) each appear in their own row with a label.

Swatches in the Shop / Archive Page

Even without any extra setup, your swatches also appear on the Shop page and Category pages as a small strip below each product card. This gives customers a peek at available colors before they click through to the product.

• Only terms that have a swatch type set (color, image, text label, or radio) show in the loop preview. Terms left at "— Select type —" are skipped.
• Sizes and other terms with no swatch type set are hidden from the loop to keep things clean. (If you explicitly give a size term a Text Label or Radio Button swatch type, it will appear.)
• By default these loop swatches are read-only, but the Free plugin includes an optional Interactive Archive Swatches setting (under WooCommerce → Settings → Chiseiko Essential Swatches Settings, off by default) that makes them clickable, with optional AJAX add-to-cart. Pro extends this further — see Chapter 7.
• Swatches are displayed in alphabetical order by the term name (A → Z). For example, if your colors are Ivory, Rose, and Sage, they will always appear in that order: Ivory, Rose, Sage — regardless of the order you created them in.

What if My Swatch Buttons Don't Appear?

Check the following:

1. The attribute is set to "Used for variations" (see Step 3 above).
2. The product type is Variable product (not Simple).
3. You have saved/updated the product after adding the attribute.
4. At least one variation has been created and has a price.

Still not working? See Chapter 24 — Troubleshooting.

Working with Multiple Attributes

You can attach more than one attribute to a product. For example, a product might have both Color and Size. Just repeat Step 3 for each additional attribute.

Each attribute will appear as its own row of swatch buttons on the product page. The label above each row will be the attribute name (e.g., "Color", "Size").

Tip: Custom Product Attributes vs. Global Attributes

WooCommerce has two kinds of attributes:

For best results with swatches, always use Global attributes.