Add Easy Digital Downloads Shopping Cart icon to Header Menu

This is how you can add a shopping cart icon to your header menu on your Easy Digital Downloads, WordPress website. This will also add a little number for the number of items (the shopping cart count).

You need to know the theme_location of your header menu. This is what is registered with register_nav_menus(). For example, on the Twenty Nineteen theme, the theme_location is called menu-1. On some themes, it is simply called header. You must replace header on line 4 with your own theme_location of your header menu.

This code goes in your functions.

PHP

// Add EDD cart icon and quantity to header menu
function isa_add_menu_items($items, $args) {

	if( $args->theme_location != 'header' ) {// @todo CHANGE header TO YOUR OWN THEME LOCATION
		return $items;
	}

	if (function_exists('edd_get_checkout_uri')) {

		// Add cart icon
		$items = $items . '<li id="cart-menu-item"><a class="dashicons-before dashicons-cart" href="' . edd_get_checkout_uri(). '"> </a></li>';
		if ( $qty = edd_get_cart_quantity() ) {

			$items = $items . '<span id="header-cart" class="edd-cart-quantity">' . edd_get_cart_quantity() . '</span>';			
		}
	}
	return $items;
}
add_filter('wp_nav_menu_items', 'isa_add_menu_items', 10, 2);

To make this work, you must load the WordPress dashicons stylesheet because this uses the shopping cart icon from WP dashicons. You can load the WordPress dashicons on the front end by adding this to your functions:

PHP

function isa_load_dashicons() {
	wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'isa_load_dashicons' );

In addition, you may need the following CSS styles to make it all good. You may have to modify the font-size, margins, and color to match your own site. You can add this CSS easily in your WP admin.

CSS

#cart-menu-item a {
    padding: 1em 0.25em 1em 1em;
}

#cart-menu-item a::before {
	font-size: 140%;
	display: inline-block;
	line-height: 1;
	margin-left: .2em;
	text-decoration: inherit;
	text-transform: none;
}

#header-cart {
    color: #7d7499;
    font-weight: bold;
    background: #ccc;
    border-radius: 10px;
    padding: 0px 6px;
}