Set up the WooCommerce Reports on the Frontend Dashboard

TEXT GUIDE

In this section, we’ll show you how to display the WooCommerce reports on the frontend.

We’ll do this with the WP Frontend Admin plugin.

We’ll include the WooCommerce reports page first on the dashboard because we want the users of our online store platform to see their store’s sales reports when they log-in to our front-end dashboard.

1- OPEN THE WP-ADMIN OF THE DASHBOARD SITE

All the pages of our front-end dashboard will be created on the dashboard site.

  1. Go to Network Admin > Sites.
  2. Open the dashboard site

2- CREATE A NEW PAGE TO DISPLAY THE WOOCOMMERCE REPORTS ON THE FRONTEND

Once you’re using the wp-admin of the dashboard site, go to Pages and create a new page by clicking Add New.

To display the WooCommerce sales reports on the front-end dashboard, enter the page title, and then use the following shortcode in the page content.

[vg_display_admin_page page_url=”admin page URL”]

Between the quotations in the shortcode, enter the URL of the administration page you’ll display in the frontend. In this case, you need to enter the URL of the WooCommerce reports page.

After entering the reports page URL, click Preview to edit the page on the frontend.

woocommerce reports frontend

3- EDIT THE THEME SETTINGS TEMPORARILY

WP Frontend Admin displays the Quick Settings panel on the left side of the screen, but the left header menu from OceanWP covers it.

Therefore, you need to move the header from the left to the right side so that we can see the WP Frontend Admin’s Quick Settings panel. This is a temporary change that will be reverted later on in this course.

  1. Open the wp-admin of the dashboard site in another tab
  2. Go to wp-admin > Appearance > Customize.
  3. Go to Header > General.
  4. Scroll down and select Position: Right.
  5. Click Publish to apply this temporary change.

4- CONFIGURE THE PAGE WITH WP FRONTEND ADMIN

Once you move the header menu and reload the reports front-end page, you’ll see the Quick Settings panel from WP Frontend Admin to configure the page.

These are the options you’ll see on the Quick Settings panel:

  1. Page Title: Enter the page title in this field.
  2. URL Slug: Enter the page slug in this page
  3. Page Template: Default
  4. Add page to this menu: Select the Main Menu.

woocommerce reports on the frontend

After selecting the page title, slug, template, and menu, you need to hide any unnecessary elements. This is really useful to simplify the admin pages to show the elements users will really need and hide the ones that are non-essential.

To hide unnecessary elements:

  1. Click Hide Element.
  2. Click the element you want to hide, repeat for every element
  3. Optional. If for any reason you hide any element you didn’t want to hide, you can revert the changes by clicking Show all elements below the Hide Element button.

This is a very handy feature to easily simplify any page, form, or feature for your users.

After hiding all unnecessary elements, you can edit the admin page texts.

WP Frontend Admin provides this editor where you can change any text live. This is great because you can add explanations for your users, change the input field texts, remove the branding of other plugins live, change references to WooCommerce with your own brand, etc:

  1. Click Edit Texts.
  2. Change the texts you want. Editable texts are highlighted in yellow.
  3. Click Stop editing texts.

woocommerce reports on the frontend

You’ll also see these fields:

  • Hide notices added by other plugins or themes: You can tick this checkbox so users don’t see notices by plugins or themes on their dashboard.
  • This page is available for these WP Ultimo plans: You can select the plans for which the page will be available. This is useful if you want to restrict a dashboard page/feature to a specific plan
  • The users should see the posts created by them only: When you’re creating posts or products pages, for example, you can automatically show only the posts or products created by the current users.

Finally, click Save to publish the sales reports page.

woocommerce reports on the frontend

5- OPTIONAL. SET THE REPORTS PAGE AS HOMEPAGE FOR THE FRONT-END DASHBOARD

Once the page has been published, you can set it as homepage, so the users see the reports first when they log-in to their dashboard. This way, they will always be up to date about their sales, stock, etc.

  1. Go to Appearance > Customize > Homepage Settings
  2. Your homepage displays: A static page
  3. Homepage: Reports
  4. Click Publish.

NOW YOU’VE DISPLAYED THE WOOCOMMERCE REPORTS ON THE FRONTEND

This is how you can configure the WooCommerce sales reports page to display it as a homepage on the front-end dashboard of your online store platform.

This is how the page will look on the dashboard when users access their own sites: