WooCommerce Navigation: Best Practices for Integrating Third-Party Developer Extensions

Navigation Overview

We’ve recently introduced the WooCommerce Navigation, which enables store owners to easily access their most important store management features from a single, streamlined menu.

Adding to recently published technical guidance on how to integrate third-party developer extensions with the WooCommerce navigation, we’re excited to share more information on how developers can help store owners find and use your extension. 

When a store owner first sees the WooCommerce navigation, all extensions will appear in the Extensions section as a default. 

Through gentle UI guidance, store owners will discover they have the ability to “Favorite” an extension, thereby surfacing the item to the top-level navigation for faster access.

Settings

The exception to the above default are extension UIs that only contain Settings. The extensions that currently register in Settings will continue to be located in Settings – no registration required. This is important because it gives merchants the ability to find all of their Settings functionality in the same place.

Extensions with stand alone Settings pages that are not part of wc-settings are encouraged to register their settings page under the Settings menu item. Extensions registered in Settings cannot be favorited.

Multi-screen Extensions

If your extension has more than one screen, create a navigation “Category”. Keep in mind that store owners can only favorite at the category-level.

Naming Conventions

When supplying a title, be sure the name of your navigation item or category matches the extension name exactly. All your navigation items should have unique IDs. Duplicate IDs in the submenu will result in only the first item being shown.

Since all WooCommerce extensions are part of the WooCommerce navigation, omitting  WooCommerce in the extension name will help avoid menu item redundancy. For example: WooCommerce Subscriptions is shown as “Subscriptions.” 

Tabs

In the WooCommerce navigation, categories replace tabs. Take the Memberships extension, for example: What once was shown as multiple tabs becomes a Memberships category, with four items appearing vertically underneath when store owners click on the Memberships category. 

This allows the Memberships extension to be favorited by merchants.

Be sure to remove tabs once categories are created. This is to prevent duplicate navigation that would be very confusing for users. Note that you may also need to add a tab’s screen id to the woocommerce_screen_ids filter in order for Navigation to recognize the page.