Hi,
One of best features of PRO theme is its powerful Header and Footer builder. If you are running an e-Commerce website with PRO theme and Woocommerce, some of most useful elements are these elements:
- Cart Modal
- Cart Dropdown
- Cart Off Canvas
They may engage your customers to review their added items in shopping cart (basket):
By default PRO theme page builder doesn’t have any option or setting to display number of added items to Cart, it seems this feature will be available in next releases but until that time I suggest you follow this tutorial and stop using extra third-party plugins!
1. Choose a location for your Cart icon:
Usually online stores place their Cart (basket) icon somewhere in header area, so let’s put a Cart Off Canvas element in header:
Then it is better to adjust style and position of icon, I have selected a different icon for this example:
That’s fine; There is no need for coding till now.
2. Add items counter beside cart icon:
It’s time for adding a dynamic value, I mean showing number of items which is added by customer to shopping cart. To start let’s know how create a Dynamic Value through PRO theme:
Ok, we learned how to add a dynamic value to our theme but using Raw Content element is not a suitable option because this element doesn’t let you customize your counter style and assign a CSS selector to it, so it is better to copy {{dc:woocommerce:cart_items}} shortcode and paste it in Content element and then delete Raw Content element:
Now we can style the cart counter, so assign this CSS code to Content element:
$el {
margin-left: -17px;
margin-bottom: 23px;
z-index: 1;
position: -webkit-sticky;
position: sticky;
}
$el {
background: rgb(243,209,15);
background: -moz-linear-gradient(40deg, rgba(243,209,15,1) 45%, rgba(213,165,0,1) 100%);
background: -webkit-linear-gradient(40deg, rgba(243,209,15,1) 45%, rgba(213,165,0,1) 100%);
background: linear-gradient(40deg, rgba(243,209,15,1) 45%, rgba(213,165,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f3d10f",endColorstr="#d5a500",GradientType=1);
font-size:.79em;
color:#000000;
display: block;
height: 20px;
width: 20px;
line-height: 20px;
-moz-border-radius: 23%;
border-radius: 23%;
text-align: center;
padding-right: 0em;
}
Don’t forget to assign top-cart-countclass to your counter, it will be required if you prefer to have a ajax add to cart button with an RTL language theme or some more complicated customization .
If you have disabled “Ajax add to cart buttons on archives” in WooCommerce settings then this tutorial ends here for you! 
Also if you have enabled “Ajax add to cart buttons on archives” in WooCommerce settings and you using an LTR language on your website then this tutorial ends here for you!
3. Ajaxify cart counter
If you prefer using ajax add to cart buttons and your theme has an RTL language then more steps are required.
First find your cart counter complete css selector via browser Inspect tool:
In this sample it is:
e404-5 x-bar-content-area top-cart-count
Final step is using a filter to clear current content of your cart counter and add new content instead, fortunately PRO theme uses original functions and variables of WooCommerce and you may put this code in functions.php of your child theme to update cart counter value after an ajax event (be careful about css selectors in your code):
// Woocommerce Ajax Count
add_filter( 'woocommerce_add_to_cart_fragments', 'wc_refresh_mini_cart_count');
function wc_refresh_mini_cart_count($fragments){
ob_start();
?>
<div class="e404-5 x-bar-content-area top-cart-count">
<?php echo WC()->cart->get_cart_contents_count(); ?>
</div>
<?php
$fragments['.top-cart-count'] = ob_get_clean();
return $fragments;
}
UPDATE ↓
For some more complicated situations it seems referring to cart counter complete css selector will cause some conflicts and difficulties for changes in other time, so I would suggest this code in functions.php instead:
// 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;
}
I hope this tutorial will help someone. 
The End 