В данной статье будут рассмотрены все моменты связанные с табами Woocommerce. Табы (вкладки) — это секции контента разделенного по смыслу.

Редактируем стандартные табы WC

// Отключаем табы на странице товара
add_filter( 'woocommerce_product_tabs', 'sb_woo_remove_reviews_tab', 98);
function sb_woo_remove_reviews_tab($tabs) {
 
  //unset( $tabs['description'] ); // Убираем вкладку "Описание"
  //unset( $tabs['reviews'] ); // Убираем вкладку "Отзывы"
  //unset( $tabs['additional_information'] ); // Убираем вкладку "Свойства"
 
return $tabs;
}

Настраиваем порядок вкладок

add_filter( 'woocommerce_product_tabs', 'reordered_tabs', 98 );
function reordered_tabs( $tabs ) {
    $tabs['cherry_wc_video']['priority'] = 5; 
    $tabs['description']['priority'] = 10; 
    $tabs['reviews']['priority'] = 15;
 
    return $tabs;
}

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

Вкладка Похожие товары

Перемещаем Похожие товары в отдельную вкладку

// Отключаем хук Похожие товары
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);
//Подключаем новый хук Похожие товары
add_action( 'tab_woocommerce_related_products', 'woocommerce_output_related_products', 20 );

Убедитесь что, Похожие товары отключены, если нет, то возможно они перемещены из стандартного в другой хук.

Создаем новую вкладку и помещаем в нее Похожие товары

function woo_custom_product_tab( $tabs ) {
   
    $custom_tab = array( 
      	'custom_tab' =>  array(
			'title' => __('Похожие товары','woocommerce'), 
			'priority' => 90, 
			'callback' => 'woo_custom_product_tab_content' 
    	)
    );
    return array_merge( $custom_tab, $tabs );
}


function woo_custom_product_tab_content() {
	do_action('tab_woocommerce_related_products');
}
add_filter( 'woocommerce_product_tabs', 'woo_custom_product_tab' );

Также во вкладку можно поместить Апселлы. Вместо do_action(‘tab_woocommerce_related_products’); прописываем woocommerce_upsell_display( 3,3 ); . При этом необходимо отключить стандартный хук выводящий апселлы:

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );

Вкладка Краткое описание

// Вкладка Краткое описание

function description_product_tab( $tabs ) {
   
    $custom_tab_s = array( 
       'custom_tab_s' =>  array( 
     'title' => __('Описание','woocommerce'), 
     'priority' => 90, 
     'callback' => 'description_product_tab_content' 
     )
     );
    return array_merge( $custom_tab_s, $tabs );
}


function description_product_tab_content() {
    echo '<h2>Описание</h2>'; 
    echo the_excerpt(); 
} 
add_filter( 'woocommerce_product_tabs', 'description_product_tab' );

Не выводить пустые табы

При создании любой вкладки можно задать условие на наличие в ней информации. Схема проверки следующая (в функции создания вкладки):

global $post; // обращаемся к глобальной переменной
  
if ($post->post_excerpt): // указываем условие
  
    $custom_tab_s = array( 
       'custom_tab_s' =>  array( 
     'title' => __('Описание','woocommerce'), 
     'priority' => 90, 
     'callback' => 'description_product_tab_content' 
     )
     );
    return array_merge( $custom_tab_s, $tabs );
  
else: return $tabs; // оставляем табы без изменений если условие не соблюдено
endif;

Условия при проверках

if ($post->post_excerpt): — есть ли краткое описание
if (woocommerce_related_products()): — есть ли похожие товары — ПРОВЕРКА НЕ РАБОТАЕТ!
if (get_post_meta($post->ID, ‘video_field’, true)): — заполнено ли пользовательское поле

Создание вкладки Видеообзор (основа для плагина).

Проверка для похожих товаров из этой же категории:

// Создаем вкладку Похожие товары
function related_product_tab($tabs) {
	global $product;
	$terms = get_the_terms( $product->get_ID(), 'product_cat' );
	if ($terms[0]->count >= 2) {
		$tabs['related_tab'] = array(
			'title' => __( 'Похожие товары', 'woocommerce' ),
			'priority' => 90,
			'callback' => 'related_product_tab_content'
		);
	}	
	return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'related_product_tab' );
 
// Содержимое новой вкладки
function related_product_tab_content() { do_action('tab_woocommerce_related_products'); }

Ещё один пример проверки, а также добавления во вкладку дополнительного поля тех. характеристики:

// Вкладка характеристики
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
    global $product;
	$techparam = get_post_meta($product->get_id(), 'techparam', true);
	if ( $product->has_attributes() || $product->has_dimensions() || $product->has_weight() || !empty($techparam) ) {
		$tabs['additional_information']['callback'] = 'additional_information_addon';
		$tabs['additional_information']['title'] = __( 'Технические характеристики' );			
	} else {
		unset( $tabs['additional_information'] );
	}
	
    return $tabs;
}

function additional_information_addon(){
	woocommerce_product_additional_information_tab();
	global $post;

	if (get_post_meta($post->ID, 'techparam', true)) {  
		echo '<div id="techparam">';
		print htmlspecialchars_decode(get_post_meta($post->ID, 'techparam', true));
		echo '</div>';
	}
}

Альтернативное создание таба

Возможен еще один вариант создания вкладки

Вместо конструкции

$custom_tab = array( 
	'custom_tab' =>  array( 
		'title' => __('Похожие товары','woocommerce'), 
		'priority' => 90, 
		'callback' => 'woo_custom_product_tab_content' 
	)
);
return array_merge( $custom_tab, $tabs );

Можно использовать (возможно это даже лучше)

$tabs['related'] = array(
	'title' => __( 'Похожие товары', 'woocommerce' ),
	'priority' => 90,
	'callback' => 'related_product_tab_content'
);
return $tabs;

Плавающая ширина табов

Количество вкладок для разных товаров может отличатся. Можно сделать интересное решение с плавающей (в зависимости от количества вкладок) шириной. Для этого в шаблоне woocommerce single-product/tabs/tabs.php

Перед выводом списка ul вставляем счетчик закладок

<?php $i = 0; foreach ( $tabs as $key => $tab ) : ?>
<?php $i++; endforeach; ?>

А в классы ul добавляем динамический класс tabs-<?php echo $i; ?>.

И назначаем для разных классов ширину

ul.tabs-2 li {width: 50%;}
ul.tabs-3 li {width: 33.33%;}
ul.tabs-4 li {width: 25%;}
ul.tabs-5 li {width: 20%;}

Переименовать табы WC

Переименовать табы можно через функцию

add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
 
    $tabs['description']['title'] = __( 'More Information' );       // Переименовать таб "описание"
    $tabs['reviews']['title'] = __( 'Ratings' );                // Переименовать таб "отзывы"
    $tabs['additional_information']['title'] = __( 'Product Data' );    // Переименовать таб "дополнительная информация"
 
    return $tabs;
 
}

..но, считаю, что это не самый лучший вариант. Лучше изменить соответствующий перевод.

Вкладка Сопутствующие товары

Создаем новый таб с проверкой на сопутствующие товары, соответственно если их нет то не выводит его

// Создаем вкладку Сопутствующие товары
function crosssels_product_tab($tabs) {
	global $product;
	$crosssell_ids = get_post_meta( get_the_ID(), '_crosssell_ids' );
	if(!empty($crosssell_ids[0])){
		$tabs['crosssels_tab'] = array(
			'title' => __( 'С этим товаром покупают', 'woocommerce' ),
			'priority' => 90,
			'callback' => 'woocommerce_cross_sells_products'
		);
	}	
	return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'crosssels_product_tab' );

Функция вывода сопутствующих товаров

// Сопутствующие товары в карточке
function woocommerce_cross_sells_products() {
	$crosssell_ids = get_post_meta( get_the_ID(), '_crosssell_ids' );
	$crosssell_ids=$crosssell_ids[0];

	if(count($crosssell_ids)>0){
		$args = array(
			'post_type' => 'product',
			'ignore_sticky_posts' => 1,
			'no_found_rows' => 1,
			'posts_per_page' => apply_filters( 'woocommerce_cross_sells_total', $posts_per_page ),
			'orderby' => $orderby,
			'post__in' => $crosssell_ids
		);
		$products = new WP_Query( $args );
		$woocommerce_loop['columns'] = apply_filters( 'woocommerce_cross_sells_columns', $columns );

		if ( $products->have_posts() ) : ?>
			<div class="cross-sells">
			<h2>С этим товаром покупают</h2>
			<?php woocommerce_product_loop_start(); ?>
			<?php while ( $products->have_posts() ) : $products->the_post(); ?>
				<?php wc_get_template_part( 'content', 'product' ); ?>
			<?php endwhile; ?>
			<?php woocommerce_product_loop_end(); ?>
			</div>
		<?php endif;
	}

	wp_reset_query();
}

Поделиться в соц. сетях: