В данной статье будут рассмотрены все моменты связанные с табами 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'); }
Ещё один пример проверки, а также добавления во вкладку дополнительного поля тех. характеристики:
// Вкладка характеристики
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
global $product;
$techparam = get_post_meta($product->get_id(), 'techparam', true);
if ( $product->has_attributes() || $product->has_dimensions() || $product->has_weight() || !empty($techparam) ) {
$tabs['additional_information']['callback'] = 'additional_information_addon';
$tabs['additional_information']['title'] = __( 'Технические характеристики' );
} else {
unset( $tabs['additional_information'] );
}
return $tabs;
}
function additional_information_addon(){
woocommerce_product_additional_information_tab();
global $post;
if (get_post_meta($post->ID, 'techparam', true)) {
echo '<div id="techparam">';
print htmlspecialchars_decode(get_post_meta($post->ID, 'techparam', true));
echo '</div>';
}
}
Альтернативное создание таба
Возможен еще один вариант создания вкладки
Вместо конструкции
$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;
Плавающая ширина табов
Количество вкладок для разных товаров может отличатся. Можно сделать интересное решение с плавающей (в зависимости от количества вкладок) шириной. Для этого в шаблоне 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();
}
[site-socialshare]
Здравствуйте помогите найти ошибку не выходит текст в новой вкладке
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
}
}
Здравствуйте! Не понял по пункту «Не выводить пустые табы». У меня на сайте есть вкладка Спецификация. Вроде как стандартная. Но не на всех товарах она заполнена. Хочу скрыть ее на страницах тех товаров, где в этой вкладке пусто. Не подскажете, как применить вашу подсказку именно для этой вкладки? Спасибо!
Спецификация, это вкладка Характеристики. т.е. выводятся заполненные атрибуты? Она автоматически не должна выводится если не заполнен ни один атрибут. А если создаете пользовательскую вкладку, тогда в ней сами настраиваете проверку.
Здравствуйте.
Прошу помочь (кодом или идеей) по двум вопросам:
1) Почему хуки Woocommerce не срабатывают совсем при внесении через function дочерней темы?
Например — ниже указанный код из Вашей статьи не убирает отображение вкладок на странице (тема Астра)?
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;
}
Вопрос 2: как перенeсти стандартные вкладки шаблона наверх, то есть разместить перед добавить в корзину ? хуками пробовал не получается в том числе из-за того, что они через function.php не подключаются (не срабатывают) ?