Add a new page, and give it a name, e.g., “Add a new product.”
Click Save draft.
Click the Content Layout Editor button to begin designing the body of your page with the Layout Editor.
11.2 Creating a front-end form for product submission
In your layout, draw a six-column cell.
On the screen that opens, locate the Post Form cell and insert it.
The Forms cell lets you create front-end forms for adding posts of any type, including Products.
On the next screen:
Make sure that the “Create a new Post Form” option is selected.
Make sure that the Create content value is selected in the This form will: dropdown.
Choose Products in the “Content type.”
Create the cell.
The Edit Post Form screen opens. Here, you set up your Toolset form.
Give your form a name, e.g., “Form for adding new products.”
Expand the Settings section.
In the Status of content created or edited by this form: field, choose Pending Review.
In the After visitors submit this form: field, select Display a message instead of a form, and type in your message, which will appear after submitting the form.
Scroll down to the Form editor section.
Your default form for adding new products has been added as a set of shortcodes.
It includes Product basic fields. For the time being, leave the form content as is. We will customize it later.
Press Save and Close this form and return to the layout.
11.3 Customizing your product form
Now you can customize the form to serve your needs. You will make the following changes:
Replace the default list of taxonomies with a simple drop-down for adding a Product Category.
Add the product’s regular price.
Removing the Default Taxonomy List
Click on your Toolset form cell to open it for editing.
Go to the Content section.
Go to the Content section.
Remove the entire blog for adding taxonomies. Remove everything between class=”cred-group cred-group-taxonomies div tags (including these tags)
Feel free to remove other fields you do not need; for example, the product excerpt.
Displaying the Product Categories as a Drop-down
By default your Product categories display as a list of checkboxes. Let us turn it into a drop-down wher a user can choose only one category.
In your form editor, position the cursor where you want your product category list to appear.
Click Add Post Fields.
Click Taxonomies, then Product categories. By default, your product categories will be displayed as a list of check boxes. Replace the display=’checkbox’ with display=’select’ single_select=’true’ to turn your list into a single-choice dropdown
Save your form and test it on the front-end. Your product categories should now be displayed as a drop-down.
Adding the Product Price Field to Your Form
Your form includes some basic product fields but lacks the product price. You can add it now. You will not find the product price field in your Forms GUI; this is an additional WooCommerce field that is not available for Forms until you explicitly register it. The same applies to other WooCommerce fields. Please refer to the documentation for details.
Registering the Price Field
Go to Toolset -> Post Forms.
Scroll down to the Manage non-Toolset Post Fields with Toolset Forms section, then click Manage non-Toolset Post Fields.
In the Select Post Type dropdown, select Products and in second dropdown select Include Hidden Fields, then click Apply. Additional WooCommerce Fields will appear.
Locate the _regular_price field and click Add to register it.
In the pop-up that opens, select Numeric and check Required and Validate Format.
Now, when the price field is registered, you can insert it into your form.
Inserting the Product Price Field in Your Form
Go to Toolset -> Post Forms and open your form again.
Scroll down to the form Content.
Position the cursor where you want your price field to appear.
Click Add Post Fields -> Custom Fields, and then select the _regular_price field.
Using HTML, precede your product field with a label.
Save your form and test it on the front-end.
Your product from should now display the Product price field. Add a new product to ensure that it works.
Questions? Ideas? Suggestions?
If you have any questions on how to front-end form for adding WooCommerce products, add your comments and we’ll get back to you. Toolset clients can also create tickets technical support forum, where are support team works 6 days / week, 19 hours / day.