Processing Shortcodes in Menu Items

Posted by on

Blog header image

In the first of a series of blog posts detailing the new “Replacements” functionality in Max Mega Menu Pro we’ll look at how to process shortcodes in menu items.

The ability to process shortcodes in menu items opens up the possibility to display dynamic information directly in your menu. Some examples might include:

  • Creating a menu item with a greeting of “Hello Guest” or “Hello [username]”
  • Including a WooCommerce Cart total
  • Outputting a search form in the top level of the menu
  • A countdown to an event

A real world example

To demonstrate how quickly and easily we can implement this functionality, I’ll run through the steps required to add an Easy Digital Downloads (EDD) cart quantity to your menu.


Step 1: Creating the [[edd_cart_quantity]] shortcode

A shortcode for displaying the cart quantity is not included within EDD itself, but it’s quite straight forward to create our own:

The  [edd_cart_quantity]  shortcode can be placed on any post or page to display current number of items in the users cart.

Step 2: Add a new menu item to display the cart quantity

We’ll need to add a new menu item to our menu in order to display the cart quantity. I’ve added a “Checkout” page link to the menu (renamed to “Cart”) and assigned a cart icon.

Here’s how it looks so far:


Step 3: Replace “Cart” with “Cart (n)”

Using the Replacements tab within the Mega Menu settings, I’ve selected “HTML” as the replacement type.

We want to replace the text part of the link (just the bit that says “Checkout”) but keep the existing link and the icon, so I’ve selected “Replace the menu item text” as the mode.

In the HTML area I’ve added the edd_cart_quantity  shortcode surrounded by a <span> (as detailed in the EDD documentation for displaying a cart quantity in a template).


End Result

After clicking “Save Changes” our menu item now dynamically displays the total number of items in the users shopping cart:


I hope you like the new functionality. How will you be using the new Replacements functionality? Let me know in the comments!

In the next post we’ll look at using the Replacements functionality to add a Logo to your menu. Stay tuned… 🙂

– Tom

Recent Posts