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
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.
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.
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.
Have You Read These 5 Lasts Posts?
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.