Колись, роблячи магазин на WooCommerce, я хотів, щоб у сітці товарів під кожною назвою було видно категорію. У стандартних блоках «Новітні товари», «Товари з найвищим рейтингом» та інших такої опції не було, тож я написав для цього хук. Відтоді WooCommerce замінив ці блоки одним новим – «Колекція товарів» (Product Collection), і там категорію можна додати взагалі без коду. Тож розповім обидва способи: сучасний, у редакторі, і старий, з хуком, якщо на сайті ще залишилися старі блоки.

Що змінилося

Старі блоки сітки товарів були «монолітними»: картинка, назва, ціна і кнопка виводилися одним шматком HTML, і змінити його можна було лише кодом. Блок «Колекція товарів» зібраний інакше – з окремих вкладених блоків, які можна додавати, прибирати й переставляти, як звичайні абзаци.

Старі блоки WooCommerce приховав з меню вставки, тож нові сітки ти вже додаватимеш лише «Колекцією товарів». Там, де старі блоки вже стоять, вони й далі працюють.

Категорії в «Колекції товарів» без коду

  1. Додай на сторінку блок «Колекція товарів» і вибери, які товари показувати: новинки, товари зі знижкою, з найвищим рейтингом, певної категорії тощо.
  2. Клацни на назву будь-якого товару в сітці. Усі товари в колекції малюються за одним шаблоном (блок «Шаблон товару», Product Template), тож усе, що ти зміниш в одному, з'явиться в усіх.
  3. Натисни «+» під назвою товару і знайди блок «Категорії товарів» (Product Categories). Це варіант стандартного блоку термінів запису, тільки для категорій WooCommerce.
  4. Збережи сторінку.

Усе: під кожною назвою з'являться посилання на категорії товару. У налаштуваннях блоку праворуч можна задати роздільник між категоріями, текст перед ними (наприклад, «Категорія: ») і, як для будь-якого блоку, колір, розмір шрифту та відступи. Так само можна додати й позначки товару – блок «Позначки товарів».

Якщо сітки товарів у тебе в шаблонах магазину (сторінка каталогу, категорії), а не на окремих сторінках, відкрий Зовнішній вигляд → Редактор → Шаблони і зміни шаблон «Каталог товарів» (Product Catalog) – там та сама «Колекція товарів». Це працює в блокових темах; у класичних темах сторінки магазину й далі формують PHP-шаблони WooCommerce.

Старі блоки: хук woocommerce_blocks_product_grid_item_html

Якщо на сайті ще стоять старі блоки і переробляти їх на колекції поки не хочеться, категорії можна додати хуком. Ось як виглядає стандартна сітка товарів:

Стандартний вигляд сітки товарів WooCommerce

Старі блоки пропускають HTML кожного товару через фільтр woocommerce_blocks_product_grid_item_html. Він отримує три параметри: готовий HTML товару $html, об'єкт $data з окремими шматками (картинка, назва, ціна, рейтинг, кнопка) і сам товар $product.

Колись я в цьому фільтрі збирав HTML товару наново, вставляючи категорії в потрібне місце. Працювало, але будь-яка зміна розмітки в наступних версіях WooCommerce тихо зламала б сітку. Надійніше не перебудовувати все, а лише вставити категорії перед ціною:

function mytheme_grid_item_categories( $html, $data, $product ) {
    $categories = wc_get_product_category_list(
        $product->get_id(),
        ', ',
        '<div class="wc-block-grid__product-categories">',
        '</div>'
    );

    $position = $data->price ? strpos( $html, $data->price ) : false;

    if ( ! $categories || false === $position ) {
        return $html;
    }

    return substr_replace( $html, $categories, $position, 0 );
}

add_filter( 'woocommerce_blocks_product_grid_item_html', 'mytheme_grid_item_categories', 10, 3 );

Що тут відбувається:

  • wc_get_product_category_list() – готова функція WooCommerce, яка повертає категорії товару посиланнями через кому, вже з правильним екрануванням. Колись я робив те саме вручну циклом по category_ids, і назви категорій потрапляли в HTML без жодної перевірки.
  • strpos() шукає в HTML товару блок із ціною, а substr_replace() вставляє категорії прямо перед ним. Решта розмітки лишається такою, якою її зробив WooCommerce.
  • Якщо категорій немає або ціну не знайдено, функція нічого не змінює – краще нічого не додати, ніж зламати сітку.

Код вставляється у functions.php теми або в маленький власний плаґін. Результат виглядає так:

Категорії товару в сітці товарів WooCommerce

Цей фільтр діє лише на старі блоки. На «Колекцію товарів» і на стандартну сітку WooCommerce в PHP-шаблонах магазину він не впливає.

Що далі

Змінювати HTML будь-якого блоку під час виведення можна й універсальним фільтром render_block – як це працює, я показував на прикладі посилань на PDF у статті як змінити посилання на файли у WordPress. А щоб класична тема правильно показувала блоки, глянь, як підготувати класичну тему WordPress до Gutenberg. Ще одна задача для магазину на WooCommerce – як приховати товари, що входять у груповий товар.

Більше про це – за позначками WooCommerce та Gutenberg.

А ти вже перейшов/ла на «Колекцію товарів» чи на сайті ще живуть старі блоки? Пиши в коментарях 🙂