Від автора: WooCommerce пропонує кілька варіантів відображення контенту на сторінках архівних: товари, категорії (на головній сторінці магазину) або підкатегорії (на сторінках категорій) і товари, і категорії. При налаштуванні магазину я зазвичай вибираю третій варіант – WooCommerce товар списком і категорії/підкатегорії. Так відвідувачі мого магазину можуть вибирати товари прямо з домашньої сторінки або встановити більш чіткий пошук через архів категорій товарів.
Тим не менш, у цього підходу є один мінус: категорії/підкатегорії відображаються разом без будь-якого поділу. Тобто якщо у ваших товарів зображення різних розмірів, макет сторінки буде виглядати просто жахливо. І навіть якщо зображення одного розміру, але хоча б в одному рядку архівної сторінки містяться категорії і товари, то кнопка «Додати в кошик» для категорій збиває всю верстку. Не всі елементи одного розміру.
У цьому уроці я покажу, як відобразити категорії в окремому списку перед товарами. Для цього нам необхідно виконати 4 кроки:
Знайти в WooCommerce код, що відповідає за висновок категорій і підкатегорій на архівні сторінки у вигляді списку
Створити плагін для нашого коду
Написати функцію вставки категорій і підкатегорій перед списком товарів
Стилізувати виводиться розмітку
Перш ніж приступити вам необхідно мати установку WooCommerce з доданими товарами, категоріями і підкатегоріями.
Що вам знадобиться
Для виконання уроку вам буде потрібно:
Установка WordPress
Редактор коду
Встановлений і активоване WooCommerce
Товари – я імпортувала шаблонні товари з WooCommerce
Активована тема, сумісна з WooCommerce – я використовую Storefront
Перш ніж приступити: стандартні опції
Давайте поглянемо, що дає нам WooCommerce за замовчуванням. Я почала з додавання зображень у категорії та підкатегорії товарів, так як шаблонні дані WooCommerce йдуть без них. Я просто використала по одному зображенню товарів для кожної категорії/підкатегорії (див. скріншот нижче):
Тепер давайте подивимося, як WooCommerce відображає категорії та підкатегорії товарів на архівних сторінках. Якщо ще не перейшли, перейдіть в WooCommerce > Settings, вкладка products, опція display. Для Shop Page Default Display і Category Display виберіть show both:
Натисніть save changes, щоб зберегти параметри та перейдіть на сторінку магазину. Мій виглядає так:
У мене все виглядає добре, так як у мене всього 3 категорії товарів, а розміри категорій такі ж, як у товарів. Але ось так виглядає один з архівів категорій товарів:
У цій категорії міститься 2 підкатегорії, тому перший товар знаходиться з ними на одному рядку в сітці з трьох елементів по ширині. Я хочу виділити мій категорії/підкатегорії, просто відокремивши їх від товарів. Давайте приступимо.
Знаходимо код WooCommerce, що відповідає за висновок категорій і товарів в архіви
Перше, що необхідно зробити, це визначити, як WooCommerce виводить категорії та підкатегорії на екран. Давайте пошукаємо відповідну функцію в исходниках WooCommerce.
Для відображення архівних сторінок WooCommerce використовує файл archive-product.php у папці templates. У цьому файлі лежить наступний код, який виводить категорії і товари:
Тут є функція woocommerce_product_subcategories(), яка виводить категорії або підкатегорії перед запуском циклу, що виводить товари.
Функція колективна, тобто ми можемо переписати її в нашій темі. На жаль це не зовсім працює, так як WooCommerce містить вбудовані стилі з очищенням елементів, які з’являються на початку рядка зі стандартним відображенням.
Замість цього ми вимкнемо відображення категорій і підкатегорій на архівних сторінках, щоб там відображалися тільки товари. Далі створимо нову функцію виведення категорій/підкатегорій товарів і підключимо її до екшену woocommerce_before_shop_loop. Нашої функції необхідно задати високий пріоритет, щоб вона запускалася останньої.
Зверніть увагу: так як WooCommerce очищає стилі кожного третього товару в списку, то ми не зможемо використовувати функцію woocommerce_product_subcategories() або її відредаговану версію для відображення категорій. Вона буде чистити третю, шосту (і т. д.) категорію або товар у списку, навіть при виклику цієї функції для роздільного відображення категорій. Її можна переписати, але простіше написати свою функцію. Давайте створимо плагін.
Створення плагіна
У папці wp-content/plugins створіть нову папку з унікальною назвою. Я назвала свою папку tutsplus-separate-products-categories-in-archives. У ній створіть новий файл з унікальною назвою. Я використовувала те ж саме ім’я tutsplus-separate-products-categories-in-archives.php. Відкрийте файл і вставте наступний код:
Ви можете виправити дані про автора, це ж ваш плагін. Збережіть файл і встановіть плагін через панель адміністратора WordPress.
Написання своєї функції
Тепер давайте напишемо свою функцію. Але перед цим вимкніть відображення категорій в панелі адміністратора. Перейдіть WooCommerce > Settings у вкладку Products і виберіть опцію Display. Для опцій Shop Page Default Display і Category Display встановіть Show products. Збережіть зміни.
Тепер ваша сторінка магазину повинна виглядати приблизно так:
Файл плагіна вставте цей код:
function tutsplus_product_subcategories( $args = array() ) {
}
}
add_action( ‘woocommerce_before_shop_loop’, ‘tutsplus_product_subcategories’, 50 );
Всередину функції вставте цей код:
$parentid = get_queried_object_id();
$args = array(
‘parent’ => $parentid
);
$terms = get_terms( ‘product_cat’, $args );
if ( $terms ) {
echo ‘
- ‘;
- ‘;
woocommerce_subcategory_thumbnail( $term );
echo ‘‘;
echo ‘slug . ‘”>’;
echo $term->name;
echo “;
echo ‘‘;
echo ‘
foreach ( $terms as $term ) {
echo ‘
‘;
}
echo ‘
‘;
}
Що робить ця функція:
Функція визначає поточний запитаний об’єкт і зберігає його ID в змінну $parentid.
Функція get_terms() визначає батьківські терміни у поточного потрібного об’єкта. Якщо це домашня сторінка, повернуться категорії верхнього рівня; якщо це архів категорій, повернуться підкатегорії.
Потім перевірка, чи є якісь терміни перед відкриттям циклу foreach і тега ul.
Під кожен термін створюється окремий тег li, а функція woocommerce_subcatgeory_thumbnail() виводить зображення категорій. Слідом йде назва категорії в посиланні на архів.
Збережіть файл і оновіть сторінку магазину. Моя головна сторінка виглядає так:
Категорії відображаються, але їм потрібно написати стилі. Приступимо.
Стилізація списків категорій
Тепер необхідно додати стилі. В наш плагін необхідно додати файл стилів, який потрібно поставити в чергу. У папці плагіна створіть папку CSS, всередині створіть файл style.css. Код нижче додайте в файл плагіна перед створеної нами функцією:
function tutsplus_product_cats_css() {
/* register the stylesheet */
wp_register_style( ‘tutsplus_product_cats_css’, plugins_url( ‘css/style.css’, __FILE__ ) );
/* enqueue the stylsheet */
wp_enqueue_style( ‘tutsplus_product_cats_css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘tutsplus_product_cats_css’ );
Цей код правильно поставить створені стилі в чергу. Відкрийте файл стилів і вставте код нижче. WooCommerce в стилях використовує підхід mobile first, ми теж будемо його використовувати.
ul.product-cats li {
list-style: none;
margin-left: 0;
margin-bottom: 4.236 em;
text-align: center;
position: relative;
}
ul.product-cats li img {
margin: 0 auto;
}
@media screen and (min-width:768px) {
ul.product-cats {
margin-left: 0;
clear: both;
}
ul.product-cats li {
width: 29.4117647059%;
float: left;
margin-right: 5.8823529412%;
}
ul.product-cats li:nth-of-type(3) {
margin-right: 0;
}
}
Я взяла значення ширини та зовнішніх відступів прямо зі стилів WooCommerce. Перейдіть на головну сторінку ще раз. Моя виглядає так:
Архів категорії music:
Ось так сторінка відображається на маленьких екранах:
Висновок
Категорії товарів WooCommerce – чудовий інструмент. Однак вони не завжди ідеально відображаються на екрані. У цьому уроці ви дізналися, як створити плагін для виводу категорій і підкатегорій окремо від списку товарів. Також ви додали стилі до списку категорій.
Даний код можна використовувати для виводу списку категорій і підкатегорій в будь-якому місці на сторінці (наприклад, нижче списку товарів). Для цього необхідно прикріпити нашу функцію відображення категорій до екшену у файлі шаблону WooCommerce.
