Як поліпшити видимість атрибутів товарів в WooCommerce

19

Від автора: атрибути товару WooCommerce – дуже корисна функція, однак за замовчуванням вони приховані у нижній частині сторінки в розділі additional information. В деяких темах вони не видно, поки користувач не натисне на вкладку, а значить, багато користувачів не бачать їх. Іноді буває корисно розміщувати атрибути у верхній частині сторінки конкретного товару разом з категоріями. У цьому уроці я покажу, як пересунути атрибути товарів з вкладці additional information у верхню частину сторінки.

Як поліпшити видимість атрибутів товарів в WooCommerce

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

Для виконання уроку вам знадобиться:

Установка WordPress

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

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

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

Один або більше атрибутів товарів (вбудований атрибут color з шаблонними даними не працює)

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

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

Створити порожній плагін, і активувати його

Знайти в исходниках WooCommerce фільтр, який відповідає за вставку атрибутів товарів на вкладки в нижній частині сторінки

Додати функцію і прикріпити її до цього фільтру, щоб видалити вкладку для атрибутів

Знайти в исходниках WooCommerce хук, який витягує контент для верхньої частини сторінки

Прикріпити до нього свою функцію

Спочатку давайте розглянемо, як атрибути товарів відображаються за замовчуванням. Я створила атрибут size і додала йому 3 значення: small, medium і large. Ось так цей атрибут відображається в розділі additional information у нижній частині сторінки товару:

Як поліпшити видимість атрибутів товарів в WooCommerce

Нам потрібно пересунути ці атрибути з нижньої частини екрану в верхній лівий кут під опис товару.

Створення плагіна

У папці 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 при підключенні своєї функції, щоб вона запускалася після функцій, добавляющих вкладки. Збережіть файл і оновіть сторінку товару:

Як поліпшити видимість атрибутів товарів в WooCommerce

Вкладка видалена. Тепер потрібно повернути атрибути товару у верхню частину сторінки.

Пошук місця в коді для додавання атрибутів

І знову нам потрібно знайти місце в коді, куди можна вставити функцію відображення атрибутів товару. Іншими словами, нам потрібно знайти екшен хук.

Повертаємося в файл 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 до цього екшен хуку не прикріплене інших функцій. Оновіть сторінку товару:

Як поліпшити видимість атрибутів товарів в 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’ ] , ‘

‘. $attribute_label . ‘: ‘, ‘, ‘, ‘

‘);
}

Що робить код:

Створюється глобальна змінна $product (об’єкт нашої функції)

З допомогою $product->get_attributes() витягуються всі атрибути товару

Якщо атрибутів ні, нічого не відбувається

Якщо атрибути є, відкривається цикл foreach

Щоб отримати лейбл, використовуються функції wp_get_post_terms() і get_taxonomy(). Так витягується масив даних таксономії для цього поста

Потім на екран виводиться ім’я (label) таксономії (або атрибута), а після список посилань на архіви для кожного значення з допомогою get_the_term_list()

Атрибути відображаються списком:

Як поліпшити видимість атрибутів товарів в WooCommerce

Набагато краще!

Висновок

Щоб пересунути атрибути на сторінці товару, потрібно трохи зануритися у вихідний код WooCommerce і знайти шаблонні файли, хуки і функції, що відповідають за відображення атрибутів товару.

Знайшовши фільтр, що відповідає за висновок вкладок на екран, ми змогли видалити вкладку additional information разом з атрибутами. Далі за допомогою нової функції, прикріпленою до хуку, розташованому вище на сторінці, ми вивели атрибути в потрібному місці.