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.
After completing this tutorial, your front-end form should look like the screenshot. We chose a simple form, but you can create more advanced forms using additional WooCommerce fields. Please refer to the documentation for details.
Step 1: Creating a page for a product form
In your training site:
- Add a new page, and give it a name, e.g., “Add a new product.”
- Click Save draft.
- Click the Content Layout Editor button to begin designing the body of your page with the Layout Editor.
Step 2: Creating a front-end form for product submission
- In your layout, draw a six-column cell.
- On the screen that opens, locate the CRED Post Form cell and insert it.
The CRED cell lets you create front-end forms for adding posts of any type, including Products.
On the next screen:
- Make sure that the “Create a new CRED Post Form” option is selected.
- Make sure that the Create content value is selected in the This form will: dropdown.
- Choose Products in the “Content type.”
- Create the cell.
The Edit CRED Post Form screen opens. Here, you set up your CRED form.
- Give your form a name, e.g., “Form for adding new products.”
- Expand the Settings section.
- In the Status of content created or edited by this form: field, choose Pending Review.
- 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.
- Scroll down to the Content section.
- 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.
- Press Save and Close this form and return to the layout.
- Click Preview to check how your form looks so far.
It should look like the screenshot. Feel free to add some products to test your form.
Step 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
- Click on your CRED form cell to open it for editing.
- Go to the Content section.
- Go to the Content section.
- Remove the entire blog for adding taxonomies. Remove everything between class=”cred-group cred-group-taxonomies div tags (including these tags)
- 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.
- In your form editor, position the cursor where you want your product category list to appear.
- Click Add Post Fields.
- 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
- 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
- Go to Toolset -> Post Forms.
- Scroll down to the Manage non-Toolset Post Fields with CRED section, then click Manage non-Toolset Post Fields.
- In the Post Type drop-down, select Products, check Show Hidden Fields, then click Apply. Additional WooCommerce Fields will appear.
- Locate the _regular_price field and click Add to register it.
- In the pop-up that opens, select Numeric and check Required and Validate Format.
Now, when the price field is registered, you can insert it into your form.
Inserting the Product Price Field in Your Form
- Go to Toolset -> Post Forms and open your form again.
- Scroll down to the form Content.
- Position the cursor where you want your price field to appear.
- Click Add Post Fields -> Custom Fields, and then select the _regular_price field.
- Using HTML, precede your product field with a label.
- 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.