How 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 tutorial explains how to create a front-end form for adding new WooCommerce Products. After completing this tutorial, your front-end form should look like on the picture.

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

Front-end form for adding a WooCommerce Product - the outcome of this tutorial

Front-end form for adding a WooCommerce Product – the outcome of this tutorial

Requirements

You use the Toolset CRED plugin in this tutorial, which lets you create front-end forms for adding and editing posts of any type.

Visit our WooCommerce training site to follow the tutorial.

Step 1 – Creating a CRED Form for Adding Products

  1. Go to Toolset -> Dashboard.
  2. Click the Create form button to create a new form for Products
    Creating a CRED Form for Adding Products

    Creating a CRED Form for Adding Products

    The screen for creating a new CRED form for adding Products opens.

  3. Creating a new CRED form for adding Products

    Creating a new CRED form for adding Products

    In the Settings section, make the following changes:

    1. Set the Status of content created or edited by this form action to Pending Review. This way, the site’s admin can review the new product before it is published.
    2. Set the After visitors submit this form action to Display the post. This will enable a user to view how the newly added product is displayed in the front-end.
  4. Scroll down to the Content section. Here, you determine how your form will appear and which input field to be included.

    Because you created the form starting from the Toolset Dashboard for Products, CRED has already auto-generated the form including all the basic Product fields.

    For the time being, leave the form content as it is. You can customize it later.

  5. Save your post form

Step 2 – Adding a Product Form to a Page

You can add your form to a page to test it.

  1. Go to Pages -> Add new.
  2. Give your page a title; e.g. “Add a new product.”
  3. In the page body, click the CRED Forms button to include your form. In the pop-up that opens:
    1. Select the New Post radio button.
    2. Scroll down to the Select post form drop-down and select the form you created.
    3. Click Insert shortcode.

      Your CRED form for adding new WooCommerce Products will be inserted as a shortcode.

  4. Save your page and view it.

Your form should look like this:

Your form

Your form

Go ahead and add some products to test your form.

Step 3 – Customizing Your Product Form

Now you can customize the form to serve your need. We do not need all the taxonomies added by default and we do need the product regular price.

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 regular price.

Removing the Default Taxonomy List

  1. Go to Toolset-> Post Forms, locate your form, and open it for editing.
  2. Go to the Content section.
  3. Remove the entire blog for adding taxonomies. Remove everything between the
    <div class="cred-group cred-group-taxonomies"></div>

    HTML tags, including these tags.

  4. 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. You should see the following shortcode added:
    [cred_field filed='product_cat' display='checkbox']

    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:

    [cred_field field='product_cat' display='select' single_select='true']
  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 CRED GUI; this is an additional WooCommerce field that is not available for CRED 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 CRED section, then click Manage non-Toolset Post Fields.
  3. In the Post Type drop-down, select Products, check Show 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 CRED forms

    Registering the _regular_price field to make it available in CRED 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.

Front-end form for adding the WooCommerce Product price field

Front-end form for adding the WooCommerce Product price field

Beyond the Basics

  • Use CRED notifications to send an email to the site’s owner/admin whenever a new product is added.
  • You can include the sale price in your form and make the schedule dates appear conditionally – but only when the Schedule field is checked. Use the CRED Conditional Group feature.
  • You can include any custom fields and taxonomies in your forms.
  • You can create custom roles for product editors and grant them relevant privileges using the Toolset Access plugin.
  • Your product editors do not need to access WordPress admin. Use the Toolset Views plugin to create a fully customized front-end login form and a custom “My Account” page that lists all the products added by the currently logged-in user.

Other parts in this series

You’ve been following one part of our tutorials on customizing WooCommerce sites.

There’s a lot more in the other parts of this series. Together, the different tutorial parts will teach you how to build fully-customized , advanced WooCommerce sites.

A fully-styled reference site

Planning to build custom WooCommerce sites yourself? Check out our Toolset WooCommerce reference site. It’s a fully featured, fully designed reference site, that you can use as the basis of your client projects.

YYou can use the same technique to create different archives for other archives, including product categories - see Live example

eCommerce site built with Toolset