Вкладки (табы) на странице товара в 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.