Selling a T-shirt in three sizes and five colours? A phone case compatible with six models? A coffee subscription in three frequencies?

These are all variable products in WooCommerce — single products that come in multiple variants, each potentially with different pricing, stock levels, images, and availability.

Setting up WooCommerce product variations correctly is one of the most important skills for store owners who sell products with options. Done well, it creates a clean, professional shopping experience. Done poorly, it creates confusion, cart abandonment, and inventory headaches.

This step-by-step guide covers everything — from creating attributes to managing stock per variation, setting up variation-specific images, and handling edge cases.

Understanding WooCommerce Variable Products

Before diving into setup, understand the key concepts:

• Attributes — The characteristics that vary between versions of a product. Examples: Size, Colour, Material, Model Compatibility.
• Attribute values (Terms) — The specific options within each attribute. Size values: Small, Medium, Large, XL. Colour values: Red, Blue, Green.
• Variations — The individual purchasable combinations of attributes. A product with Size (S, M, L) and Colour (Red, Blue) has 6 possible variations: S-Red, S-Blue, M-Red, M-Blue, L-Red, L-Blue.
• Global attributes — Attributes defined in WooCommerce → Attributes that can be reused across multiple products. Best for attributes you use on many products (Size, Colour).
• Custom attributes — Attributes defined on a specific product only. Good for attributes unique to one product.

Managing Variation Images

Variation images significantly improve the shopping experience — particularly for colour variations.

Best practices:

• Use consistent image dimensions for all variation images (square, same resolution)
• Photograph or render every colour/style variant available
• Name image files descriptively before uploading: red-tshirt-front.jpg, blue-tshirt-front.jpg

When a customer selects a variation, the product's main image automatically switches to the variation's assigned image — no JavaScript customisation required.

Handling Stock Per Variation

Individual Variation Stock Management

For most stores, tracking stock per variation is essential — you may have 50 Medium-Red but only 10 Small-Blue.

In each variation: Check "Manage stock?" → Enter current stock quantity → WooCommerce automatically marks a variation as "Out of stock" when quantity reaches zero.

Product-level stock vs. variation-level stock:

• If you enable "Manage stock?" at the product level (Product Data → Inventory), all variations share that stock pool
• If you enable "Manage stock?" at the variation level, each variation has independent stock
• For most variable products, variation-level stock is more accurate

Out of Stock Variations

When a variation runs out of stock, WooCommerce marks it as "Out of stock" and disables the option in the variation selectors (greyed out). It can also hide it entirely — configured in WooCommerce → Settings → Products → Inventory → "Out of stock visibility".

Low Stock Notifications

Configure low stock alerts per product: Product Data → Inventory → "Low stock threshold" — WooCommerce emails the store admin when stock reaches this level.

Advanced Variation Techniques

Bulk Edit Variation Prices

For products with many variations, editing each one individually is tedious. WooCommerce provides bulk editing:

1. In the Variations tab, select "Set regular prices" from the bulk actions dropdown
2. Enter a price → Click Go — sets all variations to the same price
3. Or use "Increase regular prices by (fixed amount or %)" to add a consistent markup

Variation Swatches (Visual Enhancement)

Replacing dropdown selectors with visual swatches dramatically improves UX:

• Variation Swatches for WooCommerce (free) replaces Size dropdown with button labels and Colour dropdown with colour circles
• Images assigned to each attribute term in Products → Attributes → Configure terms become swatch images

Ajax Variation Loading for Large Products

Products with more than ~50 variations can cause performance issues. WooCommerce loads all variation data as JSON on the product page. For products with many variations, increase the Ajax loading threshold:

// Increase variation threshold for Ajax loading
add_filter( 'woocommerce_ajax_variation_threshold', function() {
    return 100; // default is 30
});

Troubleshooting Common Variation Problems

• "Please select an option" — variation not selectable: Check that "Used for variations" is checked for each attribute in the Attributes tab.
• Variation shows correct price but cart adds the wrong variation: Clear your browser cache and site cache. A cached page may be serving stale variation data.
• Out-of-stock variations still appear selectable: Go to WooCommerce → Settings → Products → Inventory and check "Hide out of stock items from the catalog" or ensure variation-level stock management is enabled.
• Variation images not switching on attribute selection: Verify each variation has an image assigned (not just the parent product). The image must be assigned at the variation level, not just in the product gallery.
• Too many variations causing slow product pages: Use the Ajax variation threshold filter above, or consider reducing the number of active attribute combinations.

Frequently Asked Questions