Most consumer loves to choose from multiple options.
Now, you are probably wondering how to create these options for your site visitors.
The good thing is that the WooCommerce platform makes this possible using the WooCommerce variable product feature.
The great thing about WooCommerce variable product is as easy as it sounds. Adding variable product in Flatsome theme is even more comfortable.
In this article, you’ll get an in-depth understanding of the variable product, type, and how to set it up in Flatsome WooCommerce powered website.
You will also learn how to extend them with a WooCommerce variable product plugin.
What is a variable product in WooCommerce?
Variable products in WooCommerce lets you create specific products that have multiple variations.
For example, you can put five colors of a t-shirt on display for your customers. You can add color, images, size, or any other variation your product might have. It includes setting up attributes, terms, and variations.
By default, WooCommerce allows you to add different types of products, including:
A simple product is a unique, stand-alone, physical product that you may have to ship to the customer.
The identity of the grouped product is created by a number of child products that have unique features of their own.
A virtual product is defined as a product that is not a physical entity. You can select the checkbox to make a product virtual.
Downloadable products don’t require shipping. They are available as a downloadable file with a specified path or URL. You can select the checkbox to make a product downloadable.
In some cases, you list a product in your store, but you aren’t the actual seller of the product. You will have to specify the URL of the product and the text to be displayed on the Add-to-cart button.
Variable product type lets you add variations to the same product to create a complex, variable product. Each variation of the product has its price, available stock, SKU, etc.
Create Variable Product in Flatsome WooCommerce Theme
The basic concept of WooCommerce variable products as outlined above. So, it’s time to put that knowledge into action.
Follow the step by step guide below to create variable products for your WooCommerce store.
The basic concept of WooCommerce variable products as outlined above. Now it’s time to put that knowledge into action.
Create product attributes
You can’t create a variable product without adding an attribute because attributes define product variations.
For example, a t-shirt size could either be small, large, or medium. Here, ‘size’ is the attribute, while ‘small,’ ‘large,’ and ‘medium’ are the product variations.
There are two types of attributes in WooCommerce; global product attribute and custom product attribute.
Global product attributes can be applied to multiple products in your store. For example, your store t-shirt can have both ‘size’ and ‘color’ as global attributes. Therefore, you don’t have to keep adding the same attributes.
On the other hand, custom product attributes are specific to one product only. You can’t apply it to another when you create custom product attributes.
In the next step, we are going to start with creating attributes –
Step 1: Creating attributes:
You need to create attributes before creating your variable product.
- Under the ‘Products’ section, choose ‘Attributes’ in the left menu bar.
- In the ‘Name’ field, add the title of the attribute.
- The slug field is optional.
- To finalize the changes, click on the ‘Add attribute‘ button.
- New attributes are now listed in the table to the right.
Step 2: Add specific values of an attribute:
- Click ‘Configure terms’ in the ‘Terms’ column of your attribute.
- There is an ‘Add new Color’ form on the left side.
- Add each color you sell clothing in (such as green, blue or red)
- By clicking the ‘Add new color’ button on the left side (you can add as many colors as you need).
Step 3: Adding attributes to an individual product.
- Navigate to ‘Products’ from the left menu bar. You can add either a new item or edit the existing one.
- From the drop-down of the ‘Product data‘ section, select ‘Variable product.
- Head to the ‘Attribute’ tab. A list of attributes that you have created for your products is visible here.
- Select one of the attributes from the list. Here, I have selected the ‘color’ attribute.
- You can select more than one option or click on the ‘Select all’ button.
- Don’t forget to check both ‘Visible on the product page’ and ‘Used for variations.’
- Then click on ‘Save attributes.’
- Note: if you want, then more attributes can be added (from the ‘Add new’ button).
Step 4: Add variations to your product.
- Right below the Attributes, navigate to the ‘Variations’ section, and select ‘Add variation’ from the drop-down.
- There will be a new drop-down menu after you hit the ‘Go’ button.
Now it’s time to choose the attribute for your variations (such as a particular color).
Step 5: Customize the rest of the setting.
- Expand the variations panel
- This allows you to add different information for each variation.
- There are options to upload an image, add the price, stock status, dimensions, and more.
- But it’s mandatory to set a price for variation.
- To finalize the changes, click on ‘Save changes.’
Just press the ‘Publish’ button after picking up the appropriate category for your variable product.
You are done. Now see your result –
Extend with a powerful WooCommerce plugin
When you display variable products as swatches will be more appealing to your online store visitors.
You need a plugin to create a new experience for WooCommerce product variations.
An example of such a plugin is the WooCommerce Variation Swatches plugin. The plugin lets you display your WooCommerce product variations as swatches.
The look of a product page will be changed into button swatches immediately, after installing WooCommere Variation Swatches plugin. But you can upgrade to pro version to change default dropdown menu into color, image and radio button swatches.
We hope, tutorial has helped you to learn the steps needed to add variable product in Flatsome powered WooCommerce store. If you need more tutorials on Flatsome theme or WooCommerce, let me know in the comment section. I’ll write the next tutorial for you.