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

Табы woocommerce

HIT

06.12.2016

8061

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;
}

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

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

// Отключаем хук Похожие товары
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' );
	$crosssell_ids = $crosssell_ids[0];
	if(count($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();
}

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

  • Похожие записи
  • Комментарии
  • Вложения
Конвертировать цену в рубли

Конвертировать цену в рубли

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

Вложить файл в заказ

Вложить файл в заказ

Если необходимо приложить к заказу реквизиты или любой другой файл, к заполняемым полям нужно добавить загрузчик файла. Easy Upload Files During Checkout (1000) Простой но рабочий функционал. В бесплатной версии Читать далее »

Интересные фишки для Woocommerce

Интересные фишки для Woocommerce

Продолжаем серию интересных доработок для Woocmmerce. Выведем дату последней покупки товара У товара такого мета поля нет, нужно сопоставлять наименования (перебирая заказы). Для этого создаем запрос на перебор БД: В Читать далее »

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

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
      Alexandr

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

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