Alright, we know now how to integrate WooCommerce in a Genesis framework theme. What about adding a WooCommerce cart with product count and a total amount to Genesis primary navigation? No problem! Just follow these simple steps.
Add the following code to the functions.php of your Genesis child theme.
With this code, we hook an extra div to the genesis_header_right area. Inside this mini-cart div is a span for the amount and for the cart-count. These spans are important. You may want to style each of these objects to your own preference. The spans are wrapped in a link to the WooCommerce cart template.
The Styling
The styling of the cart depends on your own taste as well as on the theme you use. Add the following css to the stylesheet of your theme for some basic styling.
That’s all. It is as simple as this. Enjoy the ride!
drew says
Thank you so much for this post. It is exactly what I was looking for. It works great. I have a few questions how this works.
I thought I would easily be able to adapt the the script to be able to add a conditional link for a WooCommerce “Log In” and “My Account” link next to the cart info.
It was then I realized your code created a span class of .amount. I’m puzzled by this because I only see a span class of .cart-count. Perhaps an explanation of why this happens will solve my problem.
My problem:
When I create a duplicate of your code and remove all the info about cart links for some reason my text in a new div and span still link to the cart. A quick fix I found is to put my add_action and function above you add_cart code. When I do this my text is no longer linked to the code, but the display order is switched on my browser as well.
This is a bare bones problem, If you have any insight into the conditional statements needed to determine if a user is logged in or not would be icing on the top. I’m pretty new to all this.
here is my code showing your code on the top, then mine below:
https://gist.github.com/digitaldesigndrew/e99bbe34ed9fa3264440
I hope my question makes sense, it seems odd to me.
Thanks for your wonderful post! It really made my day.
Frank Schrijvers says
Hi Drew,
I’ve updated the first gist. The link to the cart wasn’t closed. That is why your text also linked to the cart.
drew says
Frank,
You are a saint among men. Thank you so much.
Paul says
Hi Frank,
should this tutorial create the cart icon too? All i’m getting are the numbers, no icon.
Thanks
Frank Schrijvers says
Hi Paul,
No, the styling doesn’t include a cart icon.
Paul says
Great, it works then and I haven’t messed up 😀
Thanks very much.
paul says
Been trying to find that icon everywhere Frank but no joy. Can you point me to where it’s avaialble please?
Thanks
Frank Schrijvers says
Hi Paul,
I’ve made the icon with CSS. You can see an example in the Forest theme: https://themes.wpstud.io/forest/shop/
Aaron J says
Hi, This is great. Is there a way to make sure it updates when changes are made in the cart? For example removing an item or updating the quantity happens via ajax and so the navigation items don’t update.
Either force a page refresh or send it ajax updates?
Thanks!
Frank Schrijvers says
Hi Aaron,
This is possible but not with this code. As you said this has to happen via ajax.
Devprolabs says
Hello..
how to add to secondary menu?
like call css classes ” mini-cart ” right?
Frank Schrijvers says
You have to use another hook. Now the WooCommerce cart is add to primary navigation Genesis by the hook genesis_header_right. If you install the Genesis Visual Hook Guide plugin you can see which hook you have to use.
Onome Joseph says
Thank you so much. Your code Gabe me the headstart I needed.