Лучшие решения
появляются в процессе

Как вывести корзину WooCommerce в шапке сайта

Чтобы вывести кнопку корзины с отображением количества товаров в шапке сайта,  добавим немного кода в файл темы header.php, который отвечает за вывод шапки:

<div class="s-header__basket-wr woocommerce">
    <?php
    global $woocommerce; ?>
    <a href="<?php echo $woocommerce->cart->get_cart_url() ?>" class="basket-btn basket-btn_fixed-xs">
        <span class="basket-btn__label">Корзина</span>
        <span class="basket-btn__counter">(<?php echo sprintf($woocommerce->cart->cart_contents_count); ?>)</span>
    </a>
</div>

Чтобы количество товаров обновлялось сразу же после добавления товара в корзину без перезагрузки страницы, добавим следующий код в functions.php:

add_filter('add_to_cart_fragments', 'header_add_to_cart_fragment');

function header_add_to_cart_fragment( $fragments ) {
    global $woocommerce;
    ob_start();
    ?>
    <span class="basket-btn__counter">(<?php echo sprintf($woocommerce->cart->cart_contents_count); ?>)</span>
    <?php
    $fragments['.basket-btn__counter'] = ob_get_clean();
    return $fragments;
}

Теперь стилизуем кнопку:

скачать иконку

.basket-btn {
    display: inline-block;
    max-width: 100%;
    background-color: #77787b;
    font-family: sans-serif;
    font-size: 16px;
    color: white;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: 9px center;
    background-size: 25px 25px;
    background-image: url(ico-basket.png);
    border-radius: 20px;
    padding-left: 43px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 19px;
}

Должна в итоге получиться такая кнопка:

корзина в шапке


Хорошая статья? Оцените!
(3 оценок, среднее: 5,00 из 5)
Загрузка...


Комментариев: 3

  1. В новой версии уже не работает

    
    if ( defined( 'WC_VERSION' ) && version_compare( WC_VERSION, '2.3', '>=' ) ) { 
      add_filter( 'woocommerce_add_to_cart_fragments', 'header_add_to_cart_fragment' );
    } else { 
      add_filter( 'add_to_cart_fragments', 'header_add_to_cart_fragment' );
    }

Добавить комментарий

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