The Edit Product Widget

The Edit Product Widget

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

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.

Overview

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.

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 “Edit Product”, but it can be left blank if you wish.

Default Fields
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.

Submit Button
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.

Product Type
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.

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.

Price
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.

Description
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.

Actions

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.

Product

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.

Permissions

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.

 

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. 

In the Style tab you can also define the width of the modal window itself and the content within, as well as the alignment.  

Note that these are only visible when the Show in Modal option is selected.

Final Result

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:

The Edit Product Widget

Still stuck? 
Contact our support team here.

Get the free plugin and receive updates