Как вывести счётчик товаров из корзины WooCommerce где угодно

Когда пользователь добавляет товар в корзину, приятно видеть, как сразу обновляется счётчик товаров — без перезагрузки страницы. Это делает сайт удобнее и современнее.

В этом уроке покажу, как добавить такой счётчик с помощью простого PHP + jQuery сниппета для Woocommerce.

Что делает сниппет

Сниппет создаёт AJAX-обработчик, который возвращает текущее количество товаров в корзине WooCommerce, и JavaScript-код, который отслеживает события добавления или удаления товаров и обновляет число в элементе с классом .cart-count. В результате, при добавлении или удалении товара, число на иконке корзины меняется мгновенно — без перезагрузки страницы.

Сниппет целиком

Сниппет рекомендуем устанавливать в специальном плагинет Code Snippets или внизу файла functions.php вашей темы.

add_action( 'wp_ajax_nopriv_get_cart_count', 'get_cart_count' );
add_action( 'wp_ajax_get_cart_count', 'get_cart_count' );
function get_cart_count() {
    echo WC()->cart->get_cart_contents_count();
    wp_die();
}

function add_to_cart_js() {
?>
<script>
jQuery(document).ready(function($) {

    function updateCartCount() {
        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'POST',
            data: { action: 'get_cart_count' },
            success:function(data) {
                const $count = $('.cart-count');
                const count = parseInt(data) || 0;

                if (count > 0) {
                    $count.text(count).fadeIn(200);
                } else {
                    $count.fadeOut(200);
                }
            }
        });
    }

    // Обновление при загрузке страницы
    updateCartCount();

    // WooCommerce стандартные события
    $(document.body).on('added_to_cart removed_from_cart updated_wc_div', updateCartCount);

    // Fly Cart (WooFly Cart) AJAX
    $(document).ajaxComplete(function(event, xhr, settings) {
        if (settings.url.includes('wc-ajax') || settings.url.includes('woofc')) {
            updateCartCount();
        }
    });

});
</script>
<?php
}
add_action('wp_footer', 'add_to_cart_js');

Пояснение

• wp_ajax_nopriv_ — для неавторизованных пользователей
• wp_ajax_ — для авторизованных
• WC()->cart->get_cart_contents_count() возвращает текущее количество товаров в корзине.
• подключается внизу сайта (wp_footer);
• при загрузке страницы сразу показывает актуальное количество;
• реагирует на события WooCommerce (added_to_cart, removed_from_cart);
• работает даже с AJAX-корзинами вроде WooFly Cart.

Как отобразить на сайте

Количество будет отображаться внутри любого элемента с классом cart-count

<span class="cart-count"></span>

Как использовать

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