Вкладки (таби) на сторінці товару у WooCommerce

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

Одна з частих змін – це додавання нового таба на сторінці товару, або видалення, зміна існуючих. Нижче я постараюсь коротко викласти, як це зробити.

Я розглядатиму лише варіант як редагувати таби без використання плагінів. Для таких простих дій вони не знадобляться. Все, що описано нижче, потрібно вносити у файл functions.php, який знаходиться у папці вашої теми.

Як створити нову вкладку

Новий таб – це зручний спосіб надати додаткову інформацію про товар. Код нижче допоможе зробити це.

/**
 * Новий таб для продуктів
 */
add_filter( 'woocommerce_product_tabs', 'rmn_woo_custom_tabs' );
function rmn_woo_custom_tabs($tabs) {
  $tabs['product_custom_tab'] = array(
    'title'    => __( ''Назва таба', 'mytheme' ), // Тут можна присвоїти простий рядок.
    'priority' => 30,                             // Визначає стан таба щодо інших.
    'callback' => 'rmn_custom_product_tab'        // Функція вмісту вкладки.
  );

  return $tabs;
}

function rmn_custom_product_tab() {
  // Описуємо, що має бути усередині вкладки, у разі – простий текст.
  echo '<p>Текст нової вкладки</p>';
}

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

Як видалити вкладку

Пам’ятаю, коли я вперше зіткнувся з WooCommerce, багато років тому удалити непотрібний таб зі сторінки я просто використавши display: none; у CSS, тоді я ще не знаю, що є найкращий спосіб.

/**
 * Видаляємо вкладки продуктів
 */
add_filter( 'woocommerce_product_tabs', 'rmn_woo_remove_tabs', 98 );

function 'rmn_woo_remove_tabs( $tabs ) {
  // Використовуємо функцію PHP unset для видалення елементів у масиві, що містить таби
  unset( $tabs['description'] );      	    // Видаляємо таб із описом
  unset( $tabs['reviews'] ); 	            // Видаляємо таб із відгуками
  unset( $tabs['additional_information'] ); // Видаляємо таб із додатковим описом. 

  return $tabs;
}

Як змінити порядок вкладок

Щоб змінити порядок табів, використовуйте код нижче.

/**
 * Зміна порядку табів
 */
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );

function woo_reorder_tabs( $tabs ) {

  $tabs['product_custom_tab']['priority'] = 10;     // Новий таб створінь вище буде першим,
  $tabs['description']['priority'] = 20;            // потім йде таб з описом товару,
  $tabs['reviews']['priority'] = 30;                // відгуки
  $tabs['additional_information']['priority'] = 40; // та останній таб з додатковим описом.

  return $tabs;
}

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