Как добавить свои вкладки (табы) в товар WooCommerce?

Привет! В этом коротком гайде мы покажем, как создать свои кастомные вкладки для товаров в Woocommerce без использования сторонних расширений.

Для начала установим плагин кастомных полей — «Advanced Custom Fields«. Его можно скачать бесплатно из магазина дополнений в WordPress.

Теперь перейдем к созданию самих полей. Создаем новую группу полей. Назвать ее можно как угодно. Внутри нее создадим поле типа «Редактор WordPress«. Ярлык может быть любым, а имя пишем транслитом и запоминаем. Получится что-то вроде этого:

Не забудьте и об условиях отображения. Выбираем «Тип записи» — «равно» — «Товар«.

Теперь можно сохранить изменения.

Для чего мы это сделали? Ответ прост. Теперь в каждой записи типа «Товар» в редакторе WordPress появилось поле «Для дизайнеров«. Заходим в любой товар и заполняем поле своей информацией.

Я заполнил поле списком из ссылок на загрузку файлов в расширении «.MAX» различных вариаций товара дизайн-радиатора «Odyssey». Сохраняем изменения.

Переходим к финальному шагу — настройка файла functions.php. В консоли находим «Внешний вид» — «Редактор тем» — «functions.php». Вставляем следующий код:

add_filter( 'woocommerce_product_tabs', 'custom_tab' );
function custom_tab( $tabs ) {	
	// Adds the new tab
	
	if (get_field('for_designers')):
	
	$tabs['test_tab_2'] = array(
		'title' 	=> __( 'Для дизайнеров', 'woocommerce' ),
		'priority' 	=> 52,
		'callback' 	=> 'custom_tab_content_2'
	);
	
	endif;
	
	return $tabs;
}

Что происходит выше? Выражаясь простым языком, мы добавляем новую вкладку «Для дизайнеров» в товар только в том случае, если это поле заполнено. Если оно не заполнено, мы ничего не добавляем. В квадратных скобках можете написать любое название вашего таба. В «callback» вставляем название функции, которая будет приведена ниже.

Мы добавили вкладку, которая выводится в товар при условии заполнения поля. Но где ее содержимое? Вставьте ниже следующий код.

function custom_tab_content() {

	// The new tab content

	the_field('for_designers');
	
}

В этом фрагменте мы выводим содержимое поля с именем «for_designers». Теперь можно сохранить изменения. В результате получаем следующее:

Если вы хотите вывести не одну, а несколько новых вкладок, то на месте комментария «Adds the new tab» в первом коде вставьте следующий фрагмент:

$tabs['test_tab_2'] = array(
		'title' 	=> __( 'Для дизайнеров', 'woocommerce' ),
		'priority' 	=> 52,
		'callback' 	=> 'custom_tab_content_2'
	);

Естественно, вам придется поменять название в квадратных скобках и «callback«. Ну и не забудьте создать новую функцию вывода содержимого, присвоив ей имя, соответствующее новому из «callback«.

У вас остались вопросы по материалу? Есть идея для новых уроков? Обязательно пишите об этом в комментариях! А еще подписывайтесь на нашу группу в ВКонтакте!