Від автора: атрибути товару WooCommerce – дуже корисна функція, однак за замовчуванням вони приховані у нижній частині сторінки в розділі additional information. В деяких темах вони не видно, поки користувач не натисне на вкладку, а значить, багато користувачів не бачать їх. Іноді буває корисно розміщувати атрибути у верхній частині сторінки конкретного товару разом з категоріями. У цьому уроці я покажу, як пересунути атрибути товарів з вкладці additional information у верхню частину сторінки.
Що вам знадобиться
Для виконання уроку вам знадобиться:
Установка WordPress
Редактор коду
Встановлений і активоване WooCommerce
Додані товари – я імпортувала шаблонні товари з WooCommerce
Один або більше атрибутів товарів (вбудований атрибут color з шаблонними даними не працює)
Активована тема, сумісна з WooCommerce – я використовую Storefront
Щоб розмістити атрибути ближче до верхньої частини сторінки товару, нам необхідно виконати наступні кроки:
Створити порожній плагін, і активувати його
Знайти в исходниках WooCommerce фільтр, який відповідає за вставку атрибутів товарів на вкладки в нижній частині сторінки
Додати функцію і прикріпити її до цього фільтру, щоб видалити вкладку для атрибутів
Знайти в исходниках WooCommerce хук, який витягує контент для верхньої частини сторінки
Прикріпити до нього свою функцію
Спочатку давайте розглянемо, як атрибути товарів відображаються за замовчуванням. Я створила атрибут size і додала йому 3 значення: small, medium і large. Ось так цей атрибут відображається в розділі additional information у нижній частині сторінки товару:
Нам потрібно пересунути ці атрибути з нижньої частини екрану в верхній лівий кут під опис товару.
Створення плагіна
У папці wp-content/plugins створіть новий файл. Я назву його woocommerce-prominent-product-attributes.php. Відкрийте його і вставте наступний код:
Збережіть файл і перейдіть на екран plugins в панелі адміністратора WordPress. Активуйте плагін.
Вихідний код WooCommerce: відображення атрибутів товару
Давайте знайдемо функцію і хук, що відповідають за виведення атрибутів товару. Для цього нам знадобиться відкрити кілька файлів:
Шаблон сторінки товару woocommerce/templates/single-product.php
У цьому файлі є функція get_template_part(), що викликає файл content-single-product.php
У цьому файлі є екшен woocommerce_after_single_product_summary, до нього прикріплено 3 функції (нам потрібна woocommerce_output_product_data_tabs())
Функція woocommerce_output_product_data_tabs() лежить у файлі woocommerce/includes/wc-template-functions.php
Ця функція за допомогою wc_get_template() отримує іншу частину шаблону з файлу wooocommerce/templates/single-product/tabs/tabs.php
У цьому файлі (майже добралися, обіцяю!) є змінна $tabs, яка задається через apply_filters( ‘woocommerce_product_tabs’, array() );
Для видалення вкладки атрибутів нам необхідно створити функцію видалення цієї вкладки і прикріпити її до фільтру woocommerce_product_tabs
Фух! Добралися.
Видалення атрибутів товару з вкладок за допомогою фільтра
Нам пощастило: у документації WooCommerce є керівництво з видалення вкладок за допомогою цього фільтра. Це спростить нам життя. Вставте цей код у файл плагіна:
/**
* Removes the “Additional Information” tab that displays the product attributes.
*
* @param array $tabs WooCommerce tabs to display.
*
* @return array WooCommerce tabs to display, minus “Additional Information”.
*/
function tutsplus_remove_product_attributes_tab( $tabs ) {
unset( $tabs[‘additional_information’] );
return $tabs;
}
add_filter( ‘woocommerce_product_tabs’, ‘tutsplus_remove_product_attributes_tab’, 100 );
У функції є об’єкт $tabs – змінної ми і будемо працювати. Вона видаляє вкладку ‘additional information’ з масиву значень, що зберігаються в змінній $tabs. Зверніть увагу, я використовував високий пріоритет 100 при підключенні своєї функції, щоб вона запускалася після функцій, добавляющих вкладки. Збережіть файл і оновіть сторінку товару:
Вкладка видалена. Тепер потрібно повернути атрибути товару у верхню частину сторінки.
Пошук місця в коді для додавання атрибутів
І знову нам потрібно знайти місце в коді, куди можна вставити функцію відображення атрибутів товару. Іншими словами, нам потрібно знайти екшен хук.
Повертаємося в файл content-single-product.php. У ньому є хук woocommerce_single_product_summary, який задіяний у семи функції, кожна з яких виводить на екран різні частини інформації про товар:
Заголовок
Рейтинг
Ціна
Витримка (короткий опис)
Кнопка Додати в кошик
Метадані
Посилання для соціальних мереж
Я хочу додати атрибути в секцію з метаданими. Давайте знайдемо функцію, що відповідає за це. Це функція wc_template_functions.php. З допомогою wc_get_template() вони підключає інший файл woocommerce/templates/single/product/meta.php.
У файлі meta.php є ділянка коду, що відображає метадані товару. Вона знаходиться перед хуком woocommerce_product_meta_start і після хука woocommerce_product_meta_end. Один з цих хуків можна задіяти для відображення атрибутів товару. Давайте візьмемо останній, так атрибути будуть показуватися після категорій і тегів.
Написання функції виводу атрибутів товару
Дублювання коду WooCommerce
Для виводу списку термінів таксономії нашого товару можна використовувати WooCommerce функцію list_attributes(). Вона лежить у файлі templates/single/product/tabs/additional-information.php. Вставте цей код у файлі плагіна:
/**
* Displays product attributes in the top right of the single product page.
*
* @param $product
*/
function tutsplus_list_attributes( $product ) {
global $product;
$product->get_attributes();
}
add_action( ‘woocommerce_product_meta_end’, ‘tutsplus_list_attributes’ );
Зауважте, вам не потрібно використовувати пріоритет, так як в WooCommerce до цього екшен хуку не прикріплене інших функцій. Оновіть сторінку товару:
Атрибути відображаються. Вони розміщені в інтерфейсі, схожому на вкладку в темі Storefront, так як було задано за замовчуванням на вкладці additional information. Виводиться HTML використовує таблицю стандартного макета.
Інший підхід без таблиці
Таблиці – не кращий спосіб. Краще щоб було 2 списку: список атрибутів товару та список категорій. Давайте переробимо.
WooCommerce зберігає атрибути у вигляді користувальницьких таксономій. Скорочення для кожного значення атрибута визначається з префіксом pa_, коли атрибут зберігається в базі даних.
Однак ці таксономії не зберігаються в таблицях wp_term_taxonomy і wp_terms, як при реєстрації звичайних користувальницьких класифікацій в WordPress. Замість цього WooCommerce створює таблиці атрибутів, тобто дані зберігаються по-іншому. Таким чином, нам доведеться придумати більш складний спосіб отримання лейблів для кожної таксономії при виводі списку.
Видаліть 2 рядки функції tutsplus_list_attributes(). Замініть їх на цей код:
global $product;
global $post;
$attributes = $product->get_attributes();
if ( ! $attributes ) {
return;
}
foreach ( $attributes as $attribute ) {
// Get the taxonomy.
$terms = wp_get_post_terms( $product->id, $attribute[ ‘name’ ], ‘all’ );
$taxonomy = $terms[ 0 ]->taxonomy;
// Get the taxonomy object.
$taxonomy_object = get_taxonomy( $taxonomy );
// Get the attribute label.
$attribute_label = $taxonomy_object->labels->name;
// Display the label followed by a clickable list of terms.
echo get_the_term_list( $post->ID, $attribute[ ‘name’ ] , ‘
‘);
}
Що робить код:
Створюється глобальна змінна $product (об’єкт нашої функції)
З допомогою $product->get_attributes() витягуються всі атрибути товару
Якщо атрибутів ні, нічого не відбувається
Якщо атрибути є, відкривається цикл foreach
Щоб отримати лейбл, використовуються функції wp_get_post_terms() і get_taxonomy(). Так витягується масив даних таксономії для цього поста
Потім на екран виводиться ім’я (label) таксономії (або атрибута), а після список посилань на архіви для кожного значення з допомогою get_the_term_list()
Атрибути відображаються списком:
Набагато краще!
Висновок
Щоб пересунути атрибути на сторінці товару, потрібно трохи зануритися у вихідний код WooCommerce і знайти шаблонні файли, хуки і функції, що відповідають за відображення атрибутів товару.
Знайшовши фільтр, що відповідає за висновок вкладок на екран, ми змогли видалити вкладку additional information разом з атрибутами. Далі за допомогою нової функції, прикріпленою до хуку, розташованому вище на сторінці, ми вивели атрибути в потрібному місці.
