Here is a way to add WooCommerce cart icon to a menu with the cart item count, it links to the cart page and displays the number of items that have been added to the cart.

The complete code uses three (3) php functions. This php code must be added to which need to be added to functions.php of your theme.
The CSS code must be added to your Divi > Options > Custom CSS

 

 

 

 

 

Step 1.

Create a shortcode for the WooCommerce cart, this can be appended to a menu or just added anywhere in your theme templates or hooked in with actions in the theme.

Create Shortcode

The shortcode, in this case, would be [woo_cart_but]

//code for cart addon
add_shortcode('woo_cart_but', 'woo_cart_but');
/**
 * Create Shortcode for WooCommerce Cart Menu Item
 */
function woo_cart_but()
{
    ob_start();

    $cart_count = WC()
        ->cart->cart_contents_count; // Set variable for cart item count
    $cart_url = wc_get_cart_url(); // Set Cart URL
    
?>
       <a class="menu-item cart-contents" href="<?php echo $cart_url; ?>" title="My Basket">
        <?php
    if ($cart_count > 0)
    {
?>
            <span class="cart-contents-count"><?php echo $cart_count; ?></span>
        <?php
    }
?>
        </a>
        <?php
    return ob_get_clean();

}

 

Step 2.

Filter to enable Ajax on the Cart Count

Add a filter to get the cart count to update when it changes using the Ajax fragments.

//Add a filter to get the cart count
add_filter('woocommerce_add_to_cart_fragments', 'woo_cart_but_count');
/**
 * Add AJAX Shortcode when cart contents update
 */
function woo_cart_but_count($fragments)
{

    ob_start();

    $cart_count = WC()
        ->cart->cart_contents_count;
    $cart_url = wc_get_cart_url();

?>
    <a class="cart-contents menu-item" href="<?php echo $cart_url; ?>" title="<?php _e('View your shopping cart'); ?>">
    <?php
    if ($cart_count > 0)
    {
?>
        <span class="cart-contents-count"><?php echo $cart_count; ?></span>
        <?php
    }
?></a>
    <?php
    $fragments['a.cart-contents'] = ob_get_clean();

    return $fragments;
}

 

Step 3.

Add Cart Icon to an existing menu

Use a variant of wp_nav_menu_items to specify the actual menu in the filter. For example, if the menu has an id of ‘top-menu‘ – set the filter name to wp_nav_menu_top-menu_items

If your menu had the ID of primary-menu – the filter name would be changed to wp_nav_menu_primary-menu_items etc.

//Add Cart Icon to an existing menu

add_filter( 'wp_nav_menu_top-menu_items', 'woo_cart_but_icon', 10, 2 ); // Change menu to suit - example uses 'top-menu'

/**
 * Add WooCommerce Cart Menu Item Shortcode to particular menu
 */
function woo_cart_but_icon ( $items, $args ) {
       $items .=  '[woo_cart_but]'; // Adding the created Icon via the shortcode already created
       
       return $items;
}

Add Cart Icon by itself

If you wanted the Cart Icon by itself (not in a menu) – you can use the shortcode or for PHP template files you can use do_shortcode

<?php echo do_shortcode("[woo_cart_but]"); ?>

Add CSS

Finally, add some CSS…

/* # WooCommerce Cart Icon ---------------------------------------------------------------------------------------------------- */
 .cart-contents {
     display: flex !important;
}
 .cart-contents:before {
     font-family: 'dashicons';
     font-weight: 900;
     content: "\f174" !important;
     font-size: 17px;
     color: #000000;
}
 .cart-contents:hover {
     text-decoration: none;
}
 .cart-contents-count {
     position: absolute;
     top: 15px;
     left: 5px;
     transform: translateY(-105%) translateX(25%);
     font-family: Arial, Helvetica, sans-serif;
     font-weight: normal;
     font-size: 12px;
     line-height: 22px;
     height: 22px;
     width: 22px;
     vertical-align: middle;
     text-align: center;
     color: #fff;
     background: #ffaa00;
     border-radius: 50%;
     padding: 1px;
}

Mission complete.

Display Icon Only

If you don’t care for the cart count functionality the process is a lot easier, you simply add the Cart page to the desired menu in WordPress menus and add the icon code in the Navigation label.