A customer’s navigating experience is a huge deal with business websites, even more so with eCommerce. If you are selling something on the web, every page click is an opportunity for the shopper to lose interest and bounce from your site.
Fine-tuning every element of the online shopping experience is critical for this reason.
Constant access to shopping cart details are one of those nice touches that makes the user experience more personal and gives faster access to the content that matters. “How much is the stuff in my cart, and where can I check out?”
Learn how to add shopping cart details to the top menu of your page either with WordPress code or using our Simple Shop Pro theme.
Code to add this cart functionality to WordPress
First, we are addressing WooCommerce as the eCommerce plugin of choice, because it is the most popular, is the one we have most experience with, and was recently acquired by WordPress.
There are two steps to adding the code to the website:
Step 1: Add the WordPress functionality
In your functions.php file in your WordPress child theme, you will want to paste in this code. The attached code will get you started with displaying cart functionality, though you may need to modify it slightly depending on how your website is set up:
Our code is developed to be used with WooCommerce and can also be used with the popular free Easy Digital Downloads plugin.
If you are trying to understand the development of this code, it performs two operations. The first operation it performs is to change the display of the WooCommerce cart page in a menu to display the number of items in the cart and the price.
The second operation takes the code provided and allows it to refresh (using AJAX requests) as items are added and removed from the shopping cart. This sort of live feedback allows for a simpler user experience.
Step 2: Display the cart details in a menu
Before you can display information from your cart, you will need a cart page. We have a good tutorial on setting up a WooCommerce website, and we will refer there for now.
With the functionality active, you now need to display it on your WordPress website. To do this is a very simple process. Navigate to Appearance > Menus from the WordPress backend. Go to the Pages dropdown on the left side of the menu screen and select the page that has been assigned as the WooCommerce menu page.
Wherever you place the Cart page in the menu, the display will show the amount of items and total price of the cart.
Our recommendation is to put the cart link your Top Menu or whatever menu navigation is at the top of your WordPress website.
The easy way to add shopping cart details
How do we understand how to do this? Our newest WordPress theme — Simple Shop Pro — has the feature built right in to the theme. No need to add code at all. All you need to do is set up the menu item for the cart page.
If you are not experienced with code or need a simpler solution to your eCommerce problem, using Simple Shop Pro as your WordPress theme is a simpler way to keep people attached to the page.
1 thought on “How to display shopping cart details on a WordPress menu”
Thanks a lot for this solution! The code didn’t work at first but then i changed “top_nav” with my theme’s menu location and it worked like a charm!