Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

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.

woocommerce-cart-header-menu-update

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.

woocommerce-cart-in-your-header-menu-estroni-screenshot-homepage

This is what the Estroni.com 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.

sticky-top-bar-bb-theme-estroni-mobile

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.

woocommerce-menu-cart-scroll-fixed-header

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.