A WooCommerce product does not always have one fixed price, size, color, or configuration. If you sell clothing in multiple sizes, furniture in different finishes, or products with different capacities, you need a way to let customers select the option they want before adding it to their cart.
That is where WooCommerce variable products come in.
Variable products allow you to combine multiple product variations on a single product page. Each variation can have its own price, SKU, stock level, image, weight, and other settings. When configured correctly, they make it easier for customers to choose the right product without navigating between separate product pages.
However, setting up variable products can be confusing, especially when variations do not appear, prices are displayed incorrectly, stock availability behaves unexpectedly, or customers cannot add a product to their cart.
In this guide, you will learn how WooCommerce variable products work, how to create them step by step, how to configure variation pricing and inventory, and how to troubleshoot the most common problems.
What Is a WooCommerce Variable Product?
A WooCommerce variable product is a product that offers multiple selectable options, with each combination treated as a separate variation.
For example, imagine that you sell a T-shirt in three sizes and two colors.
The available options might be:
- Size: Small, Medium, Large
- Color: Black, White
WooCommerce can use these attributes to create six variations:
- Small, Black
- Small, White
- Medium, Black
- Medium, White
- Large, Black
- Large, White
Each variation represents a specific combination of options. You can assign different prices, stock quantities, SKUs, and images to individual variations when necessary.
A variable product is particularly useful when customers should choose between several versions of the same item on one product page.
Simple Products vs. Variable Products
WooCommerce supports several product types, but simple and variable products are two of the most commonly used.
A simple product is suitable when the customer does not need to select a variation. For example, a book sold in one format and at one price can usually be created as a simple product.
A variable product is more suitable when customers need to choose between options that affect the product they receive.
| Feature | Simple product | Variable product |
|---|---|---|
| Customer selects variations | No, by default | Yes |
| Different prices for options | Requires separate products or customization | Supported natively |
| Separate stock quantities per option | Not applicable in the usual setup | Supported per variation |
| Variation-specific images | No native variation selection | Supported |
| Separate SKUs per option | Not applicable in the usual setup | Supported |
| Best use case | One standard product | Products with multiple selectable options |
For example, a mug available in one design and size can be a simple product. If the same mug is available in multiple sizes and colors, a variable product may be the better choice.
The important distinction is that a variable product is not just a product with a dropdown menu. It allows WooCommerce to manage the different combinations as individual variations.
How WooCommerce Attributes and Variations Work
Before creating a variable product, it helps to understand the relationship between attributes and variations.
Attributes define the available options. Variations represent the actual combinations customers can purchase.
Consider a pair of shoes.
You might create two attributes:
- Size: 39, 40, 41, 42
- Color: Black, Brown
These attributes define the choices available to the customer. WooCommerce can then generate eight possible combinations if every size is available in both colors.
Each combination can be managed separately.
For example, size 39 in black might cost $65 and have five units in stock. Size 42 in brown might cost $75 and have only two units available.
This flexibility is one of the main reasons variable products are useful for online stores.
Global Attributes vs. Custom Product Attributes
WooCommerce allows you to create attributes globally or directly on an individual product.
Global attributes are managed under Products → Attributes. They can be reused across multiple products and are useful when your store has consistent options, such as size, color, material, or capacity.
Custom product attributes are created directly within a product’s settings. They can be useful when an option applies only to one product.
For example, a clothing store with dozens of products will usually benefit from global Size and Color attributes. A store selling specialized equipment might use a custom attribute for a unique specification that does not apply elsewhere.
For variable products, the attributes must be configured to be used for variations. Simply displaying an attribute on the product page does not automatically create purchasable variations.
How to Create a WooCommerce Variable Product
The following steps use the standard WooCommerce product editor. The exact interface can vary slightly depending on your WooCommerce version and any installed extensions.
Step 1: Create a New Product
In your WordPress dashboard, navigate to Products → Add New Product.
Enter the product name, description, and other basic information. For example, you could create a product called “Premium Cotton T-Shirt.”
Add the main product image and, if needed, a product gallery. The main image represents the product generally, while individual variations can have their own images later.
Before moving on, select the appropriate product category and add any relevant product tags.
If you already have a product that needs variations, you can edit it instead of creating a new one.
Step 2: Set the Product Type to Variable Product
Find the Product data section in the product editor.
Open the product type selector, which commonly defaults to Simple product, and select Variable product.
WooCommerce will display additional tabs and settings for attributes and variations.
You do not need to create a separate product for every size or color. The parent variable product holds the shared information, while the individual variations hold the settings that differ.
Step 3: Add Product Attributes
Open the Attributes tab.
You can now add the attributes customers will use to select their preferred version.
For example, create a Size attribute with these values:
Small | Medium | Large
Then create a Color attribute:
Black | White
If you are using global attributes, select them from the available list and choose the relevant terms.
If you are using custom attributes, enter the name and values directly.
For each attribute that should affect the available variations, enable the option labeled Used for variations.
If customers should be able to select the attribute on the product page, ensure it is also configured to be visible where appropriate.
Save the attributes before moving to the next step.
Important: An attribute that is not marked for use in variations will not be available for generating variations through the normal WooCommerce workflow.
Step 4: Generate Product Variations
Open the Variations tab.
WooCommerce provides options for adding variations manually or generating combinations from the attributes you configured.
For example, if you have three sizes and two colors, selecting the option to create variations from all attributes will generate up to six combinations.
Before generating variations, make sure that you actually sell every combination. If you do not offer Small in White, for example, you should not leave that combination available for purchase.
Large numbers of attributes can create a large number of combinations. Four sizes, five colors, and three materials can potentially produce 60 combinations.
Avoid generating unnecessary variations, especially when the product has many attributes. More variations mean more settings to maintain and can make product management more complicated.
Step 5: Configure Each Variation
Expand each variation to edit its individual settings.
Depending on your store configuration, you can set details such as:
- Regular price
- Sale price
- SKU
- Stock quantity and stock status
- Variation image
- Weight and dimensions
- Shipping class
- Downloadable or virtual settings, where applicable
For most physical products, the regular price is essential. WooCommerce generally requires a price for each purchasable variation.
You can enter a separate price for every variation or use the available bulk actions to apply common settings to multiple variations.
For example, if every T-shirt costs $25, you can apply the same regular price to all variations. If larger sizes cost more, adjust only the relevant variations afterward.
Remember that changing the parent product’s general information does not mean every variation will automatically inherit every setting. Check the individual variation fields to confirm that the information is correct.
Step 6: Set Inventory and Stock Availability
If you manage stock, decide whether inventory should be tracked at the variation level.
For example, you might have:
- Small, Black: 8 units
- Medium, Black: 12 units
- Large, Black: 4 units
Enable stock management for the relevant variations and enter the correct quantities.
When stock management is enabled at the variation level, WooCommerce can update availability as orders are placed.
If you do not track individual quantities, you can configure a variation’s stock status without entering an exact quantity, depending on your inventory workflow.
Be careful when using backorders. If they are enabled, customers may be able to order an item even when its available stock reaches zero.
Step 7: Review the Product and Publish It
Once the attributes and variations are configured, save the product and preview it on the front end.
Test every important option, including:
- Selecting different sizes and colors
- Checking whether the correct price appears
- Confirming that unavailable combinations cannot be purchased
- Checking variation images
- Adding different variations to the cart
- Reviewing the cart and checkout
Do not assume that a product is ready simply because it looks correct in the WordPress editor. The customer-facing experience is what matters.
How WooCommerce Variable Product Pricing Works
Pricing is one of the most important parts of setting up variable products.
A variable product can have multiple prices, depending on the options selected by the customer. WooCommerce uses the prices configured for the available variations.
Set the Same Price for Every Variation
If every variation costs the same amount, you can apply a common regular price to all variations.
For example:
| Variation | Regular price |
|---|---|
| Small, Black | $25 |
| Medium, Black | $25 |
| Large, Black | $25 |
| Small, White | $25 |
| Medium, White | $25 |
| Large, White | $25 |
Using consistent pricing simplifies product management. However, make sure every variation has the correct price saved, especially if you created or imported variations in bulk.
Set Different Prices for Individual Variations
Some products cost more depending on their size, material, capacity, or configuration.
For example, a storage box might have the following prices:
| Variation | Regular price |
|---|---|
| 10 liters | $15 |
| 20 liters | $22 |
| 40 liters | $35 |
Enter the appropriate price in each variation’s settings.
WooCommerce can then update the displayed price when the customer selects a particular option, depending on the theme and any pricing extensions installed.
Configure Sale Prices
WooCommerce supports sale prices for individual variations.
Suppose the regular price of a product is $40, but one variation is discounted to $32. You can set the sale price on that specific variation without necessarily discounting every other option.
If you want to discount all variations, use the relevant bulk-editing options and verify the result.
Also check scheduled sale dates when using them. A sale price may not appear if the sale has not started or has already ended.
Why Does WooCommerce Display a Price Range?
A variable product may display a price range instead of a single price when its variations have different prices.
For example, a product with variations priced from $15 to $35 might display a range such as “$15–$35.”
This is normal behavior. It helps customers understand the available price range before choosing an option.
If all variations have the same price, the product may display a single price instead.
The exact presentation depends on the WooCommerce version, theme, currency settings, and extensions.
If the price range is missing, incorrect, or inconsistent with the variation prices, check that every variation has the correct regular and sale prices and that the product is saved.
How to Add Different Images to Product Variations
Variation images are particularly useful when a product is available in different colors or designs.
For example, a customer selecting Black should see the black product image, while selecting White should display the white version.
To configure this:
- Edit the variable product.
- Open the Variations tab.
- Expand the variation you want to edit.
- Select the variation’s image.
- Save the variation and update the product.
- Test the selection on the front end.
If you have six variations but only two colors, you may be able to reuse the same image for variations that share a color.
Use clear, consistent images so customers can understand what changes when they select an option.
If variation images do not update on the product page, check whether the issue occurs with every variation or only certain ones. Missing images, theme customizations, JavaScript errors, and image-related extensions can all affect the result.
Common WooCommerce Variable Product Problems and How to Fix Them
Even when a product appears correctly configured in the dashboard, problems can occur on the front end. The following issues are among the most useful to check first.
1. Variations Are Not Appearing on the Product Page
If customers cannot see the expected options, start by checking the product’s attributes and variations.
What to check:
- Confirm that the product type is Variable product.
- Confirm that the attributes contain the correct values.
- Ensure the relevant attributes are marked Used for variations.
- Verify that the variations have been created and saved.
- Check that the variations are enabled and available for purchase.
- Update the product and reload the front end.
If you recently changed an attribute, you may need to update the existing variations or generate the missing combinations.
Also verify that your theme or product builder has not replaced the standard variation form with a custom layout that fails to display the options.
2. The Add to Cart Button Does Not Work
WooCommerce normally requires customers to select the necessary attributes before they can add a variable product to the cart.
If the Add to Cart button is disabled, or clicking it does nothing, check whether all required options have been selected.
Then inspect the variation’s availability, price, and stock status.
If the problem continues, test the product using a default WooCommerce-compatible theme or temporarily disable relevant plugins on a staging site. Product add-ons, variation swatches, page builders, optimization plugins, and custom JavaScript can interfere with the standard product form.
Do not disable plugins on a live store without considering the impact on customers. A staging environment is safer for troubleshooting.
3. The Variation Price Is Missing
A variation generally needs a valid price to be purchasable.
Open the Variations tab and check the regular price for each affected variation. If you use sale prices, verify those values and any scheduled dates as well.
Also check whether an import or bulk-editing operation left some variation prices empty.
After correcting the values, save the variations and update the parent product. Clear relevant caches if the front end continues to display an old price.
4. WooCommerce Shows the Wrong Price
If the displayed price differs from the configured variation price, investigate the source of the discrepancy before changing settings at random.
Check the following:
- Regular and sale prices on the affected variation
- Scheduled sale dates
- Tax display settings
- Currency-switching or pricing extensions
- Membership, role-based, or customer-specific pricing rules
- Caching and custom price-display code
For example, a store configured to display prices including tax may show a different amount from the price entered in the product editor. That does not necessarily mean WooCommerce is calculating the variation price incorrectly.
If only one variation has the wrong price, inspect that variation first. If every variation is affected, investigate store-wide settings and extensions.
5. A Variation Is Out of Stock Even Though the Product Is Available
A variable product can have a mixture of in-stock and out-of-stock variations.
For example, Medium in Black might be available while Large in Black is sold out. The parent product may still appear available because other variations can be purchased.
If a specific variation incorrectly shows as unavailable, inspect its stock settings and quantity.
Check whether stock management is enabled, whether the stock quantity is correct, whether backorders are configured as intended, and whether the variation is enabled.
If inventory is managed by an external system or synchronization plugin, confirm that it is not overwriting the stock status.
6. Some Attribute Combinations Cannot Be Selected
Not every combination of attributes is necessarily available.
For example, a jacket may be available in Small, Medium, and Large, but the red version may only be offered in Small and Medium.
WooCommerce needs matching variations for the combinations you intend to sell.
Review the generated variations and remove or disable combinations that do not exist. If an expected combination is missing, create it and configure its price and other required settings.
Also check the selected attribute values. Inconsistent naming, missing terms, or attributes that are not enabled for variations can make the configuration confusing.
7. The Product Page Displays an Old Price or Stock Status
Caching can sometimes cause the front end to show information that no longer matches the latest product settings.
Start by updating the product and checking it in a private browser window.
If you use a caching plugin, clear the relevant page cache. Also consider server-side caching, content delivery network caching, and any optimization tools that cache or modify product page scripts.
WooCommerce stores need special care with caching because cart, checkout, account, and dynamic product behavior must continue working correctly.
Do not solve a product issue by disabling all caching permanently. Identify the source of the stale information and adjust the relevant cache rules.
For more general speed improvements, see our guide to getting more traffic to your WordPress website, which discusses improvements that can support a better website experience.
8. Variation Images or Dropdowns Stop Working After an Update
If a product worked before a theme, plugin, or WooCommerce update but no longer works afterward, look for a compatibility issue.
A useful troubleshooting process is:
- Back up the website.
- Reproduce the problem on a staging site.
- Check whether the issue affects all variable products or only one.
- Review recent theme and plugin updates.
- Check the browser console for JavaScript errors.
- Test with a compatible default theme and isolate conflicting plugins.
- Update or report the conflicting component once you identify it.
If you use a page builder or a custom product template, test the standard WooCommerce product layout as well. The issue may be caused by the template rather than the product configuration.
Avoid editing WooCommerce core files to fix a variation problem. Core changes can be overwritten during updates and make future maintenance more difficult.
How to Manage Many Variations Efficiently
Stores with many variable products can spend a significant amount of time maintaining prices, stock, images, and attributes.
A consistent structure makes this easier.
Use Global Attributes When They Can Be Reused
If several products share the same sizes, colors, or materials, consider using global attributes.
This makes it easier to maintain consistent options across the store and reduces the risk of creating slightly different versions of the same attribute.
However, do not turn every product detail into a variation. Attributes that do not change the purchasable product can often remain descriptive information instead.
Use Bulk Actions Carefully
WooCommerce provides bulk actions for certain variation settings. These can help when you need to set prices or apply common values across multiple variations.
After using a bulk action, review the affected variations individually. A bulk price update, for example, may not be appropriate if certain sizes or configurations cost more.
Avoid Unnecessary Combinations
The number of possible variations grows as you add attributes.
If a product has four sizes, five colors, and three materials, it can produce 60 combinations. If some combinations are not sold, do not create them unnecessarily.
For complex products, consider whether every option belongs in the variation system or whether a product configurator or dedicated extension is more appropriate.
Use SKUs Consistently
If your store uses inventory software, shipping integrations, or an accounting system, variation SKUs can make product identification easier.
Use a predictable naming convention and avoid assigning the same SKU to unrelated variations.
For example, a store might use a shared product code followed by a size and color code. The exact format matters less than keeping it consistent across your catalog and connected systems.
How Variable Products Affect the Customer Experience
Correct configuration is only part of the job. Customers also need to understand which options they are selecting and how those choices affect the purchase.
Keep attribute names clear and familiar. If customers choose between colors, use recognizable color names. If they choose between capacities, include the relevant units.
Where variation prices differ, make sure the price update is easy to notice. Use appropriate variation images to show meaningful differences between options.
Pay particular attention to mobile devices. Dropdowns, variation swatches, product images, and Add to Cart buttons should work properly on smaller screens.
Test the full purchase journey, not just the product page. Select an option, add the variation to the cart, confirm that the correct product details and price appear, and continue to checkout.
If the store uses custom product templates, variation swatches, or additional product fields, test those features together. A product page may look correct while still passing the wrong variation or quantity to the cart.
When Should You Use a WooCommerce Extension?
WooCommerce’s built-in variable product functionality is enough for many stores. You can create attributes, generate variations, set prices, manage stock, and assign variation images without installing an additional plugin.
An extension may be useful when you need functionality beyond the standard system, such as:
- Color or image swatches instead of dropdowns
- Conditional product options
- Complex product configurations
- Bulk variation creation or editing tools
- Advanced pricing rules
- Additional inventory workflows
Before installing an extension, identify the exact limitation you need to solve. Two plugins that appear to offer similar features may handle variation selection, pricing, and compatibility differently.
Check whether the extension is maintained, compatible with your WooCommerce version, and suitable for your theme and other product-related plugins.
Installing several plugins that modify the same variation functionality can introduce conflicts and make troubleshooting harder.
Final Thoughts
WooCommerce variable products are useful when customers need to choose between different sizes, colors, materials, capacities, or other product options. They allow you to manage multiple versions of an item on one product page while controlling prices, stock, SKUs, and images for individual variations.
The key is to configure attributes correctly, create only the combinations you actually sell, assign the right prices and inventory settings, and test the product from the customer’s perspective.
When something goes wrong, start with the affected variation’s attributes, price, stock, and availability before investigating themes, extensions, caching, or custom code. This approach helps you identify the actual cause instead of making unnecessary changes to the store.
If you want to learn more about WordPress hosting, performance optimization, security, SEO, WooCommerce, and website maintenance, the WP Flow Mastery WordPress eBook brings these topics together in one practical guide of more than 160 pages. It is designed to help WordPress developers, freelancers, and website owners understand and manage their websites more effectively.
Written by Nemanja Stosic
WordPress Developer & Website Optimization Specialist
Nemanja has worked on more than 200 websites and focuses on WordPress development, performance optimization, SEO, security, WooCommerce, and practical website improvements.