Вкладки в Woocommerce товарах — как убрать, добавить, изменить (сниппеты + плагин)

По умолчанию на странице с детальным описанием товара в Woocommerce посетителям будет показываться 3 вкладки: подробное описание продукта, “Детали” с его размерами и весом, а также отзывы (которые в настройках можно отключить). Не всегда такой вариант отображения является оптимальным, поэтому многие заказчики хотят каким-то образом его изменить. Об этом сегодня и поговорим – для решения задачи имеются полезные сниппеты с официального сайта Woocommerce и от других разработчиков, а также специальные плагины.

Содержание:

• Предыстория (старый метод)
• Перенос характеристик товара в описание
• Разные сниппеты для табов Woocommerce
• Плагин Custom Product Tabs

Предыстория (старый метод)

Просматривая один из старых своих сайтов я нашел самый простой и “топорный” метод реализации этой задачи – через файлы шаблона. В директории вашей или дочерней темы можете найти папку woocommerce/single-product/tabs, где будет 3 файла, отвечающие за вывод соответствующих вкладок: глобальный tabs.php + табы описания (description.php) и детали товара (additional-information.php).

В файл additional-information.php я добавил просто HTML контент про “оплату и доставку”, который отображался на всех страницах продукции, а в шаблон описания (description) вставил код для вывода списка деталей:

<?php $product->list_attributes(); ?>

Разумеется, так делать не совсем корректно, лучше использовать специальные фильтры/функции системы.

Перенос деталей продукции во вкладку описания

Первой будет задача, которую мне нужно было решить изначально, а дальше я просто добавляю полезные сниппеты по отдельности. Вы сможете их скомбинировать дабы получить результат, подходящий именно вам.

Вот как изначально выглядела страница товара в магазине.

Как я уже говорил выше, хочу перенести детали продукции в основную вкладку и лишнюю удалить. Использую для этого следующий код:

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
function woo_remove_product_tabs( $tabs ) {
    unset( $tabs['additional_information'] );   // Remove the additional information tab
    return $tabs;
}
 
 
add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );
function woo_custom_description_tab( $tabs ) {
    $tabs['description']['callback'] = 'woo_custom_description_tab_content';    // Custom description callback
    return $tabs;
}
 
function woo_custom_description_tab_content() {
    global $product;
 
    echo '<div class="description">';
    the_content();
    echo '</div>';
 
    echo '<div class="prod-attr">';
    $product->list_attributes();
    echo '</div>';
 
    echo '<div class="dop-info"><p style="text-align: justify;"><em><strong>*В изделиях под заказ</strong> – цветовая гамма будет отличаться.</em></p></div>';
}

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

Вот что в итоге получилось:

Разные сниппеты для табов Woocommerce

Все коды вставляем в файле functions.php основной или дочерней темы, либо через Code Snippets.

Удаляем все вкладки и показываем описание:

Для начала самая стандартная ситуация – когда вам вообще не нужны никакие вкладки, а надо просто отобразить подробный текст описания продукта.

/**
 * @snippet       Remove Product Tabs & Echo Long Description
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.8
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_after_single_product_summary', 'bbloomer_wc_output_long_description', 10 );
 
function bbloomer_wc_output_long_description() { ?>
   <div class="woocommerce-tabs">
   <?php the_content(); ?>
   </div>
<?php }

Теперь переходим к “официальным” сниппетам разработчиков, которые вы всегда сможете найти тут.

Как убрать вкладки Woocommerce

Оставляете в коде те, которые хотите удалить:

/**
 * Remove product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
 
function woo_remove_product_tabs( $tabs ) {
 
    unset( $tabs['description'] );      	// Remove the description tab
    unset( $tabs['reviews'] ); 			// Remove the reviews tab
    unset( $tabs['additional_information'] );  	// Remove the additional information tab
 
    return $tabs;
}

Переименование элементов

Аналогично используйте только те строки, которые нужны:

/**
 * Rename product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
 
	$tabs['description']['title'] = __( 'More Information' );		// Rename the description tab
	$tabs['reviews']['title'] = __( 'Ratings' );				// Rename the reviews tab
	$tabs['additional_information']['title'] = __( 'Product Data' );	// Rename the additional information tab
 
	return $tabs;
 
}

Перестановка (меняем местами)

Выполняется через указание приоритетности:

/**
 * Reorder product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {
 
	$tabs['reviews']['priority'] = 5;			// Reviews first
	$tabs['description']['priority'] = 10;			// Description second
	$tabs['additional_information']['priority'] = 15;	// Additional information third
 
	return $tabs;
}

Модификация табов

Следующий хак заменит описание на пользовательскую функцию:

/**
 * Customize product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );
function woo_custom_description_tab( $tabs ) {
 
	$tabs['description']['callback'] = 'woo_custom_description_tab_content';	// Custom description callback
 
	return $tabs;
}
 
function woo_custom_description_tab_content() {
	echo '<h2>Custom Description</h2>';
	echo '<p>Here\'s a custom description</p>';
}

Дополнительные вкладки в Woocommerce

Здесь добавляется новый глобальный элемент для всех товаров:

/**
 * Add a custom product data tab
 */
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
 
	// Adds the new tab
 
	$tabs['test_tab'] = array(
		'title' 	=> __( 'New Product Tab', 'woocommerce' ),
		'priority' 	=> 50,
		'callback' 	=> 'woo_new_product_tab_content'
	);
 
	return $tabs;
 
}
function woo_new_product_tab_content() {
 
	// The new tab content
 
	echo '<h2>New Product Tab</h2>';
	echo '<p>Here\'s your new product tab.</p>';
 
}

Вкладка «Детали»

Важно! Она будет работать только когда для товара указаны его размеры или вес. В противном случае у вас будет выводиться ошибка. Поэтому для соответствующего кода не забывайте использовать условные операторы:

/**
 * Check if product has attributes, dimensions or weight to override the call_user_func() expects parameter 1 to be a valid callback error when changing the additional tab
 */
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
 
function woo_rename_tabs( $tabs ) {
 
	global $product;
 
	if( $product->has_attributes() || $product->has_dimensions() || $product->has_weight() ) { // Check if product has attributes, dimensions or weight
		$tabs['additional_information']['title'] = __( 'Product Data' );	// Rename the additional information tab
	}
 
	return $tabs;
 
}

Плагин Custom Product Tabs for WooCommerce

Если вам нужно не просто «что-то сделать» с базовыми вкладками, а вы хотите немного расширить данную функциональность, то следующий плагин вам точно понравится. Он имеет свыше 90тыс. скачиваний, максимальную оценку и регулярные апдейты. Я использовал его для одного проекта – модуль справился с задачей на отлично.

С помощью этого решения вы можете создавать:

• глобальные табы «Saved Tabs» и использовать их на большом количестве позиций каталога;
• уникальные вкладки для каждого отдельного товара.

При этом в табах используется стандартный WP-редактор с добавлением катртинок, текстов и даже шорткодов! После создания они будут выводиться справа от вкладки “Описания”.

Вот как выглядит работа модуля на странице редактирования продукции:

Опция в меню товара называется “Custom Tabs”. Здесь есть текстовый редактор, заголовок вкладки, механизм добавления / удаления / перемещения элементов, сохраненные табы.

Итого. В целом, в плагине Custom Product Tabs for WooCommerce все достаточно просто дабы разобраться даже рядовому WordPress пользователю. Очевидно, что существуют и другие решения, но мне этого хватает с головой, к тому же все стабильно работает. Однако использовать его есть смысл только тогда, когда это действительно нужно – простые задачи по вкладкам по типу их удаления лучше решать с помощью сниппетов. Ну, а редактировать файлы шаблона вообще не желательно.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 167, средний балл: 3,96 из 7)

Загрузка...

Категории: WooCommerce;
Теги: WooCommerce плагины, WooCommerce товары, вордпресс веб-разработка, интернет-магазин, решение задач wordpress, сниппеты.