Как вывести корзину 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('woocommerce_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;
}

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