How to Create Variable Products in WooCommerce
Tags: wordpress
Published: 2020-12-22 02:48:05

<!-- wp:paragraph -->

<p>If you're using WooCommerce to build your eCommerce WordPress website, you should definitely utilize the variable product feature of this plugin. This feature is very useful because it helps you add a set of variations to one product. Thus, it's more flexible and convenient for you to manage your selling items.</p>

<!-- wp:paragraph -->

<p>Are you still confused about what a variable product is? Look at the following example:</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Assuming that you're selling phones, and each kind of phone has different colors and capacities so the price is not the same. Therefore, instead of adding separate products for each color and capacity, you can offer a bunch of variations for ONLY ONE product (it's called a variable product). And each variation has its own color, capacity, and price. It looks more professional, right?</p>

<p><img class="aligncenter" src="https://i.imgur.com/dPfDPPZ.png" alt="An examplel of a variable product about phone" width="919" height="626" /></p>

<!-- /wp:core-embed/imgur -->

<!-- wp:paragraph -->

<p>We're going to walk you through the whole process (step by step). But first, make sure that you installed and activated WooCommerce plugin from <a href="https://wordpress.org/plugins/woocommerce/">wordpress.org</a>.</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Step 1: Add Attributes to Use for Variations</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Like the above example, I'll add two attributes to use for my product (phone) which are <strong>Color </strong>and <strong>Capacity</strong>.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Go to <strong>Product </strong>&gt; <strong>Attributes</strong>, fill in the name and the slug for the product, and then click <strong>Add attribute</strong>.</p>

<p><img class="aligncenter" src="https://i.imgur.com/1bsXn7M.png" alt="Add Attributes to Use for Variations" width="1893" height="965" /></p>

<!-- /wp:core-embed/imgur -->

<!-- wp:paragraph -->

<p>And then, to add values for these two attributes (different colors and capabilities), click <strong>Configure terms</strong> on each attribute.</p>

<p><img class="aligncenter" src="https://i.imgur.com/5EdhKqN.png" alt="add values for two attributes of the phone product" width="1646" height="931" /></p>

<!-- /wp:core-embed/imgur -->

<!-- wp:paragraph -->

<p>Similar to adding attributes, I added different types of color and capacity for the product.</p>

<p><img class="aligncenter" src="https://i.imgur.com/pyL6q9f.png" alt="Add different types of color and capacity for the variable product." width="1903" height="811" /></p>

<!-- /wp:core-embed/imgur -->

<!-- wp:paragraph -->

<p>That's done! We've added different attributes to use for the product. Now, move to step 2.</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Step 2: Add Specific Attributes to the Product</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>First, you need to have a new <a href="https://metabox.io/create-product-pages/">product page</a>.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>On the <strong>Admin Dashboard</strong>, navigate to the <strong>Product </strong>section right below the <strong>WooCommerce </strong>section, and then click <strong>Add New</strong>. On the <strong>Add new product</strong> screen, fill in the necessary information for the product.</p>

<p><img class="aligncenter" src="https://i.imgur.com/jjq95No.png" alt="Add Specific Attributes to the variable Product" width="1901" height="964" /></p>

<!-- /wp:core-embed/imgur -->

<!-- wp:paragraph -->

<p>Next, scroll down to the <strong>Product data </strong>section, choose <strong>Variable product</strong>.</p>

<p><img class="aligncenter" src="https://i.imgur.com/dHMNGli.png" alt="Choose the variable product" width="1566" height="959" /></p>

<!-- /wp:core-embed/imgur -->

<!-- wp:paragraph -->

<p>Move to the <strong>Attributes </strong>tab, click <strong>Custom Product Attributes</strong>. In this section, you can add attributes that were created in step 1 to the product page. This can be done easily by choosing the needed attributes on the drop-down menu, and then click <strong>Add</strong>.</p>

<p><img class="aligncenter" src="https://i.imgur.com/IbsWJ4a.png" alt="add attributes to the product page." width="1580" height="962" /></p>

<!-- /wp:core-embed/imgur -->

<!-- wp:paragraph -->

<p>After I added two attributes (Color and Capacity) into the product, the interface looks like this:</p>

<p><img class="aligncenter" src="https://i.imgur.com/HoG5OFP.png" alt="I added two attributes into the phone product" width="1589" height="849" /></p>

<!-- /wp:core-embed/imgur -->

<!-- wp:paragraph -->

<p>Then, I will add values (different colors, capacities) for these two above attributes. You can do it easily by clicking <strong>Select items</strong> and choosing the values.</p>

<p><img class="aligncenter" src="https://i.imgur.com/IZIDRKL.png" alt="Add values (different colors, capacities) for two attributes." width="1581" height="885" /></p>

<!-- /wp:core-embed/imgur -->

<!-- wp:paragraph -->

<p>After you added values for the attributes, mind that you <strong>MUST </strong>tick the <strong>Used for variations</strong> box. It's <strong>required and very important</strong> because only in this way will you be able to use the variations for the product.</p>

<p><img class="aligncenter" src="https://i.imgur.com/pSOMHdm.png" alt="Tick the Used for variations box to use the variations for the product." width="1577" height="932" /></p>

<!-- /wp:core-embed/imgur -->

<!-- wp:paragraph -->

<p>Finally, don't forget to click <strong>Save attributes</strong>.</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Step 3: Add Variations for the Products</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Upon customizing the product attributes, you need to add the variations for the product. These variations are the combination of the values of the attributes, for example, a green phone with 128GB of capacity, a yellow phone with 256 GB of capacity, etc.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Still on the screen in step 2, move to the <strong>Variations</strong> tab and click <strong>Add variation</strong> &gt; <strong>Create variations from all attributes</strong> &gt; <strong>Go</strong>.</p>

<p><img class="aligncenter" src="https://i.imgur.com/a9ZCSdm.png" alt="Add Variations for the Products in WooCommerce" width="1578" height="952" /></p>

<!-- /wp:core-embed/imgur -->

<!-- wp:paragraph -->

<p>Wait for a few seconds, the variations will show up as follows:</p>

<p><img class="aligncenter" src="https://i.imgur.com/OhtyNE5.png" alt="the variations will show up on the WordPress website back end" width="1577" height="968" /></p>

<!-- /wp:core-embed/imgur -->

<!-- wp:paragraph -->

<p>After you added information for all the variations, don't forget to save and publish the product.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Now, I'll go to the front end of my WordPress website to see the result.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>After I choose a variation of the product, its corresponding price and picture display as below:</p>

<p><img class="aligncenter" src="https://i.imgur.com/mILRXoJ.gif" alt="The variable product display on the front end of the WordPress website" width="1041" height="901" /></p>

<!-- /wp:core-embed/imgur -->

<!-- wp:paragraph -->

<p>It's all done! You've finished adding a variable product in WooCommerce.</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Last Words</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>WooCommerce plugin has a lot of useful features that you can utilize to make your business thrive. And the variable product feature is just one of them. In addition, if you want to add special information that WooCommerce doesn't support by default, refer to <a href="https://metabox.io/add-custom-fields-for-woocommerce/">this article</a> on how to add <a href="https://metabox.io/series/custom-fields">custom fields</a> for WooCommerce. Wishing your business is always successful and prosperous!</p>