Плагін WooCommerce WordPress: показ категорій, підкатегорій і товарів окремим списком

Від автора: в плагіні WooCommerce WordPress є кілька варіантів того, що можна відобразити на сторінках архіву. Коли я налаштовую інтернет-магазин, я зазвичай вибираю третій варіант: товари і категорії/підкатегорії. Це означає, що відвідувачі мого магазину можуть вибрати товари прямо з домашньої сторінки, або ж перейшовши в архів категорій товарів.

В плагіні WooCommerce WordPress є кілька варіантів того, що можна відобразити на сторінках архіву:

Коли я налаштовую інтернет-магазин, я зазвичай вибираю третій варіант: товари і категорії/підкатегорії. Це означає, що відвідувачі мого магазину можуть вибрати товари прямо з домашньої сторінки, або ж перейшовши в архів категорій товарів.

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

У цьому уроці я покажу вам, як відобразити категорії окремим списком перед товарами. Нам потрібно виконати наступні кроки:

Перед початком роботи ви повинні встановити плагін WooCommerce і додати товари, категорії та підкатегорії.

Що нам потрібно

У роботі нам потрібні:

Перед тим як почати: Налаштування за замовчуванням

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

Тепер поглянемо, як WooCommerce відображає категорії товарів і самі товари на сторінках архіву. Якщо ви ще цього не зробили, то перейдіть WooCommerce > Settings, виберіть вкладку Products, виберіть опцію Display. Для опцій Shop Page Default Display і Category Display поставте Show both.

Збережіть зміни і перейдіть на сторінку магазину. Моя виглядає так:

Так як у мене всього три категорії і зображення товарів і категорій одного розміру, то все виглядає досить акуратно. А нижче вже показана одна з категорій:

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

Визначаємо яку ділянку коду WooCommerce відповідає за виведення категорій і підкатегорій на сторінках архіву

Спочатку необхідно з’ясувати, як плагін відображає категорії та підкатегорії. Давайте покопаємося
в исходниках WooCommerce і знайдемо відповідну функцію.

Для відображення сторінок архіву плагін використовує файл archive-product.php, який зберігається в папці templates. У файлі знаходиться наступний код, який відповідає за виведення категорій товарів:

Отже, перед запуском циклу на висновок товарів у нас є функція woocommerce_product_subcategories(), що відповідає за відображення категорій і підкатегорій.

Ця функція замінна, що означає, що ми можемо переписати її в нашій темі. На жаль, даний спосіб працює не зовсім коректно, так як в плагіні прописані стилі для очищення товарів, які з’являються на початку рядка за замовчуванням.

Замість цього ми відключимо відображення категорій і підкатегорій на сторінках архіву так, щоб там залишилися тільки товари. Потім ми створимо нову функцію, яка буде показувати категорії та підкатегорії і прикріпимо її в екшен 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 ‘

‘;
foreach ( $terms as $term ) {
echo ‘
• ‘;
  woocommerce_subcategory_thumbnail( $term );
  echo ‘

  ‘;
  echo ‘slug . ‘”>’;
  echo $term->name;
  echo “;
  echo ‘

  ‘;
  echo ‘

‘;
}
echo ‘

‘;
}

Розберемо, що робить наша функція:

Збережіть файл і оновіть сторінку магазину. Моя головна сторінка виглядає так:

Категорії показуються, але залишилось додати трохи стилів. Зробимо це.

Стилі для списку категорій

Тепер необхідно додати стилі. В наш плагін необхідно додати файл стилів, який потрібно поставити в чергу. У папці плагіна створіть папку CSS, а всередині неї створіть файл style.css. Код нижче додайте в файл плагіна перед створеної нами функцією:

function tutsplus_product_cats_css() {
/* реєструємо стилі */
wp_register_style( ‘tutsplus_product_cats_css’, plugins_url( ‘css/style.css’, __FILE__ ) );
/* ставимо в чергу */
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;
}
}

Ширину і зовнішні відступи я взяв із стилів плагіна. Оновіть ще раз головну сторінку. Ось так вийшло у мене:

Категорія Music:

На маленьких екранах сторінка виглядає так:

Висновок

Категорії товарів плагіна WooCommerce відмінна річ. Однак те, як вони відображаються не завжди виглядає добре. У цьому уроці ви дізналися, як створити плагін, який буде виводити категорії та підкатегорії окремо від списку товарів. Також ви додали стилі до списку категорій.

Даний код можна використовувати для виводу списку категорій і підкатегорій в будь-якому місці на сторінці (наприклад, нижче списку товарів). Для цього необхідно прикріпити нашу функцію відображення категорій до екшену у файлі шаблону WooCommerce.