WooCommerce – мощный плагин для электронной коммерции на WordPress, и управление статусами заказов является ключевой задачей для многих магазинов. Добавление визуальных иконок к статусам заказов позволяет быстро ориентироваться в админке и улучшает UX для администраторов и клиентов. В этой статье разберём, как создать динамические иконки для статусов заказов WooCommerce с помощью кода и рассмотрим полезные плагины для упрощения задачи.
Почему нужны иконки для статусов заказов WooCommerce
По умолчанию WooCommerce отображает статусы заказов текстом, что не всегда удобно, особенно когда заказов много. Иконки помогают:
- Ускорить визуальное восприятие состояния заказа;
- Улучшить интерфейс админки и личного кабинета покупателя;
- Добавить уникальный стиль и брендинг магазину;
- Обозначить нестандартные статусы заказов, если они добавлены.
В результате вы получаете более понятный и привлекательный интерфейс управления заказами.
Добавление иконок к стандартным статусам WooCommerce через код
Рассмотрим пример, как добавить иконки к стандартным статусам WooCommerce (например, «В ожидании», «Обработка», «Выполнен») в списке заказов в админке.
Для этого используем фильтр woocommerce_admin_order_actions и добавим свои иконки с помощью CSS-классов и SVG.
Пример кода для добавления иконок в админ-панель
add_filter('woocommerce_admin_order_actions', 'wpicons_add_status_icons', 100, 2); function wpicons_add_status_icons($actions, $order) { $status = $order->get_status(); $icons = [ 'pending' => '⏳', // иконка для 'ожидание' 'processing' => '⚙️', // иконка для 'обработка' 'completed' => '✅', // иконка для 'выполнен' 'on-hold' => '🛑', // иконка для 'на удержании' 'cancelled' => '❌', // иконка для 'отменен' ]; if (isset($icons[$status])) { $actions['status_icon'] = [ 'url' => '', 'name' => $icons[$status], 'action' => 'view status icon', ]; } return $actions; }Этот код добавит простые иконки-эмодзи рядом с заказами по статусам. Для более сложных иконок можно использовать SVG или шрифты иконок.
Использование SVG и кастомных стилей для иконок статусов
Чтобы сделать иконки более стильными и масштабируемыми, лучше использовать SVG. Добавим SVG иконки и подключим стили.
Пример вставки SVG иконок в список заказов
function wpicons_add_status_svg_icon($actions, $order) { $status = $order->get_status(); $svg_icons = [ 'pending' => '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" stroke="#FFA500" stroke-width="2"/></svg>', 'processing' => '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2v20M2 12h20" stroke="#0073aa" stroke-width="2"/></svg>', 'completed' => '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 13l4 4L19 7" stroke="#28a745" stroke-width="2"/></svg>', ]; if (isset($svg_icons[$status])) { $actions['status_icon_svg'] = [ 'url' => '', 'name' => $svg_icons[$status], 'action' => 'view svg icon', ]; } return $actions; } add_filter('woocommerce_admin_order_actions', 'wpicons_add_status_svg_icon', 100, 2);Чтобы иконки отображались корректно, добавьте CSS для стилей иконок в файл темы или кастомный CSS:
.wc-action-button .status_icon_svg svg { vertical-align: middle; pointer-events: none; }Добавление иконок в личный кабинет клиента
Иногда полезно отображать иконки статусов заказов и на стороне клиента в разделе с заказами. Для этого можно использовать фильтр WooCommerce woocommerce_my_account_my_orders_columns и woocommerce_my_account_my_orders_column_{$column}.
Пример добавления колонки с иконками в личный кабинет
function wpicons_add_order_status_icon_column($columns) { $columns['status_icon'] = __('Статус с иконкой', 'wpicons'); return $columns; } add_filter('woocommerce_my_account_my_orders_columns', 'wpicons_add_order_status_icon_column'); function wpicons_show_order_status_icon_column($column, $order) { if ('status_icon' === $column) { $status = $order->get_status(); $icons = [ 'pending' => '⏳', 'processing' => '⚙️', 'completed' => '✅', 'on-hold' => '🛑', 'cancelled' => '❌', ]; echo isset($icons[$status]) ? $icons[$status] . ' ' . ucfirst($status) : ucfirst($status); } } add_action('woocommerce_my_account_my_orders_column_status_icon', 'wpicons_show_order_status_icon_column', 10, 2);Так вы улучшите удобство клиентов, позволяя им быстро видеть статус заказа.
Полезные плагины для работы с иконками и статусами WooCommerce
Если не хочется писать код, можно использовать плагины для расширения функционала WooCommerce:
- Clearfy Pro — плагин для оптимизации и кастомизации WooCommerce, включая управление статусами заказов и добавление иконок;
- WPCommunity — расширяет возможности интерфейса, позволяет добавить иконки и визуальные метки;
- WPRemark — инструмент для кастомных уведомлений и иконок в WooCommerce.
Добавление пользовательских статусов заказов с иконками
WooCommerce позволяет создавать свои статусы заказов. Чтобы к ним добавить иконки, нужно зарегистрировать статус и расширить функционал отображения иконок.
Пример регистрации статуса и добавления иконки
function wpicons_register_custom_order_status() { register_post_status('wc-awaiting-shipment', [ 'label' => 'Ожидает отправки', 'public' => true, 'exclude_from_search' => false, 'show_in_admin_all_list' => true, 'show_in_admin_status_list' => true, 'label_count' => _n_noop('Ожидает отправки <span class="count">(%s)</span>', 'Ожидает отправки <span class="count">(%s)</span>'), ]); } add_action('init', 'wpicons_register_custom_order_status'); function wpicons_add_custom_order_statuses($order_statuses) { $order_statuses['wc-awaiting-shipment'] = 'Ожидает отправки'; return $order_statuses; } add_filter('wc_order_statuses', 'wpicons_add_custom_order_statuses'); function wpicons_add_custom_status_icon($actions, $order) { $status = $order->get_status(); if ('awaiting-shipment' === $status) { $actions['awaiting_shipment_icon'] = [ 'url' => '', 'name' => '📦', 'action' => 'view awaiting shipment icon', ]; } return $actions; } add_filter('woocommerce_admin_order_actions', 'wpicons_add_custom_status_icon', 100, 2);Таким образом вы можете расширять функционал WooCommerce под любые нужды.
Итоги и рекомендации
Добавление иконок к статусам заказов WooCommerce — простое, но очень полезное улучшение интерфейса. Оно помогает лучше ориентироваться в заказах и повышает удобство работы с магазином как для администраторов, так и для клиентов.
Начните с простых эмодзи или SVG, затем при необходимости добавьте кастомные статусы и иконки для них. Если хочется более удобных инструментов — обратите внимание на плагины из раздела WooCommerce на WPShop.ru.