\ud83d\uded2 Are you in the middle of building your own ecommerce store? Here’s an in-depth guide<\/a> on how to start an online store from start to finish.<\/p>\n\n\n<\/div><\/div>\n\n\n\n In this post, we\u2019ll explain what WooCommerce variations are and how they work. Then we\u2019ll walk you through how to set them up for your products. Let\u2019s take a look!<\/p>\n<\/div>\n\n\n\n Sometimes, a product you list in your WooCommerce<\/a> store will only come in one type. On the other hand, many items will come with various options. Just a few examples include:<\/p>\n\n\n\n Most stores will offer at least a few items with more than one variety, and many rely heavily on these types of products. Fortunately, WooCommerce provides a built-in way to add practically any options to your product pages<\/a>.<\/p>\n\n\n\n This system is made up of two key features \u2013 ‘attributes’ and ‘variations’. The two are often confused, so it\u2019s important to clarify the difference between them.<\/p>\n\n\n\n Attributes<\/strong> are descriptors for a product, letting customers know key facts about a product’s size, color, material, and so on.<\/p>\n\n\n\n So, for example, you may have a sweater with the attributes of \u201cblue\u201d and \u201cwool\u201d, or a travel bag with a specific weight and dimensions:<\/p>\n\n\n This information is purely descriptive. It\u2019s listed on the product page, but cannot be interacted with or changed by the customer.<\/p>\n\n\n Variations<\/strong>, on the other hand, are actual choices that a customer can make. For example, if a customer can choose between a “blue” and a “red” sweater, that’s a variation.<\/p>\n\n\n\n If you want to let people actually select different options, you\u2019ll also need to add variations. For instance, you could give customers the choice to select between three sizes of the same shirt:<\/p>\n\n\n Attributes can be used without variations, merely to provide extra information to your customers. However, if you want to use variations, you’ll first need to set up attributes. If this sounds a little confusing, don’t worry \u2013 we’re going to walk you through exactly how the process works.<\/p>\n\n\n As promised, throughout the next three steps, we\u2019ll show you how to set up variations in your WooCommerce store. If you haven’t already, you\u2019ll first want to install and set up WooCommerce<\/a>. Then, we can get to work!<\/p>\n\n\n\n The variations system relies on attributes. Therefore, for any variation you want to set up, you\u2019ll need to first create a corresponding attribute.<\/p>\n\n\n\n There are a few ways to do this. While you could<\/em> create attributes on individual product pages, it\u2019s easiest to set them up in the dedicated Products > Attributes<\/em> section:<\/p>\n\n\n Here, you can add a new attribute. For instance, let\u2019s say you sell clothes in a variety of colors. You might name your attribute \u201cColor\u201d, and assign it the same word as a slug<\/a>. The name and slug can be whatever you\u2019d like. What\u2019s important is to make sure they\u2019re descriptive and easy to remember.<\/p>\n\n\n\n Once you hit the Add attribute<\/em> button, your new attribute will appear in the menu to the right:<\/p>\n\n\n Now, select Configure terms<\/em>. On this screen, you can add a new entry for each version of the attribute \u2013 here this means each color you sell clothing in. Let\u2019s add \u201cGreen\u201d:<\/p>\n\n\n You can continue to add as many colors as you need, one at a time. You can include a description for each if you’d like, but this isn\u2019t necessary (and won\u2019t be displayed on many WooCommerce themes<\/a> anyway).<\/p>\n\n\n\n When you\u2019re done setting up your first attribute, you can go back and add as many others as you need. For our clothing store, we might go on to add sizes and materials as individual attributes. You can always come back here later to make additional changes as well.<\/p>\n\n\n At this point, it\u2019s time to put your new attributes to use. Open up a WooCommerce product \u2013 this can be either a new or an existing item \u2013 and scroll down to the Product data<\/em> section:<\/p>\n\n\n Right next to the Product data<\/em> heading, select Variable product<\/em> from the drop-down menu. This will let WooCommerce know you want to create a product with multiple options, and change the settings you have to play with.<\/p>\n\n\n\n Then open up the Attributes<\/em> tab, select one of the attributes you created, and click on Add<\/em>:<\/p>\n\n\n Now, you can select whatever attributes describe the product you\u2019re currently editing. Click on the Value(s)<\/em> menu, and your choices will appear:<\/p>\n\n\n You can select more than one option \u2013 for example, if an item comes in both blue and red.<\/p>\n\n\n\n You\u2019ll also want to make sure that both Visible on the product page<\/em> and Used for variations<\/em> are checked. Then, hit the Save attributes<\/em> button.<\/p>\n\n\n\n If needed, you can go on to add more attributes to the item. However, for now, let\u2019s turn our attention to variations.<\/p>\n\n\n Next, select the Variations<\/em> tab. As long as you\u2019ve set up at least one attribute, you\u2019ll get the option to Add variation<\/em>:<\/p>\n\n\n Hit Go<\/em>, and you\u2019ll see a new drop-down menu where you can select an attribute (such as a particular color):<\/p>\n\n\n Choose the attribute you want, then customize the rest of the settings underneath as needed. The only required field is the price for the variation, but you can also set the item\u2019s stock status, weight, dimensions, and more:<\/p>\n\n\n This enables you to add different information for each variation.<\/p>\n\n\n\n For example, you might want to set distinct prices for the same item made from different materials or enter unique dimensions for a product that comes in various sizes.<\/p>\n\n\n\n You can also make each variation\u2019s price and associated details identical \u2013 it\u2019s completely up to you.<\/p>\n\n\n\n Save your changes when you\u2019re done. Then, hit Go<\/em> again to create your next variation:<\/p>\n\n\n You can select a new attribute here (such as a different color), and customize its information as described above. This process can be repeated to add as many variations as you need. Just don\u2019t forget to save your changes to each variation, and to the product as a whole when you\u2019re done.<\/p>\n\n\n A great thing about WooCommerce<\/a> is its supreme flexibility<\/a>. You can create product pages that are as simple or complex as you need. This means you can set up very basic products, or sell items with many different variations.<\/p>\n<\/div>\n\n\n\n \ud83d\udecd\ufe0f In order to add variations to your store\u2019s products, you\u2019ll want to:<\/p>\n\n\n\n Do you have any questions about how WooCommerce variations work? Share your questions in the comments section below!<\/strong><\/em><\/p>\n\n\nA primer on WooCommerce variations and attributes<\/h2>\n\n\n\n
\n
\ud83d\udc49 Attributes<\/h3>\n\n\n\n
![\"An](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/01\/woocommerce-attributes-example.png\")
<\/figure><\/div>\n\n\n\ud83d\udc49 Variations<\/h3>\n\n\n\n
![\"An](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/01\/woocommerce-variations-example.png\")
<\/figure><\/div>\n\n\nHow to create and display product variations in WooCommerce (in 3 steps)<\/h2>\n\n\n\n
\n
1. Set up attributes for your WooCommerce products<\/h3>\n\n\n\n
![\"The](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/01\/woocommerce-attributes-tab.png\")
<\/figure><\/div>\n\n\n![\"Adding](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/01\/woocommerce-attributes-new.png\")
<\/figure><\/div>\n\n\n![\"A](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/01\/woocommerce-attributes-color.png\")
<\/figure><\/div>\n\n\n2. Assign attributes to an individual product<\/h3>\n\n\n\n
![\"The](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/01\/product-data-section.png\")
<\/figure><\/div>\n\n\n![\"Adding](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/01\/product-data-attributes.png\")
<\/figure><\/div>\n\n\n![\"Configuring](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/01\/product-data-colors.png\")
<\/figure><\/div>\n\n\n3. Add variations to your product<\/h3>\n\n\n\n
![\"The](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/01\/product-data-variations.png\")
<\/figure><\/div>\n\n\n![\"Adding](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/01\/product-data-variations-colors.png\")
<\/figure><\/div>\n\n\n![\"WooCommerce](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/01\/product-data-variations-details.png\")
<\/figure><\/div>\n\n\n![\"Multiple](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/01\/product-data-variations-multiple.png\")
<\/figure><\/div>\n\n\nConclusion \ud83e\uddd0<\/h2>\n\n\n\n
\n