Add the WooCommerce Cart to your Header

In the WordPress community a lot of people find it difficult to understand how they should integrate WooCommerce with the WordPress Theme they are using.

And it is difficult, we hear ya!

This tutorial will show you how you can easily edit your theme to better integrate with WooCommerce by adding an instance of the WooCommerce cart in your Header Menu.

Use the WooCommerce Menu Cart plugin to add the WooCommerce Cart to your Header

WooCommerce Cart in your Header Menu using this WooCommerce Menu Cart plugin for WordPress

The WooCommerce Menu Cart plugin allows you to add the WooCommerce Cart to any menu in your WordPress Website.

You just install the plugin like you normally would any other plugin by logging into your WordPress Dashboard and navigating to Plugins > Add New and searching for WooCommerce Menu Cart and following the documentation here on the Plugin’s page in the WordPress Plugin Repository.

It works well and integrates with the default WooCommerce Plugin’s AJAX update cart, as shown below. Notice how in the animation we update the cart QTY for this product from 4 to 2 and it updates also in the Header up in the top right.


Tips for using this WooCommerce Menu Cart plugin

Tip 1: Add this to a menu in the Top Bar if you are using the Beaver Builder Theme.

On mobile devices, the Header Menu is hidden and you have to click the MENU or Hamburger icon (depending on your settings) to expand the menu. If you add your cart to your main menu, on mobile devices people will have to click to see their cart.

The Top Bar, however, DOES NOT collapse on mobile devices and is always visible.

This is what the home page looks like on larger devices. Notice how we have used the WooCommerce Menu Cart plugin in a menu within the Top Bar of the Beaver Builder Theme.

Below is one of our client websites where we added the WooCommerce Menu Cart plugin’s cart to a menu in the Top Bar. See how on mobile devices you can still see the cart – pretty cool, eh? And great for usability.

On smaller devices, the Top Bar in the Beaver Builder doesn’t collapse so the cart can always be seen.

Tip 2: Use a Fixed Header if you are adding the WooCommerce Menu Cart plugin to the Header so that it is always visible while scrolling

As you can see in the animation below, if you use a fixed header the WooCommerce cart will always be visible. How cool is that!

Great for converting browsers into buyers.


Wrapping it up

Sometimes it is a good idea to use themes from a theme marketplace like Theme Junkie or StudioPress because they are built to do something specifically and usually do it really well. For example, we sometimes use the themes from Theme Junkie to build our eCommerce shops and we use a theme from either of these for when a client needs a News style website.

But other times, if you really scale back user requirements, you’ll quickly realize that all you need is better integration of the WooCommerce buying process into your theme, especially your header.

This includes adding a cart that is visible at all times, adding login / logout and my accounts links to the header, and that’s really all. The rest is usually all glitz and glamour

Comment below

Please comment below if you’ve used this plugin or have any other plugins you’d like to share with our Beyonders.

Hey! I'm Grant Ambrose,

My WordPress website generates millions of dollars in sales each year and I put together this website to help you do the same

I believe that a lot of the time, we aren't doing things that will help our business NOT because we don't know how to do it, but rather we don't even know it is possible. My website aims to change this. My website is here to help show YOU what is possible - what YOU could set up in your business with WordPress to increase sales, automate tasks and (ultimately) turn your ideas into working WordPress solutions.

Leave a Comment

Your email address will not be published. Required fields are marked *

Grow your WordPress business by getting...
My best tips to your inbox!

I'll send you emails when I publish content I think will help you and your business. You can opt-out at any time and change the topics of emails you get.

This site is not a part of the Facebook website or Facebook Inc. Additionally, this site NOT endorsed by Facebook in any way. FACEBOOK is a trademark of FACEBOOK, Inc.

Scroll to Top