How to Create a Frontend Dashboard for WooCommerce

In this post, we want to show you how to create a frontend dashboard for WooCommerce stores. You can integrate this dashboard with plugins like WP Ultimo to create a multisite network for your customers to create their own WooCommerce stores.

In addition to the WooCommerce plugin, you need to install the WP Frontend Admin plugin, which allows you to display any wp-admin page in the frontend. You can create frontend dashboards, web apps, post submission platforms, etc.

As an example, we will show you how to display the WooCommerce product list in the frontend, and then you can follow the same steps to display all WooCommerce pages in the frontend and complete the dashboard. After installing the plugin, you need to follow these simple steps to create the frontend dashboard pages:

(If you are using a multisite network, you can create a frontend dashboard site and create the dashboard pages on it).

Step 1. Create a new page

You need to create a new page on the dashboard site; this page will display the backend content on the frontend with a simple shortcode.

• Go to Pages > Add New.

Then, you need to enter the title of the page, and enter the following shortcode in the page content:

[vg_display_admin_page page_url="wp-admin URL"]

You just need to enter the URL of the WooCommerce product list between the quotes in the shortcode. For example:

[vg_display_admin_page page_url="edit.php?post_type=product"]

After that, click Preview to see the admin content in the frontend and configure the frontend page.

Step 2. Configure the frontend WooCommerce page

Once you can see the admin content on the frontend, you can start configuring your page live using the Quick Settings panel on the left side of your screen.

First, select the page’s basic information.

• Page title: Enter the page title here.
• URL Slug: Enter a URL slug containing keywords only
• Template: Select the same template for all the dashboard pages.
• Add page to this menu: The dashboard menu.

Second, hide any unnecessary elements.

WP Frontend Admin allows you to simplify your frontend WooCommerce pages by hiding any unnecessary elements:

1. Click Hide element.
2. Click the element you want to hide.
3. Repeat this with every element you want to remove from the frontend page.
4. Optional. Tick the Hide notices added by other plugins or themes.

Third, edit any of your WooCommerce frontend page’s texts.

You can customize the page much more and add references to your own platform:

• Click Edit texts.
• Edit all the texts you want.
• Click Stop editing texts.

Fourth, disable any unnecessary columns and save.

If this is a page that lists products, orders, customers, etc., you can disable any unnecessary columns by ticking them in the Disabled columns section in the Quick Settings panel.

You can also activate the option that will show only the user’s own products, or deactivate it to show the products of other users of the same site.

Finally, you can Save the changes to publish the page.

Note: You can also open the Add New form and hide all fields and metaboxes that are not essential to create products. These same settings will apply to the Edit Product form.

This is what the WooCommerce product page looks like on the frontend.

And this is what the create new products page looks like on the frontend.

Step 3. Continue creating your dashboard using the same steps

If you apply the same steps to the other WooCommerce pages, you can create your frontend dashboard quickly.

Here is the list of shortcodes you will need to display each of the WooCommerce pages on the frontend:

WooCommerce Products List

[vg_display_admin_page page_url="edit.php?post_type=product"]

Add New WooCommerce Product

[vg_display_admin_page page_url="post-new.php?post_type=product"]

WooCommerce Categories

[vg_display_admin_page page_url="edit-tags.php?taxonomy=product_cat&post_type=product"]

WooCommerce Tags

[vg_display_admin_page page_url="edit-tags.php?taxonomy=product_cat&post_type=product"]

WooCommerce Attributes

[vg_display_admin_page page_url="edit.php?post_type=product&page=product_attributes"]

WooCommerce Orders

[vg_display_admin_page page_url="edit.php?post_type=shop_order"]

WooCommerce Customers

[vg_display_admin_page page_url="admin.php?page=wc-admin&path=%2Fcustomers"]

WooCommerce Reports

[vg_display_admin_page page_url="admin.php?page=wc-reports"]

WooCommerce Settings

[vg_display_admin_page page_url="admin.php?page=wc-settings"]

WooCommerce Status Section

[vg_display_admin_page page_url="admin.php?page=wc-status"]

Free Course: How to Create a Platform Like Shopify Using WooCommerce Behind the Scenes

We have created a complete free course in which you will learn how to create a platform similar to shopify, in which your users can register by paying a membership in your multisite network. After signing up, they will be able to create and manage WooCommerce stores using a frontend dashboard that we will show you how to create easily.

You can take the course by going to this link.

We also have a collection of beautiful templates for your frontend dashboard that will save you the effort of having to create a dashboard that looks professional and intuitive.

You can preview and download the templates.