In this blog post I’m going to teach you how to use PHP, the WordPress REST API & jQuery (in that order) to display the current number of items in your Woocommerce cart. We are going to use Font Awesome, a CSS stylesheet for the icon, a PHP Bootstrap Nav Walker Class and the WP REST API with jQuery to update displaying the number items in cart. This informative blog post is intended for intermediate WordPress theme/plugin developers.

 

Load Font Awesome In Your Theme

In your theme’s function.php or wherever your theme enqueues it’s stylsheets enqueue the minified font awesome css. Here are the wp_enqueue_style WordPress docs for reference.
Example:

<?php
/**
 * Enqueue scripts and styles
 */
function my_scripts() {

    if ( ! is_admin() ) {

        wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '1.0' );

    }

}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

 

Using Nav Walker Class For Bootstrap

For this I’m going to use a Nav Walker Class for Bootstrap, found here. A custom WordPress nav walker class to fully implement the Twitter Bootstrap 3.0+ navigation style in a custom theme using the WordPress built in menu manager.
Clone or download this file and place it in a ‘inc’ or ‘includes’ folder in your theme. Open your theme’s function.php and at the bottom place the following code. This code loads the class-wp-bootstrap-navwalker.php file.

<?php
/**
* Extend bootstrap menus for WP
*/
require_once( get_template_directory() . '/inc/extend-bootstrap/class-wp-bootstrap-navwalker.php' );

 

Replacing Cart Menu Item with Cart Icon

There are several ways to add an icon to your menu item. One way is to just simply put HTML in a custom link, like the following image. Although you can’t write conditional PHP here, which is what we need.

Create a menu item named cart. Save the menu. Open class-wp-bootstrap-navwalker.php and let’s write some PHP that checks if WooCommerce exists and checks if the cart has a count > 0. If it does and menu item title equals ‘cart’ then output the count and font awesome shopping cart icon.

Around line 98, place the following code, in between the commented out code.

<?php
/* $item_output .= '<a'. $attributes .'>'; */
        if ( function_exists( 'WC' ) ) {
          if ( WC()->cart->get_cart_contents_count() > 0 ) {
						if ( strtolower($item->title) == 'cart' ) {
							$item_output .= ' (' . WC()->cart->get_cart_contents_count() . ') ';
						}
          }
        }
	/* $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; */

This code is great but will only show the correct cart amount when the page loads or on refresh. We need the cart to update via jQuery after the cart is updated, for example after quantities are updated on the cart page.

 

Create a Custom WP REST API JSON Endpoint

I searched for a jQuery solution to update my menu item cart count after the cart is updated and never found a solution, so I created this. Let me know if you have a better solution.
In your theme in your includes or inc directory create a sub-directory api and the file api.php

inc/extend-woocommerce/extend-woocommerce.php
<?php
/**
 * Auto update cart after quantity change
 *
 * @return  string
 **/
function _s_custom_after_cart() {
	?>
	<script>
	jQuery( document.body ).on( "updated_cart_totals", function(){
		jQuery.get( "<?php echo get_site_url(); ?>/wp-json/extend-woo/v1/cart", function( data ) {

			jQuery(".header-menu-cart-amount").html('(' + data + ')');

			//re-bind this button, important for ajax stuffs
      jQuery("a.checkout-button").click( function(event) {
          event.preventDefault();
          sendRegistrantData();
      });

		});
	});
	</script>
	<?php
}
add_action( 'woocommerce_after_cart', '_s_custom_after_cart' );