Как добавить заголовок товара woocommerce в хук woocommerce_breadcrumb в function.php

Вопрос или проблема

/**
 * Изменение некоторых параметров по умолчанию в хлебных крошках
 */
add_filter('woocommerce_breadcrumb_defaults', 'jk_woocommerce_breadcrumbs');
function jk_woocommerce_breadcrumbs()
{
    if (is_product_category()) {
        global $wp_query;

        // получить объект запроса
        $cat = $wp_query->get_queried_object();

        // получить ID миниатюры, используя ID категории
        $thumbnail_id = get_term_meta($cat->term_id, 'banner', true);

        // получить URL изображения
        $image = wp_get_attachment_url($thumbnail_id);

        // вывести IMG HTML
        echo "";
        return array(
            'delimiter'   => ' / ',
            'wrap_before' => '<div class="c-main-banner c-main-banner--inner no-overlay w-100" style="background-image: url(' . $image . '"><div class="container"><ol>',
            'wrap_after'  => '</ol></div></div>',
            'before'      => '<li>',
            'after'       => '</li>',
            'home'        => _x('Home', 'breadcrumb', 'woocommerce'),
        );
    }
}

<div class="c-main-banner c-main-banner--inner no-overlay w-100" style="background-image: url( category banner image as background );">
    <div class="container">
        <ol class="c-breadcrumb">
                <li><a href="breadcrumb slug"> breadcrumb-name </a></li>
        </ol>
        <div class="c-banner-content d-flex align-items-start justify-content-end flex-wrap flex-column">
            <big> woocommerce-products-header-title </big>
        </div>
    </div>
</div>

woocommerce_breadcrumb();

global $product;
echo $product->name;

Ответ или решение

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

Теория

Когда вы работаете с WooCommerce, важно понимать, как функционируют эти плагины, включая хуки и фильтры. WooCommerce предоставляет множество хуков и фильтров, которые позволяют модифицировать практически все аспекты интернет-магазина. В данном случае мы рассмотрим конкретный хук woocommerce_breadcrumb, предназначенный для изменения вывода навигационной цепочки (breadcrumbs).

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

Пример

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

Для выполнения этой задачи, первый вызов вашего кода должен убедиться, что он находится на странице категории продуктов. Ваш пример кода уже содержит логику для проверки этого условия с использованием функции is_product_category().

Чтобы добавить заголовок продукта в этой секции, вам нужно будет сделать следующее:

1. Определить местоположение, где будет размещаться заголовок.
2. Получить заголовок из объекта продукта.
3. Вывести заголовок в нужном месте HTML кода.

Применение

Давайте рассмотрим, как добавить заголовок продукта после части с '<big>', как требуется. Мы можем использовать глобальный объект $product для извлечения названия продукта.

add_filter('woocommerce_breadcrumb_defaults', 'custom_woocommerce_breadcrumbs');
function custom_woocommerce_breadcrumbs()
{
    if (is_product_category()) {
        global $wp_query, $product;

        // Получаем объект запроса
        $cat = $wp_query->get_queried_object();

        // Получаем ID баннера для категории
        $thumbnail_id = get_term_meta($cat->term_id, 'banner', true);

        // Получаем URL изображения
        $image = wp_get_attachment_url($thumbnail_id);

        // Формируем HTML с цепочкой навигации и баннером.
        $breadcrumb_html = '<div class="c-main-banner c-main-banner--inner no-overlay w-100" style="background-image: url(' . $image . ')">';
        $breadcrumb_html .= '<div class="container">';
        $breadcrumb_html .= '<ol class="c-breadcrumb">';

        // Включаем стандартный механизм вывода цепочки WooCommerce
        $breadcrumb_html .= woocommerce_breadcrumb(['delimiter' => ' / ', 'wrap_before' => '', 'wrap_after' => '', 'before' => '<li>', 'after' => '</li>', 'home' => _x('Home', 'breadcrumb', 'woocommerce')]);

        $breadcrumb_html .= '</ol>';

        // Добавление заголовка продукта
        if(is_product()) {
            // Используем метод получения заголовка
            $product_name = $product->get_title();
            $breadcrumb_html .= '<div class="c-banner-content d-flex align-items-start justify-content-end flex-wrap flex-column">';
            $breadcrumb_html .= '<big>' . esc_html($product_name) . '</big>';
            $breadcrumb_html .= '</div>';
        }

        $breadcrumb_html .= '</div></div>';

        // Выводим HTML
        echo $breadcrumb_html;
    }
}

Вывод

В приведенном примере показано, как аккуратно внедрить заголовок продукта в структуру навигационной цепочки на странице категории. Код с применением глобального объекта $product позволяет извлечь и отобразить название продукта там, где это необходимо. Обратите внимание, что проверка is_product() используется для определения текущей страницы, это важно, чтобы код работал корректно только на нужных страницах. Это решение оптимально для задач, где требуется акцент на продуктовом заголовке прямо в баннере категории.

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