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

X Theme and Pro ThemeLeave a Comment

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.

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   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:

.cartdropdown .x-anchor-text {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #9ccf80;
  border-radius: 1em;
  width: 20px;
  height: 20px;
  text-align: center;
  color: #fff;
  line-height: 1.2;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}
body.cart-has-items .cartdropdown .x-anchor-text {
  opacity: 1;
}

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!

Leave a Reply

avatar
  Subscribe  
Notify of