Add Item Count to Shopping Cart in Menu using Custom Header

[designerken]

Is there a solution available to add a notification count to the shopping cart icon when using the custom header builder?

[friech]

Hi There,

Regretfully this feature is not available yet, but we already receive a number of requests of this and our Dev Team is already working on how we can implement this in the future versions.

All of these requests are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Thanks!

[designerken]

Well since that wont work for those of us that need this functionality now. Here is my workaround for anyone looking for something.

This is what I ended up with:

STEP 1
Add this function in a child theme in functions.php:

if ( ! function_exists( 'designerken_cart_count' ) ) {
    function designerken_cart_count() {
        $cartcount = wp_kses_data( WC()->cart->get_cart_contents_count() );
        if ( $cartcount === '0' )	{
            return;
        } else {
            return '<span class="cart-count">'. $cartcount . '</span>';
        }
    }
}
add_shortcode('cartcount', 'designerken_cart_count');

STEP 2
In the header builder, create a Bar and a Container (my container has the Flex Layout set to End for the Horizontal setting) with the Cart Dropdown and Content Area elements:

This will put the Cart Dropdown and the Content Area to the far right, or the End, of the container.

STEP 3
In the Content Area element add the shortcode you created in Step 1. Then click customize and give the content area a custom class.

STEP 4
Add the following Global CSS in the theme options.

.cart-count-content-area {
    margin-left: -5px;
    margin-top: -20px;
    z-index: 1;
}

.cart-count {
    background-color:#0984e3; 
    font-size:.75em; 
    color:white; 
    display: block; 
    height: 20px; 
    width: 20px; 
    line-height: 20px;
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    text-align: center;
}

That about does it. Again this is a workaround for what I needed, your mileage may vary depending your setup. Please get this functionality in the core of the cart element.

[rad]

Hi @designerken,

Thanks for sharing, yes, this is on our list. But we’re not sure about its implementation, it could be different than a shortcode.

Thanks!

[designerken]

@Rad I would hope that its implementation would be different than a shortcode. That is why I stated its my “workaround” to try to get the functionality with using your current elements. Hopefully your developers will get this into the core sooner than later.

[ruenel]

Hopefully sooner the better.
Best Regards.

[rubius]

Hi,
thank you @designerken for your code, works like a charm.
Would you or the Themeco guys know how to adapt it to Essential grid?

I created an essential grid with the woocommerce products and the add to cart button.
When I clic on this button, the product is correctly added to the cart but the counter does nothing

[christian]

Hey @rubius,

Regretfully, that would require custom development which is outside the scope of our support. You can try contacting @designerken in the Peer to Peer Forum.

Thanks.