You can use CRED forms to create new or edit existing WooCommerce products directly from the front-end. Using the Toolset Access plugin, you can control which group of users will access these forms.

Here’s an example front-end form for adding products that you can build using Toolset CRED.

Form on the front-end for creating a new product
Form on the front-end for creating a new product

The newly-created product, in the WordPress back-end
The newly-created product, in the WordPress back-end

What kinds of Products you can add with CRED

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

 

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

Which product fields you can use in CRED forms

You can use almost all product fields in CRED forms; the same fields are available when you add a new product from the WordPress backend.

Some of these fields are available in CRED forms out of the box, while others require extra registration to appear in the CRED GUI.

The table below summarizes the details.

Table 1: Which product fields you can use in CRED forms

WooCommerce Product field Can be used in CRED forms Registration required
(see the next section for how to register fields)
Additional notes
Product name Yes No
Product description Yes No
Product Short Description
(Post excerpt)
Yes No
Product categories Yes No
Product tags Yes No
Product image
(feature image)
Yes No
Product Gallery No* (see additional notes) Yes Product Gallery needs to be handled using custom PHP coding. If you need a non-code solution, add product images using custom fields defined in Types.
Downloadable Yes* (see additional notes) Yes Downloadable products need to be saved using a CRED hook. See the Front-end forms for downloadable products section for details.
General fields
Regular price Yes Yes
Sale price Yes Yes
Sale price dates Yes Yes
Inventory
Sale price dates Yes Yes
SKU Yes Yes
Manage stock Yes Yes
Stock status Yes Yes
Sold individually Yes Yes
Shipping
Weight Yes Yes
Dimensions Yes Yes
Shipping class Yes Yes
Attributes Yes No There are known issues – CRED allows you to add new attributes from the front-end but the attributes are not saving in the database. Until the issue is resolved using Attributes in CRED forms is not recommended
Advanced Yes Yes
Purchase note Yes Yes
Menu order Yes Yes
Enable reviews Yes No
Any custom fields added with the Types plugin Yes No

 

hint
In addition, your front-end form for adding/editing WooCommerce products can include any custom fields and taxonomies you have added using the Toolset Types plugin.

Letting CRED use additional WooCommerce Fields

CRED forms can also include additional WooCommerce Fields, such as the regular price, sale price, SKU, etc.

However, these fields will not appear automatically when you create a new form with CRED because CRED doesn’t know what kind of fields they are.

To make them available in CRED forms for adding/editing Products, you first need to “register” them using the Manage non-Toolset Post Fields with CRED screen:

Additional WooCommerce fields need to be registered explicitly to be available in CRED forms
Additional WooCommerce fields need to be registered explicitly to be available in CRED forms

To make additional product fields appear in CRED forms follow these steps:

  1. Go to Toolset -> Post Forms.
  2. Scroll down to the Manage non-Toolset Post Fields with CRED section, and click Manage non-Toolset Post Fields.
  3. In the Post Type dropdown select Products, check Show Hidden Fields, and click Apply. Additional WooCommerce Fields should appear (see the screenshot above). Hint: If you cannot see any product fields, add at least one WooCommerce product from the back-end and visit the screen again. The fields should appear.
  4. Locate the field you want to add, and click Add to register it.
  5. In the pop-up that opens select the type of field, and fill out the additional inputs if needed. Check the documentation page to see the purpose of each field.

    Making the regular price field available in a CRED form
    Making the regular price field available in a CRED form

Use the following mapping table to register a field with the correct type and default values.

Table 2: How to map WooCommerce field to CRED fields

 Download limit_download_limitNumeric

Tab Field in WooCommerce GUI Field in CRED Manage non-Toolset Post Fields screen Toolset type to choose in the Set Field Type pop-up
Virtual _virtual Checkbox

Value to store when Checked: yes

Downloadable _downloadable Checkbox

Value to store when Checked: yes

Downloadable files Require special treatment – check the Front-end forms for downloadable products section for details
Download expiry _download_expiry Numeric
Download type _download_type Radio

Label: Standard Product, Value: (leave empty)

Label: Application, Value: application

Label: Music, Value: music

General Regular price _regular_price Numeric
Sale price _sale_price Numeric
Sale price dates _sale_price_dates_from, _sale_price_dates_to Date field
Inventory SKU _sku Single line
Manage stock _manage_stock Checkbox

Value to store when Checked: yes

Stock status _stock_status Radio

Label: In stock, Value: instock

Label: Out of stock, Value: outofstock

 

Stock quantity _stock Numeric
Allow backorder _backorders Radio

Label: Do not allow; Value: no

Label: Allow but notify customer; Value: notify

Label: Allow, Value; yes

 

Sold individually _sold_individually Checkbox

Value to store when Checked: yes

Shipping weight _weight Numeric
Dimensions length _length Numeric
Dimensions height _height Numeric
Dimensions height _height Numeric
Advanced Purchase note _purchase_note Single line or Multiple lines
Other fields
_visibility Single line – default value: visible

 

Once your additional WooCommerce fields have been added to the Manage non-Toolset Post Fields with CRED screen, you will be able to insert them into your CRED forms. They will appear in the Custom Fields section:

Once additional product fields are registered, they will appear in the Custom Fields section.
Once additional product fields are registered, they will appear in the Custom Fields section.

hint
If you used the “Include this field in Scaffold” option when registering a field, the field will also be added automatically to you CRED content when you use the Auto-Generate Form feature.

Creating a front-end form for adding products

Now, when all the additional WooCommerce fields you need are available in CRED, you can create your front-end form.

Below we cover the high-level steps for creating a front-end form for adding new products.
Visit the tutorial to see a detailed example.

    1. Go to Toolset -> Post Forms.
    2. Add a new Post Form.

Building the form - setting section
Building the form – setting section

        1. Fill out the Setting section as shown in the picture.
          Hint: We recommend choosing the “Pending review” or “Draft” for the Status field (see option 3 on the screenshot) so that the admin can manually approve the product on the back-end.When a product is updated/published on the WordPress back-end, WooCommerce will automatically set and calculate some additional fields such as the product visibility (_visibility: visible) and the price (_price) field. The price field value is calculated based on the values set in the regular price (_regular_price) and sale price (_sale_price) fields but also on sale dates (_sale_price_dates_from and _sale_price_dates_to) if provided.

Building the form - content section
Building the form – content section

        1. Build your form content, and use the additional field(s) you added – you will find these fields under Add Post Fields -> Custom Fields.
        2. Save your form, and add it to a page.
        3. Add a new WooCommerce product from the front-end to test it.

Recommended enhancements

hint

Set up CRED notifications to notify the site’s admin/owner whenever a new product is added.
Use the Toolset Access plugin to set up which users will be able to add/edit products from the front-end.

Front-end forms for downloadable products

Adding simple downloadable products (with one downloadable file per product) with CRED forms is also possible.

Due to the way WooCommerce stores downloadable files (as serialized data), we will need to use a few lines of PHP code to save our downloadable file in the database.

Here’s are the steps to follow:

        1. Register the _downloadable WooCommerce field to be available for CRED forms:
          1. Go to Toolset -> Post Forms.
          2. Click Manage non-Toolset Post Fields.
          3. In the Post Type dropdown select Products, check Show Hidden Fields, and click Apply.
          4. Locate the _downloadable field, and click Add
          5. Choose the Checkbox as the field type
          6. In the Value to store when checked, input field type yes.
        2. Create a Post Form for adding new Products.
        3. Add the following fields to your Form Content:
          1. The _downloadable field you have registered in step 1 – you will find it under Add Post Fields -> Custom Fields.
          2. file_name – the downloadable file name. Add it as a generic text field (use the single line type).
          3. tmp_file – the downloadable file. Add it as a generic field with the file type.

          Hint: Use the CRED conditional group feature to make the file name and URL fields appear only if the downloadable input field is checked.

          Your form’s content should look like this screenshot:

          CRED Form for adding downloadable products - the downloadable fields have been highlighted.
          CRED Form for adding downloadable products – the downloadable fields have been highlighted.
        4. Save your form, and add it to a page.If you submit the form now, your product will be added, but your downloadable file won’t be saved along with your product. That’s because we added the product file name and the file as generic fields, which are not saved in the database.To save values passed in generic fields, we will use the cred_submit_complete hook and the WordPress add_post_meta function. Add the following code to the functions.php file of your theme:
          Save downloadable products
          add_action('cred_submit_complete', 'prefix_cred_submit_complete_action', 10, 2);
          
          //Use CRED to set a downloadable product in WooCommerce
          
          function prefix_cred_submit_complete_action( $post_id, $form_data ) {
          
          	
          	//perform the following only for downloadable products
          	if (isset($_POST['_downloadable']) and $_POST['_downloadable'] == 'yes') { 
          		$file_name = '';
          		$file_url = '';
          		
          		//save the file only if both the file name and the file have been provided
          		if (isset($_POST['file_name'])) {
          			$file_name = $_POST['file_name'];
          		
          			if (isset($_POST['tmp_file'])) {
             				$file_url = $_POST['tmp_file'];
          				$file_hash = md5_file($file_url);
          		
             				$downloadable_files = array(
              				$file_hash => array(
               					'name' => $file_name,
          	     				'file' => $file_url
              				)
             				);
             
          			add_post_meta($post_id, '_downloadable_files', $downloadable_files, true); //save the serialised data
          			
            			}
            		}
             
           	 }
          
          }

Now if you add a new product from the front-end, the file you upload will be saved along with your product.