Skip to content

Instantly share code, notes, and snippets.

@samueljseay
Created February 25, 2021 06:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save samueljseay/d811e1cfe205587190410590b036be38 to your computer and use it in GitHub Desktop.
Save samueljseay/d811e1cfe205587190410590b036be38 to your computer and use it in GitHub Desktop.
# Adding your own store management links

Adding your own store management links

In the new and improved WooCommerce home screen there are 2 points of extensibility for plugin developers that have recently had some attention. The first is the setup task list, allowing you to remind the user of tasks they need to complete and keeping track of their progress for them.

The second is the store management links section. Once the user has completed the setup tasks this will display for them. This section consolidates a list of useful quick navigation links that the user can use to find features of WooCommerce.

Discoverability can be hard for users so this can be a great place to bring attention to the features of your plugin and allow users to easily find their way to the key functionality your plugin provides.

Adding your own store management links is a simple process.

Add your own store management link

Before we start lets outline a couple of restrictions on this feature.

  1. Right now these links are designed to keep the user within WooCommerce, so it does not support external links.

  2. All the links you add will fall under a special category in the list called "Extensions", there is not currently any support for custom categories.

With those things in mind lets start.

Step 1 - Enqueue JavaScript

Adding a store management link will all be done in JavaScript, so the first step is enqueuing your script that will add the store management link. The most important thing here is ensuring that your script runs before the store management link section is rendered.

To ensure that your script runs before ours you'll need to enqueue it with a priority higher than 15. You'll also need to depend on wp-hooks to get access to addFilter.

Example:

admin_enqueue_script($script_name, $script_url, array('wp-hooks'), 10);

Step 2 - Install @wordpress/icons

To provide an icon of your choice for your store management link, you'll need to install @wordpress/icons in your JS project:

npm install @wordpress/icons --save

Step 3 - Add your filter

Your script will need to use addFilter to provide your custom link to the store management link section. And you'll need to import your icon of choice from @wordpress/icons. Here's an example:

import { megaphone } from '@wordpress/icons';
import { addFilter } from '@wordpress/hooks';

addFilter(
    'woocommerce_admin_homescreen_quicklinks',
	'my-extension',
	( quickLinks ) => {
		return [
            ...quickLinks,
            {
                title: 'My link',
                href: 'link/to/something',
                icon: megaphone,
            },
        ];
    }
);

Here's a screen shot using our new custom store management link:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment