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

Табы woocommerce

HIT

06.12.2016

6892

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

Тэги:

Поделится информацией с друзьями

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

Кнопки WC

Давно хотел подробно разобрать тему с кнопками WC. Кнопки меняют свой вид и функционал в зависимости от типа продукта, наличия, и других факторов. Так же в движке магазина Woocommerce множество Читать далее »

Разбираем woocommerce на молекулы

Разбираем woocommerce на молекулы

В данном материале разбираем некоторые хуки woocommerce, их последовательность, а также в структуру шаблонов WC и их проверку. Добавляем стандартные хлебные крошки WC <?php woocommerce_breadcrumb(); ?> Файлы шаблона: archive-product.php — Читать далее »

Woocommerce и валюта

Woocommerce и валюта

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

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

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
Мобильное меню типа mmenu
Рекомендации для васМобильное меню типа mmenuOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.