Add New Product Widget – Variable Products

Add New Product Widget – Variable Products

Required plugins: Elementor (free), Advanced Custom Fields (free), and ACF Frontend Pro

Variable products are a product type in WooCommerce that lets you offer a set of variations on a specific product, with control over prices, stock, image and more for each individual variation. They can be used for a product like a shirt, where you can offer a large, medium and small and in different colors. You can read more in the official WooCommerce Docs article.

In the Add Product Widget article we covered the basics of using the widget to build a form for adding Simple Products. If you haven’t read that yet you should stop and read it through before continuing. In this guide we will build on that and show you how to make a form which can create variable products.

Adding the Widget

Just like we did before, we need a page to host the form. This can be the same page and even the same widget instance as the form for creating simple products. If you would like a separate form, create a new page to host it, and add the Add Product Form widget.

Form Fields

To create a Variable Product there are a few fields we must use. To define the different variations we need the Attributes field, and to add variations we need the Variations field. Ensure they are added to the form. Additionally, the Variations field is only relevant to variable products so will only be visible to the user when the Variable Product option is selected in the Product Type field. 

In summary, we need three fields: Attributes, Variations, and Product Type.

Most of the other fields can be added or removed independently and have no effect on the Variable Product aspect. You can read about them in the Add Product Widget guide.

There are certain fields which will be hidden based on the product type. For example, variable products do not use the regular Price field (as you need to add prices to each variation). So when Variable Product is selected as the product type, the Price field would be hidden.

Note that the conditional fields are only rendered in the front end of the web page. In the Elementor preview all fields will be visible.

Field Specific Options

These fields have the general styling options that are applicable to all fields. Here we will explain the additional options specific to each field.

Product Type

This is where the user can choose what type of product they would like to add. This selection also controls which other fields are visible and accessible to the user. The fields relevant to variable products will only be visible if the Variable Product option is chosen.

You can configure the selection to be with radio buttons or a dropdown, and you can also define a default choice. The selection will default to Simple Product unless you change it.

This field can also be used to restrict the form to only allow a specific product type. To do this you first define the desired type as the Default Type. Then set the Product Type field to Disabled or Hidden. In this way the form will show all the relevant fields, but the end user will not be able to change the product type.

Attributes

Attributes are what allow us to define the different variations. These are minor differences in the product such as color or size. Attributes can be added for any product type for filtering but they are essential for creating variable products.

Attributes have a name and contain values. For example, you might have an attribute called Size whose values are Small, Medium, and Large.

There are four sections in the field: Name, Locations, Custom Terms, and Global terms. For each you can edit the label or add instructions by clicking the Manage Fields button. You can also change the text for all the buttons and add a No Value Message in the field options.

The field shows the available options when adding a new attribute to a product (number 1 below). Additionally, if you have any global attributes they can be used as well, and the options for them are shown as well (number 2 below). 

Currently you cannot add new Global Attributes through the widget, they must be added through the WooCommerce Dashboard.

From the front end, if the user adds a custom product attribute it will show number 1 and if they select the global attribute then 2 will be shown. In both cases the user can choose if the attribute should be visible on the product page, and if the attribute should be used for variations. Note that the “Used for variations” option is only visible if Variable Product is selected in the Product Type field.

Custom Product Attributes

The user must add a name and values, by clicking the Add Value button. Multiple values can be added by repeatedly clicking the button. This attribute will not be reusable in other products, you will need to add the data again manually.

Global Attributes

The name is already defined and there are already options for the Terms. The user can choose from the existing terms by clicking the dropdown. They can also add new terms by clicking the Add new [attribute name] button. Multiple values can be added by repeatedly clicking the button. These terms will be added to the global attribute and can be reused later. 

Saving

Once they have finished adding the attributes make sure to click Save Changes. You can also duplicate or delete attributes by clicking the buttons at the top right of the field.

Variations

Once you have defined the attributes you can define the variations. Add a new variation by clicking Add Row.

The user choses the attribute values for this variation and then fills out the relevant fields. The individual variations can be rearranged and even collapsed by clicking the box on the left.

Each variation behaves almost like its own product. That means each has distinct values for all the regular product fields, like Description, Image, Price etc, and the widget allows us to specify which fields are accessible. Click the Manage Fields button to open the menu. 

Each of these fields include the full customization just like a simple product. You can add default values, set certain fields to be hidden, required, or disabled, add instructions etc.  

The field specific options are all available here as well. You can set minimum and maximum values for the price, add a default featured image, set the stock status, and more. You can read about all the field specific options in the Add Product Widget guide.

Once the options for the variation are added click Save Changes. More variations can be added by clicking Add Row again. Don’t forget to save!

Once all the variations are added you are finished! Just submit the form and the product will be created!

Add New Product Widget – Variable Products

Still stuck? 
Contact our support team here.

Get the free plugin and receive updates