List WooCommerce products in a table with front end editor

WooCommerce Product Table is perfect for creating a simple product list or quick order form. Keep reading to discover 2 easy ways to allow your users to edit the products in the table directly from the front end of your website, or from a user-friendly spreadsheet view. At the end, you'll know how to create the ultimate WooCommerce product front end editor.

Used alone, WooCommerce Product Table is a great way to list products. However, the table is for displaying public information which isn't editable from the front end.

We've previously told you how your users can submit products to your WooCommerce store and display them in a product table. Since then, lots of you have requested a way to allow your staff or customers to edit the products in the table from the front end, without having to access the WordPress admin. If you want to allow users to edit products from the table, then you need to follow this tutorial. We will show you how to create an editable frontend table for your WooCommerce store using either of these tools:

1. Setary is a user-friendly spreadsheet app for WooCommerce. It makes it easy for customers to update products and variations, either directly in the spreadsheet or by using bulk edit forms.
2. WP Sheet Editor is a WordPress plugin which allows WordPress users to edit the products in the table directly from the front end of your website.

Why do I need a WooCommerce front end editor?

Normally, you can only edit WooCommerce products via the WordPress back end. This involves visiting multiple product pages and can be time-consuming if you have lots of changes to make. A front end spreadsheet-style editor significantly speeds up your product and inventory management.

A WooCommerce product front end editor can help with many different scenarios. For example:

• Your employees might need to edit products, but you don't want to let them loose in the WordPress back end. Instead, keep it simple by providing a front end product editor that only a specific user role can access.
• If you're creating a WooCommerce multi-vendor marketplace then you can list each vendor's products in a different table or order form. You can then add a front end editor to allow your vendors to edit their own products without having to use the WordPress admin.
• Perhaps you allow users to upload their own products to your store. Add a WooCommerce front end editor so that each user can edit their own products, but not anyone else's.

Keep reading to learn how to use WooCommerce Product Table to create non-editable order forms so that customers can buy products more quickly. After that, I'll show you how to integrate a front end or spreadsheet-style editor to your store so that relevant people can edit products outside of the WordPress admin.

1. Create the product table

The first step is to list some or all of your products in a product table view. This is the view that your customers will see when they visit your store. Later, you'll learn how to add an 'Edit' button which will take logged in users to the WooCommerce product front end editor (depending on their role).

To set it up, get WooCommerce Product Table and follow the instructions in the 'Getting started' email.

The plugin knowledge base is hugely comprehensive. It includes instructions on everything you need, including which columns to include in the table, how to add filters to help people to find products more easily, how to display product variations, and more.

You can either create a table containing all your products, or you can create tables listing specific products (e.g. products from a specific brand or vendor only).

2. Install a front editor or spreadsheet plugin

For this section, you have a choice of 2 plugins to choose from:

1. Setary - the user-friendly spreadsheet app for WooCommerce. No WordPress logins required.
2. WP Sheet Editor - the WordPress plugin which adds a front end spreadsheet editor to your site, which is only accessible to certain user roles.

2a. The Setary bulk editing spreadsheet app

I love Setary because it's just so easy to set up. As you can see by how short the following instructions are, it's far easier to configure than WP Sheet Editor!

1. Choose a Setary plan and start your 7-day free trial.
2. Follow the onscreen prompts to install the Setary helper plugin on your WordPress site.
3. Next, the Setary app will open with all your products and variations listed in the spreadsheet.
4. Use the 'Columns' option to choose which columns to include.
   

   

5. Use the advanced filters and search box to select specific products to edit.
   

   

6. Select multiple products and use the 'Bulk Actions' button to apply quick bulk actions via a form.
   

   

7. You can also use the 'Views' option to save time by saving your favorite filter combinations for future access.

2b. WP Sheet Editor's frontend editor plugin

WP Sheet Editor is a collection of plugins that provide an easy-to-use front end table editor for any information that is stored in the WordPress database - including WooCommerce products. Their Universal Frontend Editor plugin creates a spreadsheet-style WooCommerce front end editor for the products in your table.

1. First, buy and install the plugin on your WordPress site.
2. In the WordPress admin, go to Frontend Sheet → All Spreadsheets:
   

   

3. Once there, click on Add New to create a new table editor for your WooCommerce products:
   

   

4. Now you need to enter the editor title. This title is private and is only used for identifying the editors in the backend. You may call it something like Manage Products.
   

   

5. Then, select the post type you want to edit with it. In this case, you need to select Products. Next, click Save changes:
   

   

6. After that, you'll see that the plugin will generate a shortcode - copy this for later.
7. Next, you need to decide which tools to include in the WooCommerce frontend editor. Think about what you want people to be able to edit from the front end, and only include tools they actually need. In the settings for your spreadsheet, select which tools to show on the Primary toolbar and the Secondary toolbar of the editor:
   

   

8. After selecting the tools that will appear on the toolbar, you need to select the columns you'll display on the spreadsheet-style inline product editor. The list of columns automatically detects all the fields that are available for your products. This includes fields added by other plugins, such as YITH WooCommerce subscriptions, Advanced Custom Fields, all the WooCommerce extensions, etc. So you can easily enable, disable, sort, or rename any field.
9. You can create multiple editors for different users based on their needs. For example, you might add one editor with full columns for shop managers, and a simple editor with fewer columns for employees. I generally recommend having the same columns in your public-facing product table and the front end editor. That way, users will see the information in the same format as they switch between the main product table and the spreadsheet editor views.
   

   

10. Once you're done configuring the frontend editor, click on Publish to finish.
11. Finally, we need to create a page and add the WooCommerce product front end editor to it. To do this, copy the shortcode from step 6, above. Now go to Pages → Add New to create a new page for the frontend editor:
    

    

12. Once here, just enter the page title (we'll call it Edit Products), paste the shortcode in the page content, and select a Full width page template (if your theme has one). Finally, click on Publish.

Note. If you have a marketplace with multiple vendors, the frontend editor integrates with Dokan, WooCommerce Frontend Manager, and WooCommerce Marketplace. The integration works like this:

• Vendors will view and edit products created by them only.
• The editor settings have the option to display a button inside the marketplace dashboard. This allows vendors to launch the inline spreadsheet editor from their own dashboards, as well as by using the other methods discussed in this tutorial.

Now, it's time to integrate the new frontend editor with the public-facing product table that you created in Step 1.

3. Add an 'Edit' link to the product table

In Step 1, we used WooCommerce Product Table to list products in a public-facing table view. In step 2, we set up either the Setary or WP Sheet Editor spreadsheet-style editors.

Now, we need to add an 'Edit' link so that people can get from the table view to the front end product editor.

To do this, we'll add a button titled Edit store above the product table so that users can log in to start editing products right there.

1. Go to the page where you used WooCommerce Product Table to add a product table, and add a new link or button. This should either link to the Setary app, or the page where you added the WP Sheet Editor shortcode.
   

   

2. Finally, Update the page to add the button to it.

Optional - Hide the 'Edit' link from normal customers

You might want everyone to be able to see the 'Edit' link, as it provides a simple way for guests to log into their account before editing the products in the table. Alternatively, you can hide it from public view so that only certain logged in users see it.

There are a few options for hiding the edit link:

• Instead of adding an 'Edit' link to the same page as your product table, you can give certain users a direct link to the page containing the frontend product editor.
• You can add the edit link to a more subtle location such as the footer.
• Or if you prefer, you can install the Advanced Access Manager plugin. This plugin comes with shortcodes which you can use to make the button visible to users with a specific role, and hidden from everyone else. This is a neat compromise because you can still add the Edit link above your product table, but only the appropriate people can see it.

4. Test out the WooCommerce product front end editor

After these steps, users will be able to see the Edit Store button above the product table.

And when they hit that button, they will be asked to log in to start editing the products. For Setary, they will have to log into the Setary app. For WP Front End editor, it will be your WordPress login page:

After they log in, users will be able to use the frontend editor:

5. Who can use the WooCommerce frontend editor?

Only logged in users with the correct permissions can see the WooCommerce frontend editor, so you don't need to worry about customers accidentally accessing it.

For Setary, you must be logged into the Setary app. You can give access to whichever of your colleagues and/or clients need to edit products. It doesn't matter whether or not they have WordPress admin logins.

For WP Sheet Editor, the WooCommerce products frontend editor is available only for logged-in users. Logged out users or guests will see a login form when they click the 'Edit' button. It uses the default permissions from WordPress, so the products can be edited by these roles:

• editor
• administrator
• shop manager
• any user role that has the "edit_products" capability

You can create new user roles with the free user role editor plugin and assign it with the "product" capabilities. This is helpful if you want to allow users to edit products without having permission for anything else.

Just want users to edit their own products?

If you've set up your site to allow users to upload their own products, then you might want them to be able to edit these products but not anyone else's. This isn't possible with Setary, so if you need this then you should use a different tool instead. Here are some options:

• WP Sheet Editor has an option to allow users to add new products to the table, as well as existing existing ones. If you use this to accept front end product submissions, then each user will automatically only be able to edit their own products in future.
• If you're using Dokan, WooCommerce Frontend Manager or WooCommerce Marketplace, then logged in product vendors can only view and edit their own products.
• If you're using Gravity Forms to allow front end product submissions, then you can use the free User Role Editor plugin to edit the appropriate user role, adding the capability "edit products" and removing the capability "edit others products".

Where to get the plugins

You'll need 2 plugins to list information in an interactive table with frontend editing capabilities:

1. WooCommerce Product Table - creates the product table that your public visitors will see.
2. Setary - add and edit products via a spreadsheet editor with bulk edit forms so that users with Setary access can edit the products in the table.
3. Universal Frontend Editor - creates a spreadsheet editor so that logged in users with the correct role can edit the products in the table.

Get the plugins today, and then follow this tutorial to set it all up!