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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ідентифікація коду WooCommerce, яка використовує вихідні категорії і продукти в колекції

Перший крок - визначити, як WooCommerce виводить категорії і підкатегорії. Отже, давайте зануримося в початковий код WooCommerce, щоб знайти відповідну функцію. 

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

Всередині цього файлу ви можете знайти код, який виводить категорії і продукти:

1

<?php

2

    /**

3

   * woocommerce_before_shop_loop hook

4

	 *

5

	 * @hooked woocommerce_result_count - 20

6

	 * @hooked woocommerce_catalog_ordering - 30

7

	*/

8

	do_action( 'woocommerce_before_shop_loop' );

9

?>

10

11

<?php woocommerce_product_loop_start(); ?>

12

13

    <?php woocommerce_product_subcategories(); ?>

14

15

	<?php while ( have_posts() ) : the_post(); ?>

16

17

		<?php wc_get_template_part( 'content', 'product' ); ?>

18

19

	<?php endwhile; // end of the loop. ?>

20

21

<?php woocommerce_product_loop_end(); ?>

Отже, є функція 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.

Відкрийте файл і додайте до нього ось цей код:

1

<?php

2

/**

3

 * Plugin Name: Tutsplus display WooCommerce products and categories/subcategories separately in archive pages

4

 * Plugin URI: https://code.tutsplus.com/tutorials/woocommerce-display-product-categories-subcategories-and-products-in-two-separate-lists--cms-25479

5

 * Description: Display products and catgeories / subcategories as two separate lists in product archive pages

6

 * Version: 1.0

7

 * Author: Rachel McCollin

8

 * Author URI: http://rachelmccollin.co.uk

9

 *

10

 *

11

 */

Можливо, ви захочете відредагувати дані автора, оскільки це ваш плагін, який пишете ви. Збережіть файл і активуйте плагін через адміністратор WordPress.

Написання нашої функції

Тепер давайте напишемо нашу функцію. Але, перш ніж розпочати, вимкніть списки категорій на екранах адміністратора. Перейдіть в WooCommerce > Settings, виберіть вкладку Products, а потім оберіть параметр Display. Для кожного із Shop Page Display і Default Category Display виберіть Show products. Збережіть внесені зміни.

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

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

1

function tutsplus_product_subcategories( $args = array() ) {

2

3

	}

4

}

5

add_action( 'woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50 );

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

1

$parentid = get_queried_object_id();

2

3

$args = array(

4

	'parent' => $parentid

5

);

6

7

$terms = get_terms( 'product_cat', $args );

8

9

if ( $terms ) {

10

11

	echo '<ul class="product-cats">';

12

13

		foreach ( $terms as $term ) {

14

15

			echo '<li class="category">';					

16

17

				woocommerce_subcategory_thumbnail( $term );

18

19

				echo '<h2>';

20

					echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';

21

						echo $term->name;

22

					echo '</a>';

23

				echo '</h2>';

24

25

			echo '</li>';

26

27

28

	}

29

30

	echo '</ul>';

31

32

}

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

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

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

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

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

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

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

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

1

function tutsplus_product_cats_css() {

2

3

    /* register the stylesheet */

4

    wp_register_style( 'tutsplus_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );

5

6

    /* enqueue the stylsheet */

7

    wp_enqueue_style( 'tutsplus_product_cats_css' );

8

9

}

10

11

add_action( 'wp_enqueue_scripts', 'tutsplus_product_cats_css' );

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

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

1

ul.product-cats li {

2

    list-style: none;

3

	margin-left: 0;

4

	margin-bottom: 4.236em;

5

	text-align: center;

6

	position: relative;

7

}

8

ul.product-cats li img {

9

	margin: 0 auto;	

10

}

11

12

@media screen and (min-width:768px) {

13

14

	ul.product-cats {

15

		margin-left: 0;

16

		clear: both;

17

	}

18

	ul.product-cats li {

19

		width: 29.4117647059%;

20

		float: left;

21

		margin-right: 5.8823529412%;

22

	}

23

	ul.product-cats li:nth-of-type(3) {

24

		margin-right: 0;

25

	}

26

27

}

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

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

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

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

Підсумок

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

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

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