Sara asked in Genesis WordPress Facebook group,
Does anyone know of a good tutorial on how to add a shopping cart that display the number of items and total using WooCommerce. I want it to function similar to this plugin but I do not want to use a plugin. Thanks http://wordpress.org/plugins/woocommerce-menu-bar-cart/
In this article I share the code extracted from Woocommerce Menu Cart plugin that can be placed in active theme’s functions.php which would display the number of items in shopping cart and their total value in Primary navigation menu at the right side.
When there are no items in the cart, nav bar is going to look like this:
“0 items – $0” links to WooCommerce Shop Base Page, typically http://example.com/shop/
When there is at least 1 item in the cart, nav bar will look this:
Clicking on “2 items – $47” in this example takes the visitor to Cart page, http://example.com/cart/
Add this in functions.php:
//* Make Font Awesome available | |
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' ); | |
function enqueue_font_awesome() { | |
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' ); | |
} | |
/** | |
* Place a cart icon with number of items and total cost in the menu bar. | |
* | |
* Source: http://wordpress.org/plugins/woocommerce-menu-bar-cart/ | |
*/ | |
add_filter('wp_nav_menu_items','sk_wcmenucart', 10, 2); | |
function sk_wcmenucart($menu, $args) { | |
// Check if WooCommerce is active and add a new item to a menu assigned to Primary Navigation Menu location | |
if ( !in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) || 'primary' !== $args->theme_location ) | |
return $menu; | |
ob_start(); | |
global $woocommerce; | |
$viewing_cart = __('View your shopping cart', 'your-theme-slug'); | |
$start_shopping = __('Start shopping', 'your-theme-slug'); | |
$cart_url = $woocommerce->cart->get_cart_url(); | |
$shop_page_url = get_permalink( woocommerce_get_page_id( 'shop' ) ); | |
$cart_contents_count = $woocommerce->cart->cart_contents_count; | |
$cart_contents = sprintf(_n('%d item', '%d items', $cart_contents_count, 'your-theme-slug'), $cart_contents_count); | |
$cart_total = $woocommerce->cart->get_cart_total(); | |
// Uncomment the line below to hide nav menu cart item when there are no items in the cart | |
// if ( $cart_contents_count > 0 ) { | |
if ($cart_contents_count == 0) { | |
$menu_item = '<li class="right"><a class="wcmenucart-contents" href="'. $shop_page_url .'" title="'. $start_shopping .'">'; | |
} else { | |
$menu_item = '<li class="right"><a class="wcmenucart-contents" href="'. $cart_url .'" title="'. $viewing_cart .'">'; | |
} | |
$menu_item .= '<i class="fa fa-shopping-cart"></i> '; | |
$menu_item .= $cart_contents.' - '. $cart_total; | |
$menu_item .= '</a></li>'; | |
// Uncomment the line below to hide nav menu cart item when there are no items in the cart | |
// } | |
echo $menu_item; | |
$social = ob_get_clean(); | |
return $menu . $social; | |
} |
If you would like to add the cart menu item to a custom menu assigned to Secondary Navigation Menu, change primary to secondary in line 21.
If you would like cart menu to appear only when there is at least 1 item in the cart, then uncomment lines 34 and 46.
Reference: http://www.billerickson.net/customizing-wordpress-menus/
Credit: https://wpovernight.com/