Добавляем иконку корзины в меню с количеством и суммой в WooCommerce

Недавно на одном из форумов сети меня спросили, существует ли хорошая инструкция о том, как добавить корзину в меню, отображающую количество товаров в ней и общую сумму с помощью WooCommerce. Можно конечно же использовать соответствующий плагин, однако есть решение и с помощью кода. В этой статье мы поделимся кодом, «извлеченным» из плагина Woocommerce Menu Cart, который можно поместить в файл functions.php вашей темы. Код выведет количество товаров в корзине и их общую стоимость в основном меню справа.

В том случае, когда товаров в корзине не окажется, меню будет выглядеть таким образом:

Screen-Shot-2014-01-05-at-10.15.41-AM[1]

“0 товаров – $0? — эта ссылка будет вести на основную страницу магазина WooCommerce, обычно это http://example.com/shop/

Когда же в корзине будет хотя бы один товар, меню навигации будет выглядеть так:

Screen-Shot-2014-01-05-at-10.18.08-AM[1]

Клик на “2 товара – $47? в этом примере переместит покупателя на страницу Корзины, http://example.com/cart/

Для реализации задуманного добавляем следующий код в файл functions.php вашей темы:

<?php

//* Активируем поддержку шрифта Font Awesome
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {

	wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' );

}

/**
 * Помещаем иконку корзины с количеством товаров и общей стоимостью в меню навигации.
 *
 * Источник: http://wordpress.org/plugins/woocommerce-menu-bar-cart/
 */
add_filter('wp_nav_menu_items','sk_wcmenucart', 10, 2);
function sk_wcmenucart($menu, $args) {

	// Проверяем, установлен ли и активирован плагин WooCommerce и добавляем новый элемент в меню, назначенному основным меню навигации
	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();
		// Раскомментируйте строку ниже для того, чтобы скрыть иконку корзины в меню, когда нет добавленных товаров в корзине.
		// 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>';
		// Раскомментируйте строку ниже для того, чтобы скрыть иконку корзины в меню, когда нет добавленных товаров в корзине.
		// }
		echo $menu_item;
	$social = ob_get_clean();
	return $menu . $social;

}

Если вы захотите добавить иконку корзины в произвольное меню, то поменяйте на нужное значение в строке 20.

Если вы хотите, чтобы иконка корзины в меню появлялась только тогда, когда в ней есть хотя бы один товар, тогда расскомментируйте строки 32 и 44

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

VN:F [1.9.22_1171]
Rating: 3.9/5 (60 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
Scroll To Top