Engineering Spotlight

Alpha-Test The New Javascript-driven WooCommerce Interface: Dashboard, Activity Panel, and Reports

Today we’re excited to give you a glimpse into some javascript-powered changes on the way for WooCommerce in early 2019, including:

  1. New and improved reports
  2. Improved notification experience and improved store management tools
  3. A brand new dashboard

While it isn’t ready for use on production sites, we are developing the new interface publicly so our developer community can comment and contribute, and are starting to make certain features available as a feature plugin.

Read on for why we’re working on the new interface, when to expect public beta (and inclusion in core), and what to look forward to from the new and improved WooCommerce experience.

Ready to dive in? Test our feature plugin for a modern, javascript-driven WooCommerce experience.

The Journey Towards a Fresh Interface

Earlier this year, leveraging some of the power and potential of Gutenberg, we released a Product Block to make it easier to embed products within your WordPress site. It’s currently active on more than 40,000 sites with upwards of 100,000 downloads.

Whilst we plan the next blocks — for example, to help store builders to create landing and marketing pages more easily — we’ve also been working on a brand new interface enabled by the arrival of React in WordPress core.

  1. New and Improved WooCommerce Reports

Our first step was to overhaul the existing reports. The existing reports are cumbersome to use and significantly less valuable to users than they could be with internal usage data showed that very few merchants even look at their reports.

Because the reports haven’t been extended much by our extension developers (partly because we didn’t make that easy for you and partly because we haven’t provided the right components to make reports valuable to merchants) they were a simple starting point, too.

There are nine reports we’ll be working on to help merchants better understand their stores. And, we’ll be introducing a new report for product variations – one of the most requested improvements we’ve had for our core product.

The new reports will be a huge improvement on the existing reports, merchants will be able to:

  • Quickly filter data.
  • Compare date periods, finally.
  • Have easy access to the data points that matter.
  • Download reports in CSV format.
The new revenue report, available as of now.
  1. Your Brand New WooCommerce Dashboard

We’re building a new dashboard that will be the default landing page when you visit WooCommerce. Merchants will be able to see at a glance how their store is performing and control what they see, and the dashboard will be extendable by developers.

The new WooCommerce dashboard.

For the curious, wc-admin has been built using the new WordPress Core React components that were built as part of the Gutenberg project. Following the lead of Gutenberg, wc-admin aims to bring modern JavaScript patterns to WooCommerce in the same manner that Gutenberg has done for WordPress core.

For the dashboard, we’ll be using design patterns found in Gutenberg to allow merchants to add and remove blocks from their dashboard.

The new dashboard allows you to choose what’s important.
  1. An Improved Notification Experience

Finally, we’re working on what we’re calling the Activity Panel that provides merchants with new store management tools, no matter where they are in their store.

Merchants will be able to:

  • Fulfill orders.
  • Manage stock.
  • Manage inventory.
  • Manage store notifications.
Order fulfilment made easier from the Activity Panel.

With regards to notifications: Within the Activity Panel, we’re working on an Inbox where our merchants will have an improved user experience when dealing with notifications – a widespread WordPress problem we’re attempting to solve for WooCommerce merchants.

The new Inbox cleans up notifications so you only get what’s important.

There will be an API and new REST API endpoints for developers to add notifications from their extensions and, as with everything we take on, this will all be responsive.

How to Test The New WooCommerce Interface

We’d love our developer community to start putting the code through its paces. While you shouldn’t use the plugin on a production site, you can install it on a developer environment to see what we’ve created.

When you’re ready:

  1. Download the feature plugin
  2. Read the installation instructions. We’ve also started documenting the new project here.
  3. Report any issues or questions you might have on the public repository on Github.

What to look out for:

We’ve wrapped up the Revenue Report and Orders report – two new reports that will replace the existing Sales Report available in core. We’ve created a sample report so you can understand how you would create your own reports for your extensions or clients.

We have one block working that displays Top Selling Products in the new dashboard and the Activity Panel can be seen. We’re currently working on the APIs to power the Inbox that developers will be able to integrate with.

You’ll see wc-admin in action! We look forward to hearing what you think.

When to Expect Public Beta

The plugin is currently in alpha – meaning you shouldn’t use it on production sites – while we complete the feature set to take us to beta. At beta, we’ll be releasing the plugin on and for wider use amongst our community.

As of now, we expect beta to land early 2019 and aim to have the new features merged into core within Q1 of 2019.

We’re using a sprint system to build our plugin, and going forward you can expect a new post on this blog every two weeks with the latest developments of the plugin.

Have feedback for us? We’d love to hear your thoughts through comments or open an issue on the repository here.

12 replies on “Alpha-Test The New Javascript-driven WooCommerce Interface: Dashboard, Activity Panel, and Reports”

That sounds like good, yet “difficult” news. Good, because it looks like a good progress. Difficult, because I extended most of the existing reports, as well as the dashboard, adding filters and custom criteria, and I found that any UI built with React was a nightmare to extend (see the tax rates page, that had to be extended with a hack).

Before putting this in production, I reckon that it will be vital to prepare some detailed developer documentation, explaining how to extend the core reports, the dashboard, and how to create new reports. That information will be essential, to allow developers to get up to speed before the release.

In the meantime, well done. 🙂

Liked by 2 people

My main concern would be extending the existing reports. I need to be able to filter sales reports, for example by currency, and that involves adding an extra fields on the reporting UI. Currently, that can be done with some JavaScript and a few tricks, with React that can become significantly more complicated. Regardless, I will need to know how to do it.

Liked by 2 people

You’ll be able to extend the new reports in ways that won’t feel so hacky and we’ll be providing you with the right UX components. Keep on eye out for more documentation as it becomes available 🙂


What will the changes to the reporting system mean for extensions that add additional reports? Will those still work, or will they need changes?

Liked by 1 person

Any existing reports will need to be updated to use the new system. We’ll make sure it’s easy as possible for developers 🙂


I have started testing it and I am still confused that React js is used in the plugin so if we want to extend it like using theme function.php or want to change any text of tabs. So there are not any filters or actions so how to do it without touching the core files.


Comments are closed.