Sometimes it’s the simple changes and tweaks that you make to a website that really improve the usability. One change that we made was to add a menu cart to the header.
Ours is a simple one, it just shows the price and quantity in the cart, but it shows everywhere throughout our site and provides a nice quick and simple method for people to get back to the cart page without us needing to include a sidebar widget everywhere.
This guide will show you how you can also add a simple menu cart to the main menu in your WooCommerce store, just like ours.
It’s a simple change that will greatly improve the user experience of customers on your site.
What you need:
- A WooCommerce store
- WooCommerce Menu Cart plugin by Jeremiah Prummer, Ewout Fernhout
- A configured menu
Step #1: Install & activate WooCommerce Menu Cart
I stumbled upon this plugin one day while searching for an easy method to insert a menu item that included cart details. I also wanted a solution that hid the menu item if nothing was in the cart yet as there is no point showing it unless there’s something there for them to go ahead and purchase.
WooCommerce Menu Cart is a free plugin that does exactly those things.
There’s also a Premium version which adds some other features like flyout menus and additional icons and a few other features but this isn’t required for this guide today.
Step #2: Configure the menu cart settings
Here’s where we get into the flexibility of the plugin.
I mentioned previously that I wanted our menu item to hide itself if there was nothing in the cart. I also wanted to show some brief details about the cart status (the subtotal in our case).
You can choose to use it the same way as us or you can tweak it suit your site.
On more traditional e-commerce site with more physical goods you may want the menu item to show all the time, even if there’s nothing there. It’s up to you.
At a minimum all you need to configure on this screen is what menu to attach the cart menu item to. In my case, we have a single main menu, so that was the one I chose.
Step #3: Test the front end
As always when you’re messing around with user facing changes, I highly recommend you test the new menu across multiple browsers.
Test the new menu on IE, Edge, Firefox, Safari and Chrome as that will cover most users.
But you might also want to ensure it looks good on mobile and tablet browsers as well as mobile can account for a significant chunk of your traffic and you wouldn’t want them seeing a broken menu.
I hope this guide helped you setup your simple menu cart!