WooCommerce Tutorial

11How to create a front-end form for adding WooCommerce products

Toolset plugins let you create forms for adding and editing WooCommerce products. Your users can directly add products from the front end without accessing the WordPress admin.

This guide is the eleventh step of our WooCommerce tutorial: How to build an e-commerce website in 12 steps.

We chose a simple form, but you can create more advanced forms using additional WooCommerce fields. Please refer to the documentation for details.

Buy Toolset

11.1 Creating a page for a product form

Creating a page for a product form
Creating a page for a product form
In your training site:
  1. Add a new page, and give it a name, e.g., “Add a new product.”
  2. Click Save draft.
  3. 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

Adding a cell for the product form
Adding a cell for the product form
  1. In your layout, draw a six-column cell.
Inserting the Post Form cell
Inserting the Post Form cell
  1. 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:
  1. Make sure that the “Create a new Post Form” option is selected.
  2. Make sure that the Create content value is selected in the This form will: dropdown.
  3. Choose Products in the “Content type.”
  4. Create the cell.
Setting up the product form
Setting up the product form
The Edit Post Form screen opens. Here, you set up your Toolset form.
  1. Give your form a name, e.g., “Form for adding new products.”
  2. Expand the Settings section.
  3. In the Status of content created or edited by this form: field, choose Pending Review.
  4. 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.
Your form for adding new products
Your form for adding new products
  1. Scroll down to the Form editor section.
  2. 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.

  1. 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

  1. Click on your Toolset form cell to open it for editing.
  2. Go to the Content section.
  3. Go to the Content section.
  4. Remove the entire blog for adding taxonomies. Remove everything between class=”cred-group cred-group-taxonomies div tags (including these tags)
  5. 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.

  1. In your form editor, position the cursor where you want your product category list to appear.
  2. Click Add Post Fields.
  3. 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
  4. 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

  1. Go to Toolset -> Post Forms.
  2. Scroll down to the Manage non-Toolset Post Fields with Toolset Forms section, then click Manage non-Toolset Post Fields.
  3. In the Select Post Type dropdown, select Products and in second dropdown select Include Hidden Fields, then click Apply. Additional WooCommerce Fields will appear.
  4. Locate the _regular_price field and click Add to register it.
  5. In the pop-up that opens, select Numeric and check Required and Validate Format.
    Registering the _regular_price field to make it available in Toolset forms
    Registering the _regular_price field to make it available in Toolset forms

Now, when the price field is registered, you can insert it into your form.

Inserting the Product Price Field in Your Form

  1. Go to Toolset -> Post Forms and open your form again.
  2. Scroll down to the form Content.
  3. Position the cursor where you want your price field to appear.
  4. Click Add Post Fields -> Custom Fields, and then select the _regular_price field.
  5. Using HTML, precede your product field with a label.
  6. 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.

Toolset plugins allow you to display WooCommerce information about you store’s orders. You can list orders on the front-end, display which products were purchased, and more. Step 12

Build the perfect website today

Toolset allows you to add some of the most important features for your website in less time than ever. That’s because with Toolset you do not need to write PHP – saving you hours of needless coding.

You no longer need to manage dozens of complex plugins for your website. You can use the full Toolset package to build, run and maintain it all.

Whether you are a WordPress newbie or an experienced web developer, we have the plan for you based on your needs and budget.