Admin Bar Icon New Order Count

I recently saw a question from Ashley in the WooCommerce Community Facebook about adding an Admin Bar icon to indicate New Orders. I thought that’s a great idea to have a shortcut right there at the top of the page. So here’s a small code snippet that does it:

<?php
/**
 * @snippet       Admin Bar Icon with New Order Count
 * @url           https://davejesch.com/snippets/admin-bar-icon-new-order-count/
 * @author        Dave Jesch
 * @date-written  May 9 2020
 * @testedwith    WooCommerce 4.0.1
 * @donate $5     https://davejesch.com/send-me-coffee/
 */
function d3j_ab_order_count( \WP_Admin_Bar $admin_bar )
{
	if ( ! current_user_can( 'edit_shop_orders' ) )
		return;
	if ( ! defined( 'WC_PLUGIN_FILE' ) )
		return;

	$order_count = get_transient( 'd3j_ab_order_count' );
	if ( FALSE === $order_count ) {
		$args = array(
			'status' => 'processing',
			'limit' => -1,
		);
		$orders = wc_get_orders( $args );
		$order_count = count( $orders );
		// 60 * 60 == 1 hour. if you want this to refresh faster, set
		// a nearer expiration time such as MINUTE_IN_SECONDS * 20
		set_transient( 'd3j_ab_order_count', $order_count, HOUR_IN_SECONDS );
	}

	$id = 'wc-new-order-count';
	$label = '<span class="ab-icon"></span><span class="ab-label" aria-hidden="true">';
	$label .= '<span class="count">' . $order_count . '</span>';
	if ( 0 === $order_count ) {
		$id = 'wc-new-order-count-0';
	}

	$admin_bar->add_menu( array(
		'id'			=> $id,
		'parent'		=> NULL,
		'group'			=> NULL,
		'title'			=> $label,
		'href'			=> esc_url( admin_url( '/edit.php?post_type=shop_order' ) ),
		'meta'			=> array(
			'title'		=> sprintf( __( '%1$d New Orders', 'text-domain' ), $order_count ),
		),
	) );
}
add_action( 'admin_bar_menu', 'd3j_ab_order_count', 100 );

function d3j_ab_order_count_css()
{
	echo '<style>
#wpadminbar #wp-admin-bar-wc-new-order-count {
	color: white;
	background-color: #ca4a1f;
	border-radius: 2px;
}
#wpadminbar #wp-admin-bar-wc-new-order-count .ab-icon:before,
#wpadminbar #wp-admin-bar-wc-new-order-count-0 .ab-icon:before {
	content: "\f174";
	top: 3px;
}
#wpadminbar #wp-admin-bar-wc-new-order-count-0 {
	background-color: rgb(35, 40, 45);
}
</style>';
}
add_action( 'admin_print_scripts', 'd3j_ab_order_count_css' );

The first thing the code does is ensure that the current user has access to viewing orders and that WooCommerce is installed. If either of these are not the case there is no need to continue.

Next, it uses a transient to store and retrieve the current number of orders in the “processing” state. A transient means that this potentially time consuming process is kept quick. The downside is that the number of orders doesn’t change until it’s refreshed. So processing orders or new incoming orders will not be updated. If this is an issue for you then you can either reduce the time for the transient (recommended) or remove the use of the transient. But this has the possibility of taking up more server resources.

Starting on line 30, the code sets up a couple of variables that are used to display the icon in the Admin Bar. The id= attribute for the icon is “wc-new-order-count” but if there are currently no orders in the “processing” state, this is changed to “wc-new-order-count-0”. This is so the background color for the icon can be red to help bring attention to it when there are orders waiting to be processed. If there are no orders waiting then the background color remains unchanged.

If you’d like to change the position of the icon and move it to the far right, you can do this by modifying the value for the ‘parent’ argument, like this:

	'parent' => 'top-secondary',				// placement on the right

Finally, on line 37 is the call to the Admin Bar class to add the icon to the Admin Bar. This is done with the add_menu() method. Here you will notice the href argument is set. This makes the icon in the Admin Bar link to your Orders page so you can view your current orders.

The second function’s purpose is only to add some CSS to the page so that the background color of the shopping cart icon can be styled. There’s no easy way to do this by using the WP_Admin_Bar class so this outputs it directly during the ‘admin_print_scripts’ hook.

I hope this piece of code is useful. Let me know if you like it and if it helps.