Как вывести значок корзины WooCommerce

Цифровой мир и разработка

Выводим симпатичный значок корзины, который получает данные от модуля WooCommerce о количестве товаров в корзине и их цене. Эта реализация пригодится в том случае, если в шаблоне WordPress отсутствует значок корзины WooCommerce.

  1. Вставляем данный код в ту часть страницы, где хотите видеть значок корзины WooCommerce: 
    <!-- shopping cart -->
<?php if (class_exists('woocommerce')) : ?>
	<div id="top-cart">
		<div class="top-cart-icon">
			<i class="fa fa-shopping-cart"></i>
			<a class="cart-items" href="/cart" title="Посмотреть корзину">
				<div class="count"><?php echo sprintf(_n('%d товар', '%d товаров', WC()->cart->cart_contents_count, 'store'), WC()->cart->cart_contents_count); ?></div>
				<div class="total"> <?php echo WC()->cart->get_cart_total(); ?>
				</div>
			</a>
		</div>
	</div>
<?php endif; ?>
<!-- shopping cart end -->
  2. Вставляем стили в файл style.css 
    /* styles for shopping cart */
#top-cart {
    min-width: 100px;
}
#top-cart .cart-items {
    font-size: 12px;
	display: inline-block;
}
#top-cart i {
    transition: .4s all ease;
    -webkit-transition: .4s all ease;
    -moz-transition: .4s all ease;
    -ms-transition: .4s all ease;
    -o-transition: .4s all ease;
    font-size: 34px;
}
#top-cart:hover i {
    transform: translateX(5px);
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
span.rur {
    font-family: rub-arial-regular;
    text-transform: uppercase;
}
span.rur span {
    display: none;
}
.fa-shopping-cart{
    right: 5px;
    position: relative;
}
.fa-shopping-cart:before {
    content: "\f07a";
}
  3. Подключаем иконочный шрифт в любое место между тегами <head> </head> Или подключаем иконочный шрифт font awesome любым удобным для вас способом. 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Готово, при необходимости подредактируйте стили или разметку согласно вашему шаблону.

5 комментариев

  1. подскажите пож
    какой именно плагин можно поставить?
    хочу поставить на сайт electro-energia.ru корзину, но она появляется только при изменении типа хедера

    Ответить

    1. У вас там не увидел интернет-магазина, зачем вам значок корзины? А так например не плохой плагин Side Cart For WooCommerce.

      Ответить

      1. Сейчас мне кажется уже полно готовых плагинов на эту тему (если требуется больше возможностей).

        Ответить

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *