Як додати категорії товарів до Gutenberg блоків WooCommerce

Якщо ти використовуєш Gutenberg-блоки на своєму WordPress-сайті із WooCommerce, то напевно вже неодноразово задавався/лась питанням: а чому немає опції відображення категорій у кожному товарі, якщо сітка товарів виведена за допомогою Gutenberg-блоків для WooCommerce – "Новітні товари", "Товари з найвищим рейтингом" та інших, які виводять сітку товарів?

Справді, стандартна сітка товарів WooCommerce виглядає отак:

Стандартний вигляд сітки товарів WooCommerce

І абсолютно такий самий вигляд має сітка товарів, виведена за допомогою Gutenbеrg-блоків. Сьогодні ми поговоримо саме про Gutenberg-сітку товарів, оскільки після наших наступних маніпуляцій вигляд товару у стандартній сітці не зміниться. Хук, який ми зараз використаємо, діє лише на Gutenberg-блоки.

Код для відображення категорії у Gutenberg-блоках для WooCommerce

Отже, як я вже проговорився – будемо використовувати хук WooCommerce – woocommerce_blocks_product_grid_item_html. Спочатку покажу сам код, який потрібно вставити у файл functions.php твоєї теми або будь-який інший PHP-файл, який приймає участь у роботі сайту:

add_filter('woocommerce_blocks_product_grid_item_html', function ($html, $data, $product) {
	$categories = [];
	foreach ($product->category_ids as $cat_id) {
		$cat_name = get_term_by('id', $cat_id, 'product_cat', 'ARRAY_A')['name'];
		$cat_url = get_term_link((int)$cat_id, 'product_cat');
		$categories[] = "<a class='wc-block-grid__product-categories' href=\"{$cat_url}\">{$cat_name}</a>";
	}
	$categories = implode(', ', $categories);
	return "<li class=\"wc-block-grid__product\">
				<a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
					{$data->image}
					{$data->title}
				</a>
				<div class='product_footer'>
					<div class='product_details'>
						{$data->badge}
						{$categories}
						{$data->price}
						{$data->rating}
					</div>
					{$data->button}
				</div>
			</li>";
}, 10, 3);

А тепер поясню. Хук викликає функцію, параметрами якої є три елементи: готовий html-код поточного елемента сітки товарів (тобто одного товару) – $html, об'єкт із даними про товар, які будуть передані далі для формування html-коду для товару – $data, та основний об'єкт товару $product.

Якщо подивитися стандартний вивід змінної $data, то побачимо щось приблизно отаке:

stdClass Object
(
    [permalink] => https://ua-woocommerce.test/product/%d0%bc%d0%be%d0%b1%d1%96%d0%bb%d1%8c%d0%bd%d0%b8%d0%b9-%d1%82%d0%b5%d0%bb%d0%b5%d1%84%d0%be%d0%bd-apple-iphone-14-pro-max-128gb-deep-purple-mq9t3rx-a/
    [image] => <div class="wc-block-grid__product-image"><img width="324" height="324" src="https://ua-woocommerce.test/wp-content/uploads/2023/03/284920878-324x324.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="Мобільний телефон Apple iPhone 14 Pro Max 128GB Deep Purple (MQ9T3RX/A)" decoding="async" loading="lazy" srcset="https://ua-woocommerce.test/wp-content/uploads/2023/03/284920878-324x324.jpg 324w, https://ua-woocommerce.test/wp-content/uploads/2023/03/284920878-100x100.jpg 100w, https://ua-woocommerce.test/wp-content/uploads/2023/03/284920878-150x150.jpg 150w" sizes="(max-width: 324px) 100vw, 324px" /></div>
    [title] => <div class="wc-block-grid__product-title">Мобільний телефон Apple iPhone 14 Pro Max 128GB Deep Purple (MQ9T3RX/A)</div>
    [rating] => 
    [price] => <div class="wc-block-grid__product-price price"><span class="woocommerce-Price-amount amount">52,999.00<span class="woocommerce-Price-currencySymbol">&#8372;</span></span></div>
    [badge] => 
    [button] => <div class="wp-block-button wc-block-grid__product-add-to-cart"><a href="?add-to-cart=17" aria-label="Додайте &ldquo;Мобільний телефон Apple iPhone 14 Pro Max 128GB Deep Purple (MQ9T3RX/A)&rdquo; до кошика" data-quantity="1" data-product_id="17" data-product_sku="" rel="nofollow" class="wp-block-button__link wp-element-button add_to_cart_button ajax_add_to_cart">Додати в кошик</a></div>
)

Як бачиш, жодного натяку на категоріїї тут немає. Ось цю ситуацію ми й виправляємо в наступному кроці. Ми беремо ID всіх категорій із об'єкту товару $product за допомогою $product->category_ids та проганяємо їх через цикл foreach, зберігаючи в результаті готовий html-код посилання на категорію.

А далі просто повертаємо змінений html-код, витягуючи необхідні дані з об'єкта $data. Результат виконання даного хука ось:

Результат роботи хука