WooCommerce Frontend Product Submission Guide: Step-By-Step

Published on: Updated: March 18, 2019

Want to add WooCommerce frontend product submission to your store? This is a feature where you or other people can create and submit products directly from the front end of the website. They never need to visit your WordPress admin dashboard.

Front end 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 front-end. 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 front-end 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 submit their own products 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 submit their own 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 front-end 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 front-end product form with Gravity Forms

To get started, you’ll need to create the actual form that people will use to add products on the front-end. 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 front end 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 create 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.

Then:

  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 submit new WooCommerce products.

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 set it up so that you get an email with the product details whenever someone submits a new product.

Putting It All Together

Ok, so here’s what the finished form looks like on the front-end 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, if you don’t want to create user accounts for each person or if you don’t want all registered users to be able to submit products, another option would be to 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.

GET THE PLUGIN

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 front-end:

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 edit products after submitting them?

Unfortunately, it’s not possible to use Gravity Forms to edit products after they have been uploaded to your WooCommerce store. Instead, you can allow them to edit information about you products using a WordPress front-end 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 essential because they can’t edit the products from within WooCommerce Product Table itself.

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.

GET THE PLUGIN

Filed under: WooCommerce Product Table ,