The Edit Product Form widget enables users to edit existing products from the frontend of a WordPress website, without needing to interact with the WordPress dashboard.
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.
By adding the widget to a Single Product Template in Elementor we are able to have it appear automatically on all product pages. This will display a form to allow your users to edit the product currently being viewed.
Adding the Widget
If you don’t already have a template for your products, you need to create one. To create a new template click Add New under Templates in the WordPress dashboard. Choose Single Product to create a template for your products.
You can choose to insert an existing template to edit or start from scratch. You can learn more about templates in Elementor’s official tutorial.
Navigate to the template’s edit page by clicking Edit with Elementor, and drag in the Product Edit Form widget. This can be found in the Frontend Forms section or by searching for the “Product Edit Form” widget.
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.
The Form Title is the title for the entire form. By default it will be called “Edit Product”, but it can be left blank if you wish.
By default, the form will have the Product Type, 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.
At the very bottom we can edit the text displayed on the Submit button. By default is says “Update”.
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
As mentioned above, there are many options which are unique to a specific field type. We will cover some of the options for the different fields here. There will be more articles going in depth to each field’s options.
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. We also have dedicated guides explaining how to use the form to create other kinds of products, like variable products, external/affiliate products, and grouped products. (add links) If you would like the edit form to prevent users from changing the product type then the Product Type field can be removed or hidden.
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.
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.
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.
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.
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.
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.
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.
This is the current stock quantity. As customers make purchases WooCommerce will update this value automatically.
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 product itself), but you can also change it to a custom URL or the referrer.
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 product being edited by the form.
By default the product will be republished immediately, or you can set it to Pending Review if you would like to approve it before it reappears 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.
Users who cannot see the form will see the normal product page as if the form did not exist at all.
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.
Here we can see how a product page looks after adding the form and enabling the Show in Modal option.
Here is how it looks after clicking the button:
And here is how it looks to a user/visitor who doesn’t have the permissions to see the form: