How to Create and Edit Variable Products in WooCommerce
If you’re managing an online store with WordPress and WooCommerce, understanding how to edit your products and use product variations is essential. Whether you sell clothing with multiple sizes and colors or any product with custom options, WooCommerce’s variable product functionality allows you to create flexible listings that improve the customer experience and boost sales.
In this guide, we’ll walk through how to edit products and make them variable products, including adding color and size options, setting prices per variation, and assigning unique images for each one.
Step 1: Accessing the Product Editor in WordPress
To get started:
- Log in to your WordPress dashboard.
- Go to Products > All Products.
- Click on the product you want to edit, or click Add New to create a new product.
From here, you can edit the title, description, images, pricing, inventory, and more.
Step 2: Change Product Type to “Variable Product”
Scroll down to the Product Data section.
- From the dropdown menu at the top, change the product type from Simple product to Variable product.
- This unlocks the Attributes and Variations tabs inside the product data section.
Leave the General and Inventory tabs for now—we’ll set these values per variation later.
Step 3: Create Attributes (e.g., Color, Size)
- Click on the Attributes tab under Product Data.
- Click Add to create a new custom attribute like “Color” or “Size.”
- In the “Name” field, enter the attribute (e.g., Color).
- In the “Value(s)” field, enter the options separated by a vertical bar |. For example:
- Red | Blue | Green for color
- Small | Medium | Large for size
- Red | Blue | Green for color
- Check the box for Used for variations.
- Click Save attributes.
Repeat this step for any additional attributes.
Step 4: Generate Product Variations
Now that your attributes are saved, go to the Variations tab.
- From the dropdown menu, choose Create variations from all attributes and click Go.
- WooCommerce will generate a variation for each possible combination of your attributes.
Example:
If you created 3 colors and 3 sizes, WooCommerce will generate 9 variations.
Step 5: Edit Each Variation’s Details
Now you’ll see a list of your variations, each expandable. For each one:
- Click the triangle icon to expand the variation settings.
- Set the following fields:
- Regular price (required)
- Sale price (optional)
- Stock status (In stock / Out of stock)
- SKU (if applicable)
- Enable checkboxes for active variations
- Variation image: Click the image placeholder to assign a unique image for this variation
- Regular price (required)
Repeat this for each variation as needed.
Step 6: Add Variation Images
For visual clarity and better customer experience, you can assign a different image to each variation:
- Expand the variation.
- Click the image placeholder or thumbnail next to the variation name.
- Upload a new image or choose one from your media library.
- Click Set variation image.
This ensures when a customer selects a color like “Red,” the product image updates to reflect that selection.
Step 7: Publish or Update Your Product
Once you’ve configured all variations:
- Double-check that pricing, images, and inventory are filled in
- Click Update or Publish on the right side of the page
Your product will now appear on the front-end of your site with selectable dropdowns for each attribute, automatic price updates per selection, and variation-specific images.
Conclusion
Learning how to edit products and make them variable products in WooCommerce is essential for running a modern, flexible online store. It enhances customer experience, showcases your product options clearly, and helps you manage inventory more effectively.
Whether you’re offering different colors, sizes, materials, or features, WooCommerce gives you the tools to present them professionally and efficiently.
Need help building or optimizing your eCommerce store? Contact us to learn how we can help you create a seamless shopping experience on WordPress.
