Add New Product Widget – Virtual Products

Add New Product Widget – Virtual Products

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

Virtual products are products which are listed in your store and appear as any other product, but have no physical component which is shipped. For example, a subscription or online package. You can read more in the official WooCommerce Docs.

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 virtual 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 regular, 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 Virtual Product we must use the Virtual Product field. 

Nearly all the other fields can be added or removed independently and will have no effect on the Virtual 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. Virtual products do not contain any shipping information, so when Virtual Product is selected, any shipping fields added to the form (Weight, Shipping Class, etc) 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

The Virtual Product field has the general configuration options applicable to all fields such as Label, Instructions, Required, Hidden etc. There are also more options under the Style tab such as adding padding or margins.

Final Result

This is how the form looks on the live webpage:

When the user clicks the Virtual Product button then the shipping fields are all hidden.

There you go! Now you know how to set up the widget to make Virtual Products!

Add New Product Widget – Virtual Products

Still stuck? 
Contact our support team here.

Get the free plugin and receive updates