/ Плагины / Табы woocommerce

Табы woocommerce

HIT

06.12.2016

9035

3

В данной статье будут рассмотрены все моменты связанные с табами 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'); }

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

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

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

$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;
related — в последствии будет частью названия вкладки, tab в названии указывать не нужно, оно добавится автоматически.

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

Количество вкладок для разных товаров может отличатся. Можно сделать интересное решение с плавающей (в зависимости от количества вкладок) шириной. Для этого в шаблоне 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();
}

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

  • Похожие записи
  • Комментарии
  • Вложения
Подкатегория за подкатегорией

Подкатегория за подкатегорией

В одной из ранних статей мы отдельно от основного вывода WC выводили подкатегории. В этой статье мы усложним код вывода категорий и сделаем у категорий и вывод товаров. Это даст Читать далее »

Настройка вывода подкатегорий товаров

Настройка вывода подкатегорий товаров

При варианте вывода в категориях товаров, в не зависимости есть ли подкатегории или нет, для более точного подбора товаров можно выводить до товаров подкатегории. При этом сделать это можно довольно Читать далее »

Хлебные крошки WC

Хлебные крошки WC

Хлебные крошки WC имеют свои особенности. Их невозможно заменить стандартными хлебными крошками, т.к. в них еще не предусмотрена система для иерархических таксономий. Выводим хлебные крошки Первым делом надо назначить хлебные Читать далее »

Добавить комментарий

3 комментария

  1. Вадим

    Здравствуйте помогите найти ошибку не выходит текст в новой вкладке
    add_filter( ‘woocommerce_product_tabs’, ‘woo_new_product_tab’ );
    function woo_new_product_tab( $tabs )
    {
    // Добавление вкладки
    $tabs[‘test_tab’] = array(
    ‘title’ => __( ‘Модули’, ‘woocommerce’ ), // название ссылки для меню вкладки
    ‘priority’ => 50,
    ‘callback’ => ‘woo_new_product_tab_content’
    );
    return $tabs;
    }
    add_action( ‘woocommerce_product_options_advanced’, ‘art_woo_add_custom_fields’ );
    function art_woo_add_custom_fields() {
    global $product, $post;
    echo »;// Группировка полей
    // текстовое поле
    woocommerce_wp_text_input( array(
    ‘id’ => ‘_text_field’,
    ‘label’ => __( ‘Текстовое поле’, ‘woocommerce’ ),
    ‘placeholder’ => ‘Текстовое поле’,
    ‘desc_tip’ => ‘true’,
    ‘custom_attributes’ => array( ‘required’ => ‘required’ ),
    ‘description’ => __( ‘Введите здесь значение поля’, ‘woocommerce’ ),
    ) );
    // цифровое поле
    woocommerce_wp_text_input( array(
    ‘id’ => ‘_number_field’,
    ‘label’ => __( ‘Цифровое поле’, ‘woocommerce’ ),
    ‘placeholder’ => ‘Ввод чисел’,
    ‘description’ => __( ‘Вводятся только числа’, ‘woocommerce’ ),
    ‘type’ => ‘number’,
    ‘custom_attributes’ => array(
    ‘step’ => ‘any’,
    ‘min’ => ‘0’,
    ),
    ) );
    // Тектовая область
    woocommerce_wp_textarea_input( array(
    ‘id’ => ‘_textarea’, // Идентификатор поля
    ‘label’ => ‘Область текста’, // Заголовок поля
    ‘placeholder’ => ‘Ввод текста’, // Надпись внутри поля
    ‘class’ => ‘textarea-field’, // Произвольный класс поля
    ‘style’ => ‘width: 70%; background:red’, // Произвольные стили для поля
    ‘wrapper_class’ => ‘wrap-textarea’, // Класс обертки поля
    ‘desc_tip’ => ‘true’, // Включение подсказки
    ‘description’ => ‘Здесь можно что-нибудть вводить’,// Описение поля
    ‘name’ => ‘textarea-field’, // Имя поля
    ‘rows’ => ‘5’, //Высота поля в строках текста.
    ‘col’ => ’10’, //Ширина поля в символах.
    ) );
    // Выбор значения
    woocommerce_wp_select( array(
    ‘id’ => ‘_select’,
    ‘label’ => ‘Выпадающий список’,
    ‘options’ => array(
    ‘one’ => __( ‘Option 1’, ‘woocommerce’ ),
    ‘two’ => __( ‘Option 2’, ‘woocommerce’ ),
    ‘three’ => __( ‘Option 3’, ‘woocommerce’ ),
    ),
    ) );
    // Чекбокс
    woocommerce_wp_checkbox( array(
    ‘id’ => ‘_checkbox’,
    ‘wrapper_class’ => ‘show_if_simple’,
    ‘label’ => ‘Чекбокс’,
    ‘description’ => ‘Выбери меня!’,
    ) );
    // Радиокнопки
    woocommerce_wp_radio( array(
    ‘id’ => ‘_radiobutton’,
    ‘label’ => ‘Радиокнопки’,
    ‘class’ => ‘radio-field’, // Произвольный класс поля
    ‘style’ => », // Произвольные стили для поля
    ‘wrapper_class’ => ‘wrap-radio’, // Класс обертки поля
    ‘desc_tip’ => ‘true’, // Включение подсказки
    ‘description’ => ‘Выберите значение’,// Описение поля
    ‘name’ => ‘radio-field’, // Имя поля
    ‘options’ => array(
    ‘one’ => ‘Один’,
    ‘two’ => ‘Два’,
    ‘three’ => ‘Три’,
    ),
    ) );
    // скрытое поле
    woocommerce_wp_hidden_input( array(
    ‘id’ => ‘_hidden_field’,
    ‘value’ => ‘hidden_value’,
    ) );
    // Выбор товаров
    ?>

    Выбор товаров <select id="product_field_type"
    name="product_field_type[]" class="wc-product-search" multiple="multiple" style="width: 50%;" data-placeholder="» data-action=»woocommerce_json_search_products_and_variations» data-exclude=»ID ); ?>»>
    ID, ‘_product_field_type_ids’, true );
    $product_ids = ! empty( $product_field_type_ids ) && isset($product_field_type_ids) ? array_map( ‘absint’, $product_field_type_ids ) : array();
    if ( $product_ids ) {
    foreach ( $product_ids as $product_id ) {
    $product = wc_get_product( $product_id );
    $product_name = $product->get_formatted_name();
    echo » .
    esc_html( $product->get_formatted_name() ) . »;
    }
    }
    ?>

    Произвольная группа полей

    <input placeholder="Длина" class="input-text wc_input_decimal" size="6" type="text" name="_pack_length"
    value="ID, ‘_pack_length’, true ); ?>»
    style=»width: 15.75%;margin-right: 2%;»/>
    <input placeholder="Ширина" class="input-text wc_input_decimal" size="6" type="text" name="_pack_width"
    value="ID, ‘_pack_width’, true ); ?>»
    style=»width: 15.75%;margin-right: 2%;»/>
    <input placeholder="Высота" class="input-text wc_input_decimal" size="6" type="text" name="_pack_height"
    value="ID, ‘_pack_height’, true ); ?>»
    style=»width: 15.75%;margin-right: 0;»/>

    ID, ‘_text_field’, true );
    $num_field = get_post_meta( $post->ID, ‘_number_field’, true );
    $textarea_field = get_post_meta( $post->ID, ‘_textarea’, true );
    if ( $text_field ) {
    ?>

    Текстовое поле:

    Цифровое поле:

    Область текста:

    <?php
    }
    }

  2. Александр

    Здравствуйте! Не понял по пункту «Не выводить пустые табы». У меня на сайте есть вкладка Спецификация. Вроде как стандартная. Но не на всех товарах она заполнена. Хочу скрыть ее на страницах тех товаров, где в этой вкладке пусто. Не подскажете, как применить вашу подсказку именно для этой вкладки? Спасибо!

    1. Alexandr

      Спецификация, это вкладка Характеристики. т.е. выводятся заполненные атрибуты? Она автоматически не должна выводится если не заполнен ни один атрибут. А если создаете пользовательскую вкладку, тогда в ней сами настраиваете проверку.

Табы woocommerce
Иерархия по бренду
Рекомендации для васИерархия по брендуOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.