Managing product variations is one of WooCommerce’s most powerful, but often misunderstood, features. Whether you’re selling clothing, art prints, or bundles with size and color options, getting variations right can make or break your store’s user experience.
In this step-by-step guide, we’ll walk through:
- How to add basic product variations in WooCommerce
- How to assign sale prices to specific variations
- How to update existing products with new variations
- How to set different images and galleries per variation
- How to use TM Extra Product Options for global fields
- Common issues and how to fix them
- Frequently asked questions
This guide is designed to help WooCommerce beginners and store owners who want more control over product options without breaking their layout or needing advanced coding.
Quick Answer: To add product variations in WooCommerce, create a variable product, configure product attributes (like size or color), then generate variations under the “Variations” tab. You can assign unique prices, sale pricing, images, and galleries to each variation. For advanced fields or layouts, you may use tools like TM Extra Product Options.
Table of Contents:
- 1. Add Basic Product Variations in WooCommerce
- 2. Add Sale Prices to WooCommerce Variations
- 3. Add a Variation to an Existing Product
- 4. Add Unique Images or Galleries to Each Variation
- 5. Using TM Extra Product Options for Global Variations
- Variation Comparison Table
- FAQ: WooCommerce Product Variations
- Final Thoughts
1. Add Basic Product Variations in WooCommerce
WooCommerce variations allow you to sell a single product with multiple selectable options (like size or color). Here’s how to create one from scratch:
Step-by-Step:
- Go to Products → Add New (or edit an existing product)
- Scroll down to the Product Data section and choose Variable Product from the dropdown
- Click on the Attributes tab → Add custom attributes (e.g. Size, Color)
- Set values separated by a vertical bar (
Small | Medium | Large) - Check “Used for Variations” and click Save Attributes
- Go to the Variations tab → Click Generate Variations from All Attributes
- Edit each variation to add price, stock, and SKU
You’ve now created a variation-enabled product.
To ensure a clean UX, it’s a good idea to test the product on both desktop and mobile devices. Pay attention to how the dropdowns render, whether the variation fields are clear, and how your theme handles them. Many themes support variation swatches instead of default dropdowns, which can be configured using a plugin. These visual swatches (like color blocks or image thumbnails) improve selection clarity and speed up decision-making for shoppers.
Troubleshooting Tips:
- Dropdowns Not Appearing: Confirm that attributes are set to “Used for Variations.”
- Variations Not Saving: Make sure all required fields (price, SKU) are filled in.
- Product Not Switching Type: If switching from simple to variable product causes a glitch, try duplicating the product and editing the new version.
- Add to Cart Button Missing: Often caused by an unpriced variation—double-check that each one has a value in the price field.
2. Add Sale Prices to WooCommerce Variations
Each variation in WooCommerce can have its own regular and sale price, allowing you to run promotions for specific colors, sizes, or bundles without affecting the rest of the product.
Here’s how:
- In the Variations tab, expand any variation
- Enter a Regular Price and a Sale Price
- Click Save Changes
Once saved, WooCommerce will automatically show the sale price when that variation is selected. Some themes visually strike through the original price and highlight the new one in red or bolded text.
This is ideal for clearance sales, seasonal items, or pricing bundles where only specific variations are discounted. Make sure your sale price is actually lower than the regular price, or WooCommerce may not display it as a discount.
You can also schedule sale prices by clicking the calendar icon next to the price field, which is useful for running limited-time deals.
Troubleshooting Tips:
- Sale Price Doesn’t Show: Confirm both regular and sale prices are filled in for that specific variation.
- Sale Badge Missing: Some themes disable it—enable via your theme’s customizer or use CSS.
- Sale Price Doesn’t Update When Switched: This can be due to caching—clear your browser and WooCommerce cache.
- Schedule Doesn’t Work: Double-check your site’s timezone setting under Settings → General.
3. Add a Variation to an Existing Product
If you already have a simple product set up, you don’t need to recreate it to add a variation. WooCommerce allows you to convert existing listings into variable products.
Steps:
- Edit your existing product
- Under Product Data → switch type to Variable Product (if not already)
- Add a new attribute (e.g., Material, Finish)
- Check “Used for Variations” → Save
- Go to the Variations tab → Click “Add Variation” and configure manually
This is especially useful for adding new product lines or features mid-season—like offering a new size, seasonal scent, or a new bundle package.
Be sure to update your product descriptions, SEO metadata, and preview the product page after adding a variation. WooCommerce doesn’t always automatically update the product summary text to reflect variation options.
Troubleshooting Tips:
- Variation Fields Missing: Double-check if “Used for Variations” is enabled on each attribute.
- Old Product Data Conflict: If the product was previously simple, delete any legacy pricing before switching.
- Variations Not Showing on Frontend: Re-save permalinks under Settings → Permalinks to flush WooCommerce’s routing.
- Product Not Saving Properly: Consider duplicating the original product before converting, especially if you have custom fields or SEO data that might be affected.
4. Add Unique Images or Galleries to Each Variation
Displaying the correct image for each variation is essential for customer confidence, especially with color-based options. By default, WooCommerce only allows one image per variation, but you can expand this with a plugin.
Built-In (Main Image Only):
- In the Variations tab, click the image icon next to each variation to upload a primary image
This image replaces the featured product photo whenever the variation is selected on the frontend.
Full Gallery (Plugin Required):
Use a plugin like:
- Variation Images Gallery for WooCommerce
- WooThumbs for WooCommerce
These plugins allow multiple images per variation, swipeable galleries, and even zoom effects. You can use this to show product angles, lifestyle shots, or close-ups based on the selected variation.
Troubleshooting Tips:
- Variation Image Doesn’t Update: Check for JavaScript errors or theme conflicts
- Gallery Doesn’t Load: Ensure plugin is enabled and your theme supports image switching
- Image Size Looks Off: Resize or regenerate thumbnails using the Regenerate Thumbnails plugin
- Plugin Not Working: Confirm plugin is compatible with your current WooCommerce version and theme
5. Using TM Extra Product Options for Global Variations
TM Extra Product Options is perfect for adding form-style fields that collect extra user data or upsell optional features, not tied to inventory. For example, engraving text, checkbox upgrades, or custom notes.
Setup:
- Install and activate TM Extra Product Options plugin
- Navigate to WooCommerce → TM Extra Product Options
- Click “Add New Form” and choose your input types (text, dropdown, checkbox)
- Assign forms to products or entire categories
- Test the product page to ensure proper layout and pricing (if applicable)
These fields show up below the core variation dropdowns and are stored with the order.
TM Extra Product Options is also compatible with conditional logic, you can hide or reveal fields based on user selections, perfect for customizing complex products.
Troubleshooting Tips:
- Fields Not Saving: Check that each field is assigned to a visible product or category
- Cart Data Missing: Ensure you’ve enabled “Send to cart” in field settings
- Mobile Layout Buggy: Enable mobile stacking in plugin layout settings
- Plugin Conflict: Temporarily disable other product option plugins to test compatibility
- Slow Page Load: Large forms or too many conditional fields can impact speed, test performance after changes
Variation Comparison Table
| Feature | Built-In WooCommerce | With TM Extra Product Options | With WooThumbs Plugin |
|---|---|---|---|
| Main Image Per Variation | ✅ Yes | ✅ Yes | ✅ Yes |
| Full Image Gallery Per Variation | ❌ No | ❌ No | ✅ Yes |
| Conditional Form Fields | ❌ No | ✅ Yes | ❌ No |
| Global Fields (e.g., Gift Wrap) | ❌ No | ✅ Yes | ❌ No |
| Custom Text Inputs | ❌ No | ✅ Yes | ❌ No |
| Plugin Needed | ❌ No | ✅ Yes | ✅ Yes |
This grid highlights what’s available out-of-the-box versus what requires plugin support. Most shops that want more interactive or design-driven variation experiences find it worthwhile to invest in one or both plugins.
FAQ: WooCommerce Product Variations
Can I add images to each variation in WooCommerce?
Yes, WooCommerce lets you assign one image per variation by default. You’ll need a plugin like WooThumbs to add a full image gallery per variation.
Why don’t my variations show up on the product page?
Make sure you’ve marked each attribute as “Used for Variations” and assigned prices to all variations.
Can I bulk edit variation prices?
Yes, WooCommerce allows bulk actions under the Variations tab like setting a fixed price or increasing all by a percentage.
How many variations can I create?
There’s no hard limit, but too many (like 100+) can slow down your admin area. Consider using global attributes or separate products if performance suffers.
Do I need a plugin for product variations?
No, but for features like conditional fields, advanced galleries, or custom input forms, plugins like TM Extra Product Options or Variation Swatches are recommended.
Can I use WooCommerce variations with digital products?
Yes! Just uncheck “Manage Stock” and set the file download options per variation.
How do I delete a variation?
Go to the Variations tab, click the dropdown for the specific variation, and choose “Remove.”
Why is my Add to Cart button not appearing?
It’s usually because a variation lacks a price, make sure every variation is fully configured.
Final Thoughts
Product variations are a must-have for most WooCommerce stores, but setting them up correctly can take a bit of patience. Whether you’re just trying to show a sale price for a red T-shirt or want unique image galleries for every color, WooCommerce has a flexible system that scales with your needs.
For more advanced control, pairing built-in tools with plugins like TM Extra Product Options, WooThumbs, or Variation Swatches gives you design freedom without code. Just be sure to test variations thoroughly, especially on mobile, and keep an eye on page speed if your products have dozens of options.
If you’re using WordPress.com with the WooCommerce plugin, upgrading to the Business or Commerce plan unlocks plugin support, better hosting performance, and SEO tools—all of which make product variation management smoother.
Want to learn more? Check out our related guides:
- What is WooCommerce?
- WooCommerce vs Shopify
- Best Hosting and Website Builder
- How to Start an Ecommerce Business
With the right setup, WooCommerce can turn even complex product catalogs into easy-to-navigate customer experiences. Take your time, test thoroughly, and your store will be stronger for it.
AH Web Works 
What do you think?