/ Сайтостроение / Плагины / Табы woocommerce

Табы woocommerce

HIT

06.12.2016

3098

1

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

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

К тому же при переименовании вкладки, она начинает выводиться в товаре даже в случае отсутствия в ней информации.

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Адаптация woocommerce под свой шаблон

Адаптация woocommerce под свой шаблон

Первое что мы должны сделать при разработке темы включающей в себя функционал интернет-магазина — адаптировать woocommerce под свой шаблон. Локализация woocommerce Для адаптации woocommerce в нашем шаблоне необходимо: Создать в Читать далее »

Шорткоды woocommerce

Шорткоды woocommerce

Для вывода (например) на главной странице сайта элементов WC. Последние продукты Полезно для использования на главной странице. Определяет, сколько товаров показывать на странице и количество сколько столбцов. Код: array( 'post_type' Читать далее »

/
Изменение формы выбора вариаций

Изменение формы выбора вариаций

По умолчанию вариации товара в Woocommerce выбираются из выпадающего списка. Это не всегда удобно. Доработать формы выбора вариаций в виде: изображений, цветов, надписей (лэйблов) и т.д. помогут плагины. Рассмотрим различные Читать далее »

/

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

1 комментарий

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

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