Дотримуючись цього посібника, ви зможете створити власний шаблон архіву WooCommerce, який може показувати категорії продуктів та продукти.
Водночас ви також можете використовувати опцію Відображення сторінки магазину та опцію Відображення сторінки категорії, щоб керувати, коли показувати категорії чи продукти.
Крок 1: Підготовка продуктів та категорій продуктів
Переконайтеся, що ваші створені категорії продуктів включають підкатегорії. Додайте деякі продукти та призначте їх різним категоріям продуктів. Найкраще, якщо ви зможете додати деякі зображення для кожної категорії, ми також виведемо їх у шаблоні.
Крок 2: Створення архіву WooCommerce
Не забудьте вибрати правильний тип шаблону (WooCommerce – Архів продуктів)
Якщо ви не знайомі з архівом продуктів Esl, ви можете дізнатися більше про них тут.
Встановіть умови для шаблону в Налаштуваннях > Налаштування шаблону > Умови, щоб він застосовувався під час перегляду сторінки магазину WooCommerce та архівів категорій продуктів та тегів.
Вам потрібно створити 2 різні цикли запитів, і ми будемо використовувати умову, щоб динамічно відображати їх у фактичному фронтенді. У наведеному прикладі були створені 2 секції: 1 для циклу категорій продуктів і 1 для циклу продуктів.
Крок 3: Секція категорій продуктів
Важливо: Ви повинні увімкнути виконання коду при використанні динамічного тегу echo. Також переконайтеся, що імена функцій додані в хук esl/code/echo_function_names. Довідка: Перегляд коду
Для динамічного відображення категорій продуктів вам потрібно буде використовувати функцію PHP get_queried_object_id() в полі батька. Просто використайте динамічний тег Esl echo та встановіть {echo:get_queried_object_id} у полі батька, як показано нижче.
Крім того, ми також використовуватимемо функцію PHP woocommerce_get_loop_display_mode() з WooCommerce, щоб умовно відображати цю секцію.
woocommerce_get_loop_display_mode() буде повертати або продукти, підкатегорії, або обидва (у рядку) на основі ваших налаштувань.
Давайте встановимо умову для розділу категорій таким чином:
Використовуйте {echo:woocommerce_get_loop_display_mode} != products
Ось налаштування для циклічних зображень і тексту мого прикладу.{woo_product_cpp_image} для виводу зображення категорії. {term_name:link} для виводу тексту категорії з посиланням
Крок 4: Розділ Продукти
Налаштування запитів для продуктів досить прості, просто контролюйте, скільки постів на сторінці буде.
Давайте встановимо умову для розділу продуктів таким чином:
Використовуйте {echo:woocommerce_get_loop_display_mode} != subcategories
Ось налаштування для циклічного продукту для вашого ознайомлення. (Зосередьтеся тільки на динамічній мітці, яку я використав замість стилю)
Якщо ваш продукт має декілька вибраних категорій, але ви хочете вивести лише першу вибрану категорію, щоб зелена коробка не була занадто великою, ви можете використати цю просту користувацьку функцію. Просто замініть {post_terms_product_cat} на {echo:product_first_category_name}
// Розмістіть у функціях child theme functions.php// Повертає назву першої категорії продуктуfunction product_first_category_name() {global $product;if( $product && is_a( $product, 'WC_Product' ) ) {// Отримуємо категорії продукту$terms = get_the_terms( $product->get_id(), 'product_cat' );$cats = [];// Проходимо по категоріях і додаємо їх до масиву $catsforeach( $terms as $term ) {$cats[] = $term->name;}// Повертаємо першу категоріюif( ! empty($cats) ) {ob_start();echo $cats[0];return ob_get_clean();}}}Перевірте результат
Тепер ваша сторінка магазину та сторінки категорій продуктів повинні працювати так, як очікувалося. Ви завжди можете контролювати, коли відображати розділ категорій продуктів і розділ продуктів через налаштування в панелі керування WordPress під Зовнішній вигляд > Налаштування > WooCommerce > Каталог продуктів