Полное руководство по хлебным крошкам в WooCommerce

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

WooCommerce включает базовый функционал хлебных крошек, но вы можете настроить их отображение, внешний вид и поведение.

1. Включение хлебных крошек в WooCommerce

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

Шаги для включения:

Проверьте, поддерживает ли ваша тема хлебные крошки (часто можно включить в настройках темы)
Если нет - добавьте вручную в нужный файл темы

Добавление в файл темы (например, header.php):

<?php
if (function_exists('woocommerce_breadcrumb')) {
    woocommerce_breadcrumb();
}
?>

2. Кастомизация хлебных крошек

Используйте фильтры WooCommerce для изменения текста и поведения хлебных крошек.

Изменение разделителя:

add_filter('woocommerce_breadcrumb_defaults', 'custom_breadcrumb_separator');
function custom_breadcrumb_separator($defaults) {
    $defaults['delimiter'] = ' > '; // Замените на нужный символ
    return $defaults;
}

Изменение названия главной страницы:

add_filter('woocommerce_breadcrumb_defaults', 'custom_breadcrumb_home_text');
function custom_breadcrumb_home_text($defaults) {
    $defaults['home'] = 'Главная'; // Ваш текст
    return $defaults;
}

3. Скрытие хлебных крошек

Можно скрыть хлебные крошки на определенных страницах.

Пример: скрытие на главной странице

add_action('template_redirect', 'disable_breadcrumbs_on_homepage');
function disable_breadcrumbs_on_homepage() {
    if (is_front_page()) {
        remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20);
    }
}

4. Стилизация хлебных крошек

Используйте CSS для изменения внешнего вида хлебных крошек.

Пример CSS стилей:

.woocommerce-breadcrumb {
    font-size: 14px;
    color: #555;
    padding: 10px 0;
}

.woocommerce-breadcrumb a {
    color: #0073aa;
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
    color: #333;
    text-decoration: underline;
}

.woocommerce-breadcrumb .delimiter {
    margin: 0 5px;
    color: #999;
}

5. Удаление хлебных крошек

Полное удаление хлебных крошек со всех страниц.

remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20);

Заключение

Хлебные крошки в WooCommerce — важный элемент навигации, который можно:

Включить или отключить
Полностью кастомизировать
Стилизовать под дизайн сайта
Управлять их отображением на разных страницах

Используя стандартные функции WooCommerce или сторонние плагины, вы можете создать удобную навигацию для пользователей вашего магазина.

Хлебные крошки в WooCommerce