Как вывести значок корзины 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">

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

Один комментарий

Оставить комментарий

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