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

19

Від автора: WooCommerce пропонує кілька варіантів відображення контенту на сторінках архівних: товари, категорії (на головній сторінці магазину) або підкатегорії (на сторінках категорій) і товари, і категорії. При налаштуванні магазину я зазвичай вибираю третій варіант – WooCommerce товар списком і категорії/підкатегорії. Так відвідувачі мого магазину можуть вибирати товари прямо з домашньої сторінки або встановити більш чіткий пошук через архів категорій товарів.

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

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

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

Знайти в WooCommerce код, що відповідає за висновок категорій і підкатегорій на архівні сторінки у вигляді списку

Створити плагін для нашого коду

Написати функцію вставки категорій і підкатегорій перед списком товарів

Стилізувати виводиться розмітку

Перш ніж приступити вам необхідно мати установку WooCommerce з доданими товарами, категоріями і підкатегоріями.

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

Для виконання уроку вам буде потрібно:

Установка WordPress

Редактор коду

Встановлений і активоване WooCommerce

Товари – я імпортувала шаблонні товари з WooCommerce

Активована тема, сумісна з WooCommerce – я використовую Storefront

Перш ніж приступити: стандартні опції

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

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

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

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

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

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

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

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

У цій категорії міститься 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. Збережіть зміни.

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

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

Файл плагіна вставте цей код:

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 ‘

‘;
}

Що робить ця функція:

Функція визначає поточний запитаний об’єкт і зберігає його ID в змінну $parentid.

Функція get_terms() визначає батьківські терміни у поточного потрібного об’єкта. Якщо це домашня сторінка, повернуться категорії верхнього рівня; якщо це архів категорій, повернуться підкатегорії.

Потім перевірка, чи є якісь терміни перед відкриттям циклу foreach і тега ul.

Під кожен термін створюється окремий тег li, а функція woocommerce_subcatgeory_thumbnail() виводить зображення категорій. Слідом йде назва категорії в посиланні на архів.

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

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

Категорії відображаються, але їм потрібно написати стилі. Приступимо.

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

Тепер необхідно додати стилі. В наш плагін необхідно додати файл стилів, який потрібно поставити в чергу. У папці плагіна створіть папку 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. Перейдіть на головну сторінку ще раз. Моя виглядає так:

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

Архів категорії music:

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

Ось так сторінка відображається на маленьких екранах:

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

Висновок

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

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