Is there a way to add number of item in the cart icon?

Support
#1

Hey,

Is there any option in the x pro theme that we can add numbers of item in cart icon in the header. Here is link to my website https://theandibrand.com

Thanks

#2

Hi there,

Thanks for writing in.

There is no available feature like that for now, but I’ll forward this as feature request.

Please stay tuned :slight_smile:

1 Like
#3

Just seconding this! would be super cool.

#4

got with chat gpt. here are instructions in case any one is interested: ( i did not need to do step 3)
Yes — there is a way to add a number (item count) to the cart icon in the Pro theme header, but it’s not a built-in “badge” option in all header/cart elements — you’ll need to use the Dynamic Content feature + a little code or setup. Here’s how:

:mag: How to Add Cart Item Count in Pro Theme

  1. Use Dynamic Content

    • In the Pro header builder, add a Content element (or a Text/Raw content area) next to your cart icon.

    • Use this dynamic content shortcode:

      {{dc:woocommerce:cart_items}}

    • This will output the number of items in the WooCommerce cart. (Themeco)

  2. Style It With CSS

    • Give the content element a class (e.g., top-cart-count).

    • Then add some CSS to style it, e.g.:

      .top-cart-count {
  display: block;
  height: 20px;
  width: 20px;
  line-height: 20px;
  border-radius: 50%;
  text-align: center;
  background: red;
  color: white;
  position: relative;
  top: -10px;
  left: -10px;
}

    • (Adjust the positioning and colors to match your design.)

  3. Make It Update Dynamically (AJAX)

    • To support AJAX “add to cart” (so the counter updates without page reload), you need to add a filter in functions.php to refresh the cart count via WooCommerce fragments:

      // Woocommerce Ajax Count
add_filter( 'woocommerce_add_to_cart_fragments', 'refresh_cart_count', 50, 1 );
function refresh_cart_count( $fragments ) {
    ob_start();
    ?>
    <span class="top-cart-count" id="cart-count"><?php
    $cart_count = WC()->cart->get_cart_contents_count();
    echo sprintf ( _n( '%d', '%d', $cart_count ), $cart_count );
    ?></span>
    <?php
    $fragments['.top-cart-count'] = ob_get_clean();
    return $fragments;
}

    • This is exactly what they suggest in a Pro-theme tutorial. (Themeco)

:warning: Things to Watch Out For

  • If you’re using a Cart Menu element (instead of a simple icon + text), Pro doesn’t always have a built-in selector for the item-count badge in that element. According to the theme support:

    “no selector available … you can add the dynamic content code … but you cannot call it in the X theme Header since there is no Header builder in the X theme …” (Themeco)

  • Make sure your WooCommerce “Ajax add to cart” setting is turned on (if you want live count updates).

  • Test on mobile and desktop to ensure positioning looks good for your header layout.

If you like, I can give you exact CSS + setup code tailored for the Pro version you are using (just tell me which header-element you’re using — Cart Off Canvas, Cart Dropdown, etc.). Do you want me to do that?