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

Табы woocommerce

HIT

06.12.2016

8492

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

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

  • Похожие записи
  • Комментарии
  • Вложения
Субкатегории в категориях Woocommerce

Субкатегории в категориях Woocommerce

В шаблоне вывода категорий Woocommerce к каждой категории можно выводить список субкатегорий. Для этого в шаблоне content-product_cat.php, перед закрывающим тегом /li вставляем следующее <div class="podrazdely"> <?php $wsubargs = array( 'hierarchical' Читать далее »

Колесо удачи для интернет-магазина

Колесо удачи для интернет-магазина

Добавим на интернет-магазин возможность посетителям проверить свою удачу посредством колеса удачи. Колесо представляет собой барабан с секторами с разными вариантами скидок, либо отсутствия их. Lucky Wheel for WooCommerce – Spin Читать далее »

Кнопки WC

Кнопки WC

Давно хотел подробно разобрать тему с кнопками WC. Кнопки меняют свой вид и функционал в зависимости от типа продукта, наличия, и других факторов. Так же в движке магазина 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

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

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