Skip Navigation
Buy Now
Home » Course » Custom WooCommerce Sites » Front-end Forms for Adding WooCommerce Products » Creating Front-end Forms for Adding WooCommerce Products

Creating Front-end Forms for Adding WooCommerce Products

Toolset lets you create forms for adding and editing WooCommerce products. Your users can submit products directly via front-end without accessing the WordPress admin.

An example of a Toolset form for adding a new WooCommerce Product
An example of a Toolset form for adding a new WooCommerce Product

What kinds of Products you can add with Forms

You can create Toolset forms for adding and editing Simple Products and External/Affiliate products. You cannot create Toolset forms for Variable and Grouped products.

Toolset allows you to build a front-end form for adding Simple products

What can Product forms contain

When you add a new product from the WordPress backend, you fill in different product fields and information. You can use almost all those fields in Toolset forms.

This includes standard WooCommerce product fields,  custom fields you add to products, custom taxonomy you add to products, and post relationship fields.

Some of these fields are available in Toolset forms out-of-the-box. This includes Product Name, Product Description, Product Short Description, Product Categories, Product Tags, and Product Image.

Other product fields like Sale Price and Stock Status don’t appear in the Forms interface automatically. Instead, you must register additional product fields for product forms.

Creating a form for submitting new products

When you create a new Toolset form for submitting new products, it will be auto-populated with available product fields. You can then rearrange these fields, change their labels, insert additional ones, and remove the ones you don’t need.

Use the following steps to create a form for submitting new WooCommerce Products:

  1. Make sure you have the Toolset WooCommerce Blocks and Toolset Forms plugins active.
  2. Go to Toolset → Post Forms and click Add New. A wizard will guide you through the steps.
  3. Give your form a name.
  4. In the next step, you need to select the main form options. For the post type select Products.
  5. Set up the status of the post created by the form, and other fields according to what you need.
Using the wizard to create front-end forms for submitting products
Using the wizard to create front-end forms for submitting products

In the next step, you design your form’s contents.

Toolset forms look good and are responsive out-of-the-box. However, you might want to adjust their style to fit your store’s design even more.

When you are done, click Continue to proceed to the final step and then save the form.

Displaying product forms

Once your form is ready, you need to display it to users.

To display a form for creating products it’s best to create a standard page. There, insert the Toolset Form block and select your form.

For more information check out the lesson about forms for adding content.

Adding a product form to a page

Product form displayed on a standard page

To display a form for editing products, you should add a link to them on your single-product template.

Link to edit a product on a single-product page

Editing forms are very similar to the ones for creating new items but have a slightly different workflow. To learn how to use them, check out the video and written material in the lesson about forms for editing content.

Controlling access to product forms

It’s very important to define who has permissions to use a form that can add content to your site. To set access permissions for Toolset forms you need to install and use the Toolset Access plugin.

Use these steps to set permissions for your product forms:

  1. Go to the Toolset → Access Control page and click the Toolset Forms tab.
  2. Click to expand the Post Forms Front-end Access section.

A table appears, with a lists of all user roles and their access to available front-end forms and permissions.

Access permissions for submitting new “Gyms” posts using Toolset forms
Go to next step

Main Toolset Block Used in this Lesson

Form

Forms for front-end content submission and editing

Dario
Updated
May 19, 2021
Send feedback to our documentation team