The Add Product Widget

The Add Product Widget

Required plugins: Elementor (free), Advanced Custom Fields (free), and ACF Frontend Pro

The Add Product Form widget enables users to add new WooCommerce products from the frontend of a WordPress website, without needing to interact with the WordPress dashboard. The page to host the form is built in Elementor.

Important: By default a user needs to be logged in and carry the “administrator” role to access the form. This can be changed, however, in the Permissions settings of this widget.

Adding the Widget

Create a new page to host the form, then click “Edit with Elementor” to open the Elementor page builder. 

Search for “Add Product Form” in the sidebar, and drag the widget into the page. 
To learn more about using the Elementor page builder see Elementor’s official tutorial.

There are many different options in the menus. We will go through the most basic ones here. There will be further guides going more in depth through each section.

Form Fields

This section defines the fields which are shown within the form itself.  This is where you actually define what data the end user can access.

Form Title
The Form Title is the title for the entire form. By default it will be called “Add Product”, but it can be left blank if you wish.

Default Fields
By default, the form will have the Product Title, Price, and Main Image fields activated, with all three set to Required. These can be customized to whatever fits your needs.

Adding and Removing Fields
To add more fields simply click the Add Item button. The form on your page will change to reflect these new fields. Fields can also be deleted by clicking the X.

ACF Fields
You can add ACF fields by clicking Add Item and changing the field type to ACF Fields or ACF Fields Groups and then selecting the desired fields or groups.

Submit Button
At the very bottom we can edit the text displayed on the Submit button.

Basic Field Attributes

The Field Type defines the type of field being edited. Changing this will affect the other available options. 

All the field types have options which can be changed to customize both the content and the style of the field. 


  • Label – This is shown above the field’s text box. This can be toggled to be displayed or hidden according to your needs.
  • Instruction – This is shown in smaller text under the Label.
  • Required – Indicates if the field can be left blank.
  • Hidden – This will hide the field. It is useful if the field is being used with a default value. 
    Warning: do not hide a required field if it does not have a default value!
  • Disabled – This will prevent users from editing the field and will not send the data.

Field Specific Options

By default, the form will have the Product Title, Price, and Main Image fields activated, with all three set to Required. These can be customized to whatever fits your needs.

Product Types
WooCommerce supports multiple different product types, each with different relevant fields. For example, external/affiliate products have no inventory options, but have the unique External URL field. Here we will discuss the options for a simple product.

Product Title
The Product Title Field is a simple text box. We have the standard Label, Instruction, Required etc.

There is also an option for adding Placeholder text, indicating what type of content is expected from the user. Another extra option is to add text which is prepended or appended to the start or end of the Title.

The Price Field is a text box which only accepts numeric input. We have the standard Label, Instruction, Required etc.

Additionally, there is an option for adding a minimum or maximum price. If the user tries to input a price which is outside the range an error will be displayed and the form will not be submitted.

Sale Price
The Sale Price Field is for defining a price to display for when the product is on sale. It has all the same options as the Price field, with the only difference being it is not set to Required by default.

Main Image
This field is a button which allows the user to upload an image to be the thumbnail of the product. The standard Label, Instruction, Required etc are all here.

We also have the ability to change the text of the button itself. By default it is “Add Image”. If you have the pro version of ACF Frontend Forms, the size and color of the button can be further customized under the “Style” tab.

The description field is used to add a product description. This is a full text featured text field with support for advanced formatting such as headers, code snippets, quotes, and even inline images.

Short Description
Here you add a shorter description. This is a text area with no formatting. The content is displayed under the price and in searches. This is similar to the excerpt on a standard WordPress post.

Inventory Management

A simple product will display one of three options for its stock status, In Stock, Out of Stock, and On Backorder. We can also choose to track quantities, allow backorders and more. 

There are fields in the form which allow the user to configure these from the front end.

Stock Status

This field allows the user to manually set the stock status of the product, but the user will be responsible for keeping it updated and stock quantity will not be tracked.

Without this field all products created by the form will default to be In Stock.

Manage Stock

By enabling this option, we add the ability for WooCommerce to auto-manage inventory and automatically update the Stock Status to In Stock, Out of Stock or On Backorder. In the WooCommerce docs this is referred to as “stock management at product level”.

When this button is turned on, the Stock Status field will be hidden, and several new fields will be visible, assuming they have been added to the form. These are Stock Quantity, Allow Backorders, and Low Stock Threshold.

When building the form, each of these fields can be added independently, depending on what attributes you would like to be available to the user. However, to use any of these three fields the Manage Stock field must be added to the form and turned on.

Note that the conditional fields are only rendered in the front end of the web page. In the Elementor preview all fields will be visible.

Stock Quantity

This is the current stock quantity. As customers make purchases WooCommerce will update this value automatically.

Allow Backorders

This will allow customers to continue placing orders even when the stock quantity has reached zero or even below zero.

There are three options:

  • Do not allow – when the quantity reaches zero the product status will be Out of Stock and customers will be unable to place new orders.
  • Allow, but notify customers – This will allow customers to continue placing orders when the product quantity is zero or below, however the status shown on the product page will be updated to show “Available on Backorder”.
  • Allow – This will allow customers to continue placing orders when the product quantity is zero or below. The product will still appear to be In Stock.

Low Stock Threshold

When the product stock reaches this amount you will be notified by email. The email will be sent to the address specified in the Notification Recipients field in the Inventory Options of the WooCommerce backend. For more information, see the article in the WooCommerce documentation.


Here we have several options for additional actions to take place outside the form itself. 

You can define where the page should redirect to after submitting. By default it will reload the current page (i.e. the form itself). We can choose to redirect to the live product by selecting Post URL.

You can also define a custom success message, or choose no success message, whatever suits your needs.


Here we can define the Product Status for the new product created by the form. 

By default the product will be published immediately, or you can set it to Pending Review if you would like to approve it before it appears in the store. You can also choose Draft or Private if those would fit better.


This is where we limit which kinds of users can access the form. It is very important to configure this correctly, as otherwise your users might not be able to see the form at all!

By default, only administrators can see the form. If you want to allow other users to access it, you need to add them. You can choose Roles under the Select By Role option, or add specific users under the Select By User option.  If you would like the form to be visible to anyone choose the All Users option.

Display Options

Here you can customize display options across all the fields. This includes hiding all the field labels, hiding the red asterisk indicator for required fields, and moving the instructions to below the field instead of above.

Modal Window

This will hide the entire form in a button which then will pop open in a modal window when clicked.

The Add Product Widget

Still stuck? 
Contact our support team here.