WooCommerce Variable Merchandise Setup Tutorial: Adding Size and Color Options is Easy!

in the process of building WordPress When shopping websites, many people encounter the need for items that are not just one size, but are available in a variety of sizes and colors. The good news is.WooCommerce The "Variable Product" feature allows each product to have multiple variants for customers to choose from.

This article will take you step-by-step through the process of building a WooCommerce Variable Product with size and color options, from backend setup to portfolio generation, it's easy and practical.

Step 1: Add a new variable commodity

log in WordPress the area behind a theatrical stage
Go to [Products] → [New] in the left menu.

Enter the product name
In the "Product data" area below, replace [ ] with [ ].simple commodity]Switch to [Variable Commodity

This way the item can start adding multiple attributes and variants.

Step 2: Add Size Attribute

Switch to the [Properties] tab
Select [Customize Product Attributes] → Click [Add].

Enter "Size" in the Name field.
Enter in the value field:S | M | L(Use of vertical lines) | (as a separator)
Check [for change type]
Click on [Store Properties

You can also copy and paste the vertical lines first to make sure the formatting is correct.

Step 3: Add Color Attributes

Keep clicking on [Add]
Enter "color" for the name
Numerical Example:White (Plain) | Green (Pattern)
Also use vertical lines to separate
Check [for change type]
Click on [Store Properties

Now that you've added two attributes: size and color, you can combine multiplemorphThe

Step 4: Create a portfolio of goods (variants)

Switch to the [Change Type] tab
Click [Create change type from all attributes].
Press [Send] and then press [OK] twice as prompted.

The system generates all combinations automatically. For example, there are 3 sizes × 2 colors = 6 variants.

Step 5: Set images and prices for each variant

Tap [Edit] to the right of each combination

Upload an image exclusive to this variant
Enter the price (e.g., 390)
Set all combinations in order
Finally, click [Save Settings].

everyonemorphAll can have individual pictures and prices so that the front desk can display them correctly.

Step 6: Setting Preset Options

When the product page opens, only one preset combination of diagrams and information will be displayed.

Select the default display size and color (e.g., M size + green) in [Preset Form Values].

Click [Save Settings] again

Step 7: Set the main product image (for product listings)

Slide to [Product Image] at the bottom right corner of the page

Upload a variation of the image you want to use as the main image of your product (we recommend using the portfolio image that was just set as the default)

Click [Set Product Image].

Step 8: Publish the product and preview it

Click [Publish].
Go to [Preview Changes
See preset images on the product listing page

Tap into the product detail page, you can freely choose the size and color, the system will also automatically switch the picture and price!

summarize

WooCommerce The variable product feature is ideal for use with products that have multiple sizes. As long as you set up the attributes and variation types, you can easily do the free choice of sizes and colors, no matter if it's clothes, shoes, accessories or other products. Follow the steps in this article to set it up step by step, and you'll soon have a more complete, professional and usable merchandise page.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off