Show the cart count and cart total in a Pro Theme cart element

One request many Themeco users have is related to the cart elements in the header builder. That request is simple: “How can I show a cart count or cart total in the Pro element?”. This post will answer that question.

Method 1: For Pro 2.5.0+

Themeco has now simplified this process to the point we don’t even need custom code.

Your first step will be to insert a cart element into your header. For this example, I used a Cart Modal element:

Then you will need to inspect the element to find the text settings. Enable them, and you will see Primary Text and Secondary Text fields. On the right of these fields is a little cylinder icon. Click that, type “cart” into the search, and you will see the dynamic content available to you.

In this example, I wanted my Primary text to say cart, and the secondary text to read the total.

It ends up looking like this on the front end:

And that’s it. Easy. Effective. But what if you want more control over it? What if you want no text output if the cart is empty? For that, and for older versions of the theme, I present you with another option, method 2.

Method 2: Pro < 2.5.0 (or for custom outputs)

There are two presentations that I will be focusing on; one will show the cart count and total cost in text, the second will show a simple cart count. These look like this:

Method 1: Showing both the cart count and the cart total in Pro theme

To start this off, lets add a cart element to our header builder.

Next you will need to enable the text setup for both primary and secondary text content.

You will notice that I entered some default data in these boxes, and there’s a reason for that. Pro theme will not render the HTML for these text fields unless something is typed in there. Now, you are free to enter anything you want, this will be the default “cart empty” text that is shown on the element.

In order to target these text fields, we will need to add a custom class to the cart element:

Now comes the custom code. Place this in your functions.php file in a child theme:

The breakdown of this code is simple: it uses Woocommerce fragments to change the content of an HTML element, in the same way the mini cart works. This is done via javascript and ajax on page loads.

Method 2: Add a cart count indicator to a Pro cart element

For this method, the set up is the exact same as above, but this time we won’t be using the secondary text. In the primary text, enter a non breaking space &nbsp; and leave the secondary empty. I will opt to hide this count if the cart is empty. For styling, you will need to play with the following css to match your site:

And then use this PHP snippet in your functions.php file (in a child theme, as always):

In this case I’ve opted to hide the element text by default (in the header CSS tab, possibly), and then override that with a body class CSS target. How do we add that? Like so:

Add a custom body class when our cart has items in it

Lastly, we want a body class to specify whether or not we have items in the cart, so we can show or hide these text fields accordingly:

You can now target your text fields with a body.cart-has-items selector in front of it in order to show or hide the counts as you wish.

Bonus method: “I have AJAX or fragments disabled for performance reasons, how can I show a cart count?”

The easiest method here would be a simple shortcode, placed wherever you like (such as a content area):

I hope this has been helpful for some of you, good luck!