Как изменить вывод количества товаров в корзине WooCommerce

WooCommerce — один из самых популярных плагинов для электронной коммерции на WordPress. Часто возникает задача кастомизировать вывод количества товаров в корзине, чтобы улучшить UX или интегрировать эту информацию в уникальный дизайн сайта. В этой статье мы подробно разберем, как изменить вывод количества товаров в корзине WooCommerce, используя хуки, фильтры и кастомный код.

Почему важно кастомизировать количество товаров в корзине WooCommerce

По умолчанию WooCommerce выводит количество товаров в корзине в виде маленького счетчика рядом с иконкой корзины. Однако в ряде случаев стандартное отображение не подходит — например, требуется показывать не просто количество позиций, а общее количество единиц товара (с учетом количества каждого товара), или добавить текст, изменить стиль, или вывести это значение в другом месте сайта.

Кастомизация количества товаров в корзине позволяет:

• Улучшить пользовательский интерфейс и взаимодействие;
• Предоставить более точную информацию о содержимом корзины;
• Интегрировать данные корзины в нестандартные темы и дизайн.

Давайте рассмотрим, как это сделать технически.

Использование фильтра wpassist_woocommerce_cart_item_quantity для изменения вывода количества

В WooCommerce для вывода количества товаров в корзине можно использовать фильтр woocommerce_widget_cart_item_quantity. Но чтобы сделать код уникальным и избежать конфликтов, мы будем использовать свой собственный префикс wpassist_. Пример функции, изменяющей количество:

function wpassist_woocommerce_cart_item_quantity($quantity, $cart_item, $cart_item_key) {
    // Получаем количество товара
    $qty = $cart_item['quantity'];
    // Меняем стандартный вывод, добавляем слово "шт."
    return '<span class="wpassist-qty">' . $qty . ' шт.' . '</span>';
}
add_filter('woocommerce_widget_cart_item_quantity', 'wpassist_woocommerce_cart_item_quantity', 10, 3);

Этот код изменит вывод количества в мини-корзине (виджете) на "число + шт.". Вы можете дополнительно стилизовать элемент через CSS класс wpassist-qty.

Вывод общего количества товаров в корзине с учетом всех позиций

Иногда вместо количества позиции нужно вывести общее количество единиц товаров во всей корзине. Для этого можно использовать глобальный объект WC()->cart и функцию подсчета:

function wpassist_get_total_cart_quantity() {
    $total_qty = 0;
    foreach (WC()->cart->get_cart() as $cart_item) {
        $total_qty += $cart_item['quantity'];
    }
    return $total_qty;
}

// Пример вывода общего количества
add_shortcode('wpassist_total_cart_qty', function() {
    return wpassist_get_total_cart_quantity();
});

Вы можете использовать шорткод [wpassist_total_cart_qty] в любом месте сайта, чтобы показать общее число товаров в корзине.

Кастомизация вывода количества товаров в шапке сайта

Часто количество товаров выводится в шапке сайта рядом с иконкой корзины. Для изменения этого блока нужно переопределить шаблон или использовать хук wp_nav_menu_items или woocommerce_add_to_cart_fragments для обновления счётчика без перезагрузки страницы.

Пример функции, добавляющей кастомный счетчик в меню:

function wpassist_add_cart_qty_to_menu($items, $args) {
    if ($args->theme_location === 'primary') { // поменяйте на вашу локацию меню
        $count = wpassist_get_total_cart_quantity();
        $cart_url = wc_get_cart_url();
        $items .= '<li class="menu-item wpassist-cart-qty"><a href="' . esc_url($cart_url) . '">Корзина (' . $count . ')</a></li>';
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'wpassist_add_cart_qty_to_menu', 10, 2);

Для динамического обновления без перезагрузки нужно добавить поддержку фрагментов AJAX WooCommerce:

function wpassist_add_to_cart_fragment( $fragments ) {
    ob_start();
    $count = wpassist_get_total_cart_quantity();
    echo '<a class="cart-contents" href="' . wc_get_cart_url() . '" title="Перейти в корзину">' . $count . '</a>';
    $fragments['a.cart-contents'] = ob_get_clean();
    return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'wpassist_add_to_cart_fragment' );

Это обновит количество товаров на странице после добавления товара в корзину.

Лучшие плагины для кастомизации количества товаров в корзине WooCommerce

Если вы не хотите писать код вручную, можно использовать готовые плагины с расширенными возможностями:

• WooCommerce Cart Count — простой плагин для изменения и стилизации счетчика корзины;
• WooCommerce Menu Cart — добавляет корзину в меню с настраиваемым выводом количества товаров;
• Advanced Cart Quantity — позволяет настраивать минимальное и максимальное количество товаров, а также вывод счетчика.

Все эти плагины можно найти в официальном репозитории WordPress и настроить под свои нужды.

Советы по оптимизации и безопасности кода для кастомного вывода количества товаров в корзине

При добавлении кастомного кода важно учитывать несколько моментов:

• Используйте префиксы для функций и переменных, чтобы избежать конфликтов (например, wpassist_).
• Экранируйте выводимые данные с помощью esc_html() или esc_url() для безопасности.
• Учитывайте кэширование — для динамических данных используйте AJAX и фильтры WooCommerce.
• Проверяйте совместимость с используемой темой и другими плагинами.

Следуя этим рекомендациям, вы сможете легко и безопасно кастомизировать количество товаров в корзине WooCommerce.

Заключение

Изменение вывода количества товаров в корзине WooCommerce — распространенная задача для улучшения пользовательского опыта. С помощью фильтров, шорткодов и хуков можно гибко настроить отображение и интегрировать его в любой дизайн. Если вы предпочитаете готовые решения, существуют надежные плагины для этих целей. В любом случае, подходите к задаче с вниманием к безопасности и производительности.