Grouped products are a product type in WooCommerce that lets you list several products together on a single page. You first create the individual products and then add them to a grouped product. These can be any type of product, simple product, variable product, etc. 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 grouped 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 Grouped Product there are a few fields we must use. To select the products to add we need the Grouped Products field. Additionally, the Grouped Products field will only be visible to the user when the Grouped Product option is selected in the Product Type field.
In summary, we need two fields: Grouped Products and Product Type.
Most of the other fields can be added or removed independently and will have no effect on the Grouped 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. For example, grouped products do not contain any price or shipping information, as those are contained within each individual product. This means when Grouped Product is selected as the product type these fields 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 Grouped Product Field has the general styling options that are applicable to all fields. This includes the regular options such as Label, Instructions, Required, Hidden, etc.
Using the Form
The left side shows a list of all the products in the store. The user can search by product name or filter by product type by clicking the drop-down. The user selects products to be added to the grouped product by clicking them.
To configure grouped products the individual products can be created first, and then added to the grouped product. Or, if you have the Grouped Product field activated in your Edit Product template, the users can create an empty Grouped Product and edit it to add the products after the fact.
Want to learn more about using the Edit Product Widget? Check out the Edit Product Widget guide.
Final Result
This is how the form looks in the Elementor preview:
And here is how the live webpage looks:
When the user clicks the Grouped Product option then the relevant fields will appear and the products can be added.
