WooCommerce frontend product submission guide: Step-by-step

August 5, 2021

WooCommerce frontend product submission plugin

Want to add WooCommerce frontend product submission to your store? This allows other people to add products from the frontend of your website. They never need to visit your WordPress admin dashboard.

Frontend product creation is great for any type of multi-vendor store. That's because most people will find it more convenient to work from the frontend. It can also come in handy for many other types of WooCommerce store.

In this post, you'll learn how to allow WooCommerce frontend product submission using Gravity Forms and then display those products using WooCommerce Product Table.

Thanks to Gravity Forms' flexibility, you'll have a ton of control over how your frontend add product forms look and where they appear. Here's an example of what you can build:

Example of WooCommerce Frontend Product Submission form

You can then display the user-submitted products in a table layout, like this:

Example of product list

Beyond that, we'll also share tons of tips for working more effectively with your frontend forms. This includes restricting access to the forms, assigning custom taxonomies for vendors, and displaying user-submitted products in a shopper-friendly manner.

What sorts of website need WooCommerce frontend product submission?

The biggest use case for frontend product submission is any type of WooCommerce multi-vendor store. That is, a situation where third-party users can add products from the frontend and sell them through your Woo store.

While there are quality full-service multi-vendor plugins, sometimes you don't need all that extra functionality for commissions, vendor reports, etc. This method is a much more lightweight approach.

For example, maybe you're creating a website for a food festival and you want to let each restaurant owner add their menu items as WooCommerce products. This method would make that easy, without bogging you down with a bunch of functionality that you don't need.

Beyond letting other people add their own WooCommerce products, you might find this method helpful even if you're the only one selling products.

For example, maybe you've hired an assistant to help with uploading new products. Rather than forcing your assistant to learn the WordPress backend, you can just have them work with a WooCommerce frontend add product form instead. Beyond being more user-friendly, this also helps keep things secure as you don't need to worry about which backend capabilities the user has.

What you'll need to follow this tutorial

To create your WooCommerce frontend product submission form, you'll need two plugins:

  • Gravity Forms - this is the core form builder that you'll use to build the structure of your form.
  • Gravity Forms + Custom Post Types - by default, Gravity Forms' form-to-post functionality creates a standard WordPress post. This free plugin lets you change the post type to a WooCommerce product instead.

Then, you'll also learn how to use the WooCommerce Product Table plugin to display the products submitted through your add product form.

Get WooCommerce Product Table

We'll use WooCommerce Product Table to list the uploaded products in different ways. For example, you'll learn how to create a separate page for each vendor's products, or let shoppers filter products by a specific vendor:

Product list with filter

As such, we'll divide this tutorial into two parts.

First, we'll cover building the form and mapping it to a WC product. Then, we'll cover how to take those product submissions and display them to potential shoppers.

Part 1: Create your frontend product form with Gravity Forms

Ok, so you want to let users add WooCommerce product from the frontend - great plan! To get started, you'll need to create the actual form that people will use to add products on the frontend. To do that, go to Forms → Add New.

Step 1: Map form submissions to WooCommerce product

Unlike most WordPress form plugins, Gravity Forms has a neat feature that lets you automatically create a WP post whenever someone submits a form.

To map form submissions to a post, Gravity Forms includes a special set of Post Fields. By default, these post fields create a standard WordPress post. The Gravity Forms + Custom Post Types add-on plugins let you change that and map fields to a WooCommerce product, instead. That's what transforms Gravity Forms into a WooCommerce frontend product uploader.

To set up this mapping, add the Title field from the Post Fields area. Beyond letting users enter the name of the product, this Title field also includes some important configuration options:

add title field

Once you've added the field, click on it to edit it. Here's what you'll need to configure:

  1. Post Type - use the dropdown to select Products. If you can't see this, don't forget to install the free Gravity Forms + Custom Post Types plugin.
  2. Post Status - we recommend leaving this as "Draft" or choosing the "Pending Review" option. This ensures that you're able to moderate all the submitted products before they're publicly available at your store. Alternatively, you can also choose "Published" to make products live right away without admin approval.
  3. Default Post Author - WooCommerce products don't support authors by default, so this setting isn't relevant. We'll show you how to use a custom taxonomy to store vendor/author information later on.
  4. Post Category - you can select the default category here. You'll also be able to let submitters choose their own categories and tags, if required.
Configure title field

And that's it! You're part way there. Now, a user can submit the form and Gravity Forms will add a new product.

But...you still need to collect some more information, right? What about prices, pictures, categories...you get the idea.

Step 2: Add form fields for WooCommerce product information

Next up, you need to add form fields for all the product information. Exactly how you do this depends on what type of information you're collecting, so bear with us here! There are four different approaches for:

  • Featured image
  • Description
  • Basic product information like price, stock status, etc.
  • Taxonomies (categories, tags, custom taxonomies)

We'll go through each approach in detail.

How to add the product image

To add the featured product image, drag over the Post Image field. Then, edit the field and check the box for Set as Featured Image. This will let the form submitter upload an image that will be used as the Product featured image:

Featured image

How to add the product description

To add a field for the product long description, use the Body field from the Post Fields area. In the field settings, you'll want to configure the basic information to be the same as the information you added in Step 1:

Product description

If you want to also add a separate Product short description, you can use the Excerpt field from the Posts fields area.

How to add prices, stock status, etc.

To add basic product information like price and stock status, you'll use Gravity Forms' Custom Field field from the Posts Field area.

This is the trickiest field to add, but we'll try to simplify the process as much as possible.

When you drag over the Custom Field field, the first thing that you'll want to do is choose the Field Type. This type depends on what type of information you're adding with this field, but for most of the fields, you'll use a Number. For example:

  • Price - Number
  • Shipping weight - Number
  • Etc.
Add price

Then, under the Custom Field Name, choose New (you're not really creating a new field - but Gravity Forms doesn't let you select most WooCommerce fields from the existing drop-down).

In the text box underneath, you need to enter the custom field ID. Here are the field IDs for the most relevant fields:

  • Price - _regular_price
  • Shipping weight - _weight

It should look something like this:

Configure price field

You might also want to add some other restrictions, like a minimum and maximum range.

Then, repeat the process for as much information as you want to collect.

If you need to add other WooCommerce fields beyond price and stock status, a neat trick to find the field name is to use Chrome Developer tools on the edit product page and look at the label for ="FIELD NAME":

Find field name

You can also create your own WooCommerce custom fields to display on the product page.

How to let users choose a product category

Finally, let's cover how to work with taxonomies like categories or tags (or your own custom taxonomies - more on this later).

For product categories (or other hierarchical taxonomies), you can let users choose one or more of your existing categories. And for product tags, you can also let users add their own tags.

Let's cover categories first…

To let users select from your product categories, you can use one of these Standard Fields:

  • Drop-down - users will only be able to select a single category with this method.
  • Multi-select - users can select one or more categories using a multi-select box.
  • Checkboxes - users can select one or more categories using checkboxes.
  • Radio buttons- users will only be able to select a single category with this method.

You can choose whichever method works for you. No matter which one you choose, you'll first need to drag the relevant field over from the Standard Fields area.


  1. Edit the field
  2. Go to the Advanced tab
  3. Check the box for Populate with a taxonomy
  4. Select Product categories from the drop-down
Product category

For product tags (or other non-hierarchical taxonomies), you can use all the same field types. However, you also get a new option.

If desired, you can use a Single Line Text field. Then:

  1. Edit the field
  2. Go to the Advanced tab
  3. Check the box for Save To Taxonomy
  4. Select Product tags from the dropdown
  5. Check the box for Enable enhanced UI
Product tag

The benefit of using this approach for tags over checkboxes or a multi-select field is that people submitting products will be able to use that same "autosuggest" style box that you get in the back-end. Here's an example of what we mean:

Example of tag

Step 3: Configure other basic form settings

Phew - that was a lot! If you made it through, you can be happy to know that pretty much all the hard work is done now.

Next, you'll just want to go to the Settings and configure some things there. First, you'll want to consider these options in the Form Settings:

  • Button text - changing this to "Submit Product" or something more descriptive is good for UX.
  • Require user to be logged in - you can check this box so that only logged-in users can add new WooCommerce products from the frontend.
Change form settings

Beyond that, you also might want to configure the Confirmations and Notifications so that they're more relevant to creating a product. For example, you can receive an email whenever someone adds a product from the frontend in WooCommerce.

Putting it all together

Ok, so here's what the finished form looks like on the frontend of our site. We've filled it out with some basic information:

Example of WooCommerce Frontend Product Submission form

Now, when we submit that form, the product shows up as a draft when we go to the Products area in our dashboard:

New product

And if we edit that product, you can see that it also includes both the product description and the product image:

Product details

Protect your frontend add product form with a password

One way to restrict access to your form is to use Gravity Forms' feature that requires users to be logged in.

However, maybe you don't want to create user accounts for each person. Maybe you don't want all registered users to be able to add WooCommerce products from the frontend. If so, then you can easily password protect the form.

To do that, you can use WordPress' built-in password protection:

Password protect form page

People will need to enter the password before they can access the form.

Create a custom taxonomy for vendors to help organize products

If you want to:

  • Create a separate display area for each vendor
  • Let shoppers filter by each vendor

Then you'll need to create a custom taxonomy to associate a product with a vendor.

To do that, you can use the free Pods plugin to create a new custom taxonomy and associate it with your WooCommerce products - you can follow our Pods tutorial here to do that.

Then, you can add a field to your Gravity Forms form and populate it with information from your Vendors custom taxonomy, just like you did for your regular product categories. Here's what it should look like:

Add custom taxonomy for vendor

Then, form submitters can choose the vendor when they add a new product:

Populate with vendor taxonomy

Part 2: Display WooCommerce frontend product submissions to shoppers

In Part 1, you learned how to create a WooCommerce frontend add product form. Now, let's cover how to take those frontend product submissions and display them in a shopper-friendly way at your store.

To do that, you'll use the WooCommerce Product Table plugin. WooCommerce Product Table takes all or some of your products and displays them in a searchable, sortable, and filterable table anywhere on your site.

WooCommerce Product Table
The easy way to list your WooCommerce user-submitted products.

Step 1: Configure basic settings

Once you've installed and activated the plugin, you can configure its basic settings by going to WooCommerce → Settings → Products → Product tables:

WooCommerce product table settings

You can configure the settings according to your preferences, but you'll want to pay special attention to these settings:

  • Columns - this lets you control what information displays in your columns. For example, you could include the product short description, a column for price, etc. Learn more about columns options.
  • Add to cart column - this lets you control how the add to cart functionality works, including how product variations are displayed. Learn more about add to cart.
  • Table controls - these let you control filters, search boxes, etc. Depending on your implementation, you might want to use filters to let shoppers filter out products from specific vendors. Learn more about filters.

Step 2: Choose how/where to display tables

Once you've configured the basic settings, you'll want to decide exactly how and where you want to display the tables.

To display your tables, you'll use a shortcode.

You can either use the shortcode to display all products. Or, you can use the include/exclude rules to only display specific products. For example, you could filter out products from:

  • A specific category or tag
  • Your vendor custom taxonomy
  • Etc.

Learn about all the include/exclude rules

So where can you put that shortcode? Well, you have a few different options here. You can:

  • Create a single page and display all your products in one table
  • Create a single page and use multiple shortcodes with different include rules to create different sections on the page.
  • User separate pages and use the include rules to display different products on each page.
  • Add the table to your theme's category archive template to automatically use the product table layout on all category pages. Here's a tutorial for how to do that.

For example, here's what it looks like to create a separate page and populate it with only products from the "Barn2 Sports" vendor using the custom taxonomy term include rule:

WooCommerce product table settings

And here's what that looks like on the frontend:

Example of product list

Alternatively, you could also use one table for all vendors and use WooCommerce Product Table's filter options to let shoppers filter by the Vendor custom taxonomy like this:

Product list with filter

If desired, you could also display the vendor information as a column in your table, as well.

Bonus tip: Show extra information in a quick view lightbox

When you list products in a table layout, you can show information submitted by the user in the various columns.

WooCommerce Product Table Quick View Magnifying GlassIf you'd like to show more information than will neatly fit into the table, then you can add the WooCommerce Quick View Pro plugin. This handy plugin adds quick view buttons or links to the product table. Or if you're not listing your user-submitted products in a table, then you can also use quick view with the default WooCommerce shop and category pages.

Either way, customers can click on the quick view links to view extra product information in a lightbox. This can include the product image, short description, price, and add to cart column. The customer can view this information and add the product to the cart without having to visit a separate page for each product.

It's an excellent option if you want to keep your product tables clean and simple, while still providing extra information about each product.

Get Quick View

Can users add products in the frontend and then them?

WooCommerce frontend editor plugin

You might want users to be able to edit the products in the table after they go live in your store. There are 2 ways to do this:

  1. You can use WooCommerce Product Table with a frontend editor plugin and add an 'Edit' button above or below the table. Logged in users with the correct role can use this to access an editable spreadsheet, from which they can edit products without having to access the WordPress admin. If you just want users to edit their own products, then you can use the free User Role Editor plugin to edit the appropriate user role, adding the capability "edit products" and removing the capability "edit others products". (Read tutorial.)
  2. You can allow them to edit information about your products using a WordPress frontend editor plugin such as Editus. Logged in users with the correct privileges would click through to the single product page to make changes. This is because Editus makes the single product page editable, but not the product table.

Create your own WooCommerce frontend product submission form today!

By combining Gravity Forms, the Gravity Forms + Custom Post Types add-on, and WooCommerce Product Table, you can create your own WooCommerce frontend add product system that's perfectly suited to your needs.

Click below to get started with WooCommerce Product Table, and leave a comment if you have any further questions.

WooCommerce Product Table
The easier, more flexible way to list WooCommerce products.


  1. Gabriel
    September 21, 2021 Reply


    Very interesting post. I have a question. I want to build a course directory where people can upload their course information and pay a fee for every course they upload. Can this be achieved with the solution you are proposing here?
    I want them to be able to upload their course from the front end and pay the fee using Paypal or something like that.
    Thanks in advance!

    • Edge
      September 23, 2021 Reply

      Hi, Gabriel. While the solution shows you how you can allow vendors to add/create/upload products (I believe the course information would be virtual products in WooCommerce) via a form in the front-end, I'm not sure about whether charging the vendors for doing so is possible, as this would be a function of or handled by the multivendor plugin that you use (and how it interacts or integrates with WooCommerce and its payment gateways). That being said, for the best advice about that part of the solution, I suggest that you contact support of the multi-vendor plugin that you use. I hope this makes sense and helps point you in the right direction. Please let me know if you have any more questions. You can also enquire in more detail via our dedicated Support Center. Cheers!

  2. Loek van der Linden
    September 10, 2021 Reply

    I want to create a user input form using Gravity Forms.
    After that I want to create a product table using the mentioned plugin of Barn2.
    Now is my following situation. A product table of all the fields in the input form must be created, however a number of fields may not be visible for the users. All the fields, including the not visible fields must be available in the user mail sent after successful payment. Is this possible to achieve?
    Thx a lot for clarifyning!

    • Edge
      September 12, 2021 Reply

      Hi, Loek. You can choose which columns to display in the product table by using the columns option (for details see Product table columns).
      As for all the form fields being included/visible in the user notification email that is sent, you will need to check the Gravity Forms documentation or contact their support and ask them to kindly assist you with this.
      Please let me know if you have any more questions. You can also enquire in more detail via our dedicated Support Center. Thanks!

  3. Loek van der Linden
    August 26, 2021 Reply

    I want to make use of the Product table.
    I have some questions on the product submission form. I have a large number of users who must be able to perform product submission. No login or password protection.
    1. Where do I place the submission form? It must be accessible in the most easy way.
    2. Do the users need to login into Wordpress? If not what is the connection between the users and Woocommerce?

    Thx a lot for qualifying!

    • Edge
      August 27, 2021 Reply

      Hi, Loek. Thanks for your interest in WooCommerce Product Table!

      1. You can place the product submission form on any appropriate page on your site. The best place for it would of course be a page that you've added/created specifically for displaying it, such as a "submit new product" type of page.
      2. Step 3 of Part 1 above shows you that you can choose whether or not to Require user to be logged in in the Form Settings. If you don't enable this, then the submitted product will not be connected to the user who submitted it and be associated with the default author on your site instead, which is usually the admin. I suggest that you enable this option if you don't want anonymous submissions.

      Please let me know if you have any more questions. You can also enquire in more detail via our dedicated Support Center. Thanks!

Please share your thoughts...

Your email address will not be published.