WordPress

Display custom woocommerce add to cart icon on header

Woocommerce custom add to cart icon on header

Clicking on 2 items  in this example takes the visitor to Cart page, http://example.com/cart/

Add bellow code in theme functions.php

<?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;
 }

Here is code using woocommerce shortcode

add_action('admin_init', 'mytheme_add_init');
 add_action('admin_menu', 'mytheme_add_admin');
 add_shortcode('cartitem','sk_wcmenucart');

 
 
 
 function sk_wcmenucart() {
 // 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' ) ) ) )
 //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 = '<span><a class="wcmenucart-contents cartitemsh" href="'. $shop_page_url .'" title="'. $start_shopping .'">';
 } else {
 $menu_item = '<span><a class="wcmenucart-contents cartitemsh" href="'. $cart_url .'" title="'. $viewing_cart .'"> ';
 }
 $menu_item .= '<i class="fa fa-shopping-cart cartitemsh"></i> ';
 $menu_item .= $cart_contents.' - '. $cart_total;
 $menu_item .= '</a></span>';
 // 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_item . $social;
 //return 'mtt';
 }

How to use custom woocommerce add to cart icon-

shortcode in any where in wordpress pages and post

Cart icon display using this woocommerce custom shortcode: [cartitem]

Now call scord code in template as per you want to display :

<?php echo do_shortcode(‘[cartitem]’);?>

 

Being Idea

Being Idea is a web platform of programming tutorials to make better programming skills and provides Software Development Solutions.

This website uses cookies.