Skip to Content

Variable Products in WooCommerce: Complete Guide

Sizes, colors, and combinations

A t-shirt comes in S, M, L, and XL. Also in white, black, and blue. That's 12 variants. WooCommerce handles this with variable products, but there are nuances that make the difference between a smooth and a frustrating experience.

Attributes

Create global attributes under Products → Attributes. "Size" with values S, M, L, XL. "Color" with white, black, blue. Global attributes can be reused on all products. Custom attributes (per product) work for unique products but create more work.

Variants

Under the "Variations" tab on the product: click "Generate variations". WooCommerce creates all combinations automatically. Each variant can have its own price, stock status, image, weight, and dimensions. Yes, that's 12 variants to fill in. But it gives the right price and stock status per combination.

Performance tip

Products with more than 50 variants get slow. WooCommerce loads all variants as JSON on the product page. Consider splitting into separate products if you have hundreds of variants, or use a plugin like WooCommerce Product Table that loads variants on-demand.

Color swatches instead of dropdown

The default display is a dropdown menu. Variation Swatches plugins (WooCommerce Variation Swatches, or the free alternative from Starter Templates) show color swatches, size buttons, and images instead. It looks better and is easier to use.

Default variant

Always set a default variant. If no variant is selected when the page loads, the customer can't add to cart without making a choice first. That costs clicks and conversions.

Klarna or Stripe: Payment Solution for WooCommerce
What fits depends on who you sell to