How to add Dynamic Woo Cart Count

How To
1

Hi,
I’m fighting with woocommerce to add a simple cart count to my menu (without using a menu widget).

I have looked a number of different resources on the web but I’m missing something

Does anyone have a simple method in bricks & a snippet plugin like WPcodebox to do this? Just want to have a cart icon with the cart count to its right, hide the text if zero is zero. Do some CSS styling on the number when visible.

2

Never mind, I finally got this to work:

<?php 
add_shortcode('woo_cart_icon', 'woo_cart_icon');
/**
 * Create Shortcode for WooCommerce Cart Menu Item
 */
function woo_cart_icon()
{
    ob_start();
    $cart_count = WC()->cart->get_cart_contents_count();

    if ($cart_count > 0) {
        ?>
        <span class="cart-contents-count" id="woo-cart-count"><?php echo esc_html($cart_count); ?></span>
        <?php
    }

    return ob_get_clean();
}

add_action('wp_footer', 'woo_cart_icon_ajax_script');
/**
 * Add AJAX script to update cart count dynamically
 */
function woo_cart_icon_ajax_script()
{
    ?>
    <script>
    jQuery(document).ready(function($) {
        // Update the cart count dynamically
        $(document.body).on('added_to_cart removed_from_cart', function() {
            updateCartCount();
        });

        function updateCartCount() {
            $.ajax({
                url: wc_cart_fragments_params.ajax_url,
                type: 'POST',
                data: {
                    action: 'get_cart_count'
                },
                success: function(result) {
                    $('#woo-cart-count').text(result);
                }
            });
        }
    });
    </script>
    <?php
}

add_action('wp_ajax_get_cart_count', 'woo_cart_icon_ajax_get_cart_count');
add_action('wp_ajax_nopriv_get_cart_count', 'woo_cart_icon_ajax_get_cart_count');
/**
 * AJAX callback to retrieve the cart count
 */
function woo_cart_icon_ajax_get_cart_count()
{
    echo wc()->cart->get_cart_contents_count();
    wp_die();
}
1 Like
3

Hey ! It looks like you succeed on creating your own Dynamic woo cart count.
Would you mind giving me some details on how you succeed on it.
I guess I have to save your code on WP Code Box then, how did you manage to call it on your design ?
Thanks for your help.

4

Hey.

Probably way to late for help out ludo here, but this codes adds a shortcode to WP that you can add to the menu. This will just create a banner containing the count, any icon or styling has to be added separately.

However, if your goal is a cart icon with a count on, the better solution is the mini-cart element.

5

Mini cart works fine once you style it, but there is a ton of code there. Pretty heavy on page load, even with perfmatters, etc. I ended up removing the mini cart to improve load times.

6

If anyone’s interested, I created a custom mini-cart that includes the cart count. I did everything with dynamic data tags rather than shortcodes so that I can use the tag filters in the builder.

1 Like
7

Your website doesnt seem to work. How did you do it with dynamic tags?

8

Hi, sorry, I’ve taken the site down temporarily to relaunch the server from scratch.

I registered a custom dd tag

// Register the custom dynamic tag for Bricks
add_filter( 'bricks/dynamic_tags_list', 'rsd_add_cart_total_quantity_tag' );
function rsd_add_cart_total_quantity_tag( $tags ) {
    $tags[] = [
        'name'  => '{rsd_cart_total_quantity}',
        'label' => 'Cart Total Quantity',
        'group' => 'WooCommerce',
    ];

    return $tags;
}

// Render the tag's value when used directly in the tag list
add_filter( 'bricks/dynamic_data/render_tag', 'rsd_render_cart_total_quantity', 20, 3 );
function rsd_render_cart_total_quantity( $tag, $post, $context = 'text' ) {
    if ( $tag !== '{rsd_cart_total_quantity}' ) {
        return $tag;
    }

    return rsd_get_cart_total_quantity();
}

// Render the tag within content, replacing occurrences of {rsd_cart_total_quantity}
add_filter( 'bricks/dynamic_data/render_content', 'rsd_replace_cart_total_quantity_in_content', 20, 3 );
function rsd_replace_cart_total_quantity_in_content( $content, $post, $context = 'text' ) {
    if ( strpos( $content, '{rsd_cart_total_quantity}' ) === false ) {
        return $content;
    }

    $total_quantity = rsd_get_cart_total_quantity();
    return str_replace( '{rsd_cart_total_quantity}', $total_quantity, $content );
}

// Helper function to get the total cart quantity
function rsd_get_cart_total_quantity() {
    if ( function_exists( 'WC' ) && WC()->cart ) {
        $total_quantity = WC()->cart->get_cart_contents_count();
        return $total_quantity > 0 ? $total_quantity : '';
    }
    return '';
}

This doesn’t work with AJAX and will only update on page refresh. But if your site is fast, that’s not a huge issue