Добавление / удаление вкладок в карточке товара WooCommerce

Используя стандартную тему WooCommerce Storefront (подробнее в статье Storefront для WooCommerce cоветы, хитрости и настройка CSS), либо тему с идентичной вёрсткой стандартной, вам придется разобраться с функционалом вкладок. Конечно, если вы хотите кастомизировать вкладки, например поменять порядок вывода вкладок, добавить новую или удалить старую.

Функционал вкладок меняется через хук woocommerce_product_tabs. Код нужно вставлять в functions.php текущей темы, желательно, чтобы это была дочерняя тема (скачать дочернюю тему Storefront).

Для удаления вкладки "Отзывы" и формы отзывов достаточно добавить небольшой код в файл functions.php активной темы на вашем сайте.

<?php
add_filter( 'woocommerce_product_tabs', 'dieg_woo_remove_reviews_tab', 98 );
function dieg_woo_remove_reviews_tab($tabs) {
    unset($tabs['reviews']);
    return $tabs;
}
?>

После этого обновите файл functions.php на сервере и обновив страницу товара вы увидите что вкладка Отзывы на странице товара отключена.

Как удалить все вкладки? Для этого нужно удалить все элементы из массива $tabs и вернуть его пустым.

add_filter( 'woocommerce_product_tabs', 'dieg_remove_product_tabs', 25 );
 
function dieg_remove_product_tabs( $tabs ) {
 
	unset( $tabs[ 'description' ] ); // вкладка Описание
	unset( $tabs[ 'reviews' ] ); // вкладка Отзывы
	unset( $tabs[ 'additional_information' ] ); // вкладка Детали
 
	return $tabs;
}

Каждая вкладка в массиве $tabs также является массивом. Используя элемент с ключом title, вы сможете переименовать вкладку.

add_filter( 'woocommerce_product_tabs', 'dieg_rename_tabs', 25 );
 
function dieg_rename_tabs( $tabs ) {
 
	$tabs[ 'description' ][ 'title' ] = 'О товаре';
	$tabs[ 'reviews' ][ 'title' ] = 'Отзывы покупателей';
	$tabs[ 'additional_information' ][ 'title' ] = 'Характеристики товара';
 
	return $tabs;
 
}

Для изменения порядка вкладок используем элемент массива priority. По умолчанию, вкладки имеют такие приоритеты: Описание -10, Детали - 20 и Отзывы 30. Для перемещения вкладки "Описание" вниз достаточно назначить больший приоритет, например 90.

add_filter( 'woocommerce_product_tabs', 'dieg_reorder_tabs', 25 );
 
function dieg_reorder_tabs( $tabs ) {
 
	$tabs[ 'description' ][ 'priority' ] = 90;
	return $tabs;
 
}

В массиве вкладок параметр callback возвращает её содержимое. Поэтому поменяв название функции на свою собственную функцию в этом параметре – мы получаем возможность вывода произвольных данных в той или другой вкладке. В этом примере выведем статичные HTML данные, а если вам нужны данные из вашей базы MySQL используйте переменную global $product внутри содержимого вкладки.

add_filter( 'woocommerce_product_tabs', 'dieg_custom_new_tab', 25 );
 
function dieg_custom_new_tab( $tabs ) {
 
	$tabs[ 'description' ][ 'callback' ] = 'dieg_addnew_tab';
	return $tabs;
 
}
 
function dieg_addnew_tab() {
	echo '<h2>Хостинг Консультант - Думай иначе!</h2>';
	echo '<p>Проверенные хостинг провайдеры https://dieg.info</p>';
}

Для создания новой вкладки на странице карточки товара Вукомерс, нужно создать массив описывающий новую вкладку и функцию, при помощи которой будем выводить нужную информацию. Чтобы не загромождать стать, функцию dieg_addnew_tab возьмем из предыдущего примера.

add_filter( 'woocommerce_product_tabs', 'dieg_new_product_tab', 25 );
 
function dieg_new_product_tab( $tabs ) {
 
	$tabs[ 'price_new_tab' ] = array(
		'title' 	=> 'Ценовые тарифы',
		'priority' 	=> 25,
		'callback' 	=> 'dieg_addnew_tab'
	);
 
	return $tabs;
 
}

Выведем стандартные вкладки Описание/Отзывы/Детали открытыми на страницах товаров, а заголовки этих вкладок сделаем якорями. Для этого нужно переопределить функцию woocommerce_output_product_data_tabs. То есть в файле functions.php активной темы, нужно создать функцию с точно таким же названием и автоматически она "перезапишет" встроенную функцию woocommerce_output_product_data_tabs.

function woocommerce_output_product_data_tabs() {
 
	// сохраняем в массив все вкладки
	$product_tabs = apply_filters( 'woocommerce_product_tabs', array() );
 
	if ( empty( $product_tabs ) ) {
		return;
	}
 
	echo '<div class="woocommerce-tabs wc-tabs-wrapper">';
 
	// цикл для каждой вкладки
	foreach ( $product_tabs as $key => $product_tab ) {
 
		echo '<div id="tab-' . esc_attr( $key ) . '">';
 
		// callback – функция для вывода содержимого вкладки
		if ( isset( $product_tab[ 'callback' ] ) ) {
			call_user_func( $product_tab[ 'callback' ], $key, $product_tab );
		}
 
		echo '</div>';
	}
	echo '</div>';
 
}

PHP функция call_user_func вызывает пользовательскую функцию в первом параметре.

Учтите, этот код не позволит работать вышеприведенному коду, например для переименования вкладок.

WooCommerce (Вукомерс) — это несомненно отличный инструмент для превращения WordPress в полностью функционирующий интернет-магазин. Вам даже нет необходимости иметь глубокие познания в программировании для начала ваших продаж. Надеюсь, что данное руководство помогло вам открыть интернет-магазин на WordPress.