Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

Відображення категорій, підкатегорій і продуктів WooCommerce в окремих списках

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) translation by Elen (you can also view the original English article)

Final product image
What You'll Be Creating

WooCommerce дає вам декілька варіантів того, що ви можете відображати на сторінках своїх колекцій:

  • продукти
  • категорії (на головній сторінці магазину), або підкатегорії (на сторінках категорій)
  • продукти і категорії разом

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

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

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

Щоб це зробити, ми виконаємо чотири кроки:

  1. Визначте код, який використовує WooCommerce для виводу категорій і підкатегорій на сторінці колекції.
  2. Створіть плагін для нашого коду.
  3. Напишіть функцію для розміщення категорій, або підкатегорій перед списками продуктів.
  4. Задайте стиль виводу.

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

Що вам знадобиться

Щоб рухатись далі, вам потрібно буде:

  • Установка WordPress для розробки
  • Редактор коду
  • Установка і активація WooCommerce
  • Додані продукти: я імпортував дані фіктивного продукту, які поставляються з WooCommerce; для отримання детальної інформації, як це зробити, див. дану інструкцію.
  • Активна і сумісна тема з WooCommerce - я використовую Storefront.

Перед початком роботи: Параметри по замовчуванню

Давайте подивимось, що WooCommerce дає нам по замовчуванню.

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

Product categories screen in WordPress admin with category images added

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

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

WooCommerce product display settings screen

Натисніть кнопку Save changes, щоб зберегти налаштування та відвідати сторінку сайту вашого магазину. Мій результат виглядає ось так:

The main shop page without any changes

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

The Music category archive page without any changes

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

Ідентифікація коду 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 Display і Default Category Display виберіть Show products. Збережіть внесені зміни.

Тепер сторінка вашого магазину виглядатиме приблизно ось так:

The main shop page with just products displayed

В файлі свого плагіна додайте наступне:

Тепер додайте ось цей код всередину функції:

Давайте поглянемо, що робить ця функція:

  • Вона ідентифікує поточний викликаний об'єкт і визначає його id як $parentid.
  • Вона використовує get_terms() для визначення умов з поточним викликаним елементом в якості parent. Якщо це головна сторінка магазину, вона поверне категорії верхнього рівня, якщо це колекція категорій, вона поверне підкатегорії.
  • Далі вона перевіряє наявність будь-яких умов, перш ніж відкривати цикл foreach і елемент ul.
  • Для кожної умови вона створює елемент li, а потім виводить зображення категорії за допомогою woocommerce_subcatgeory_thumbnail(), за яким слідує назва категорії в посиланні на її колекцію.

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

Main shop page - categories are separate but too big and with list styling bullets etc

Відображаються категорії, але їм потрібен стиль. Давайте це зробимо.

Стилізація списків категорій

Для того, щоб нам додати стиль, нам потрібна таблиця стилів всередині нашого плагіна, яку нам потрібно буде поставити в чергу.

В своїй папці плагіна створіть папку css, а в ній створіть файл з іменем style.css.

Тепер, в вашому файлі плагіна, вище функції, яку ви створили, додайте наступне: 

Це коректно розміщує таблицю стилів, яку ви щойно створили.

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

Я скопіював точні розміри ширини і відступи стилю WooCommerce.

Тепер перевірте свою головну сторінку магазину. Ось моя:

The main shop page Categories are above products and styled consistently in a grid

Ось колекція категорії Music:

The Music archive Two subcategories are above the 3 wide grid of products

А ось як це виглядає на маленьких екранах:

The categories on narrower screens full width not in a grid

Підсумок

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

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

Якщо зараз ви запускаєте магазин, який бажаєте розширити, або шукаєте для навчання додаткові плагіни, пов'язані з WooCommerce, не вагайтесь та перегляньте плагіни, доступні на Envato Market.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.