Virtual products are products that 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 that 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 that 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 that are 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.
