Произвольная вкладка для товара WooCommerce

Продолжаем ковырять плагин WooCommerce и настраивать интернет магазин под свои требования и пожелания.
Сегодня я расскажу, как создать произвольные вкладки для товара без плагина.
Названия вкладок будут отображаться на всех товарах.
Если мы использовали плагин «YIKES Собственные вкладки товара для WooCommerce», то вкладки добавлялись для каждого товара отдельно. Тут же можно сделать так, что все вкладки будут выставлены по умолчанию, только нужно будет вносить информацию, либо вытягивать из существующих полей, либо вставить раздел «Акции», «+ к товару скидка» и т.д.

Итак, заходим в файл «functions.php» вашей темы и вставляем вот такой код сразу после знака «<?»:

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;
 
}
 
function woo_new_product_tab_content() {
 
// Контент новой вкладки
echo '<h2>Новая вкладка</h2>'; // Заголовок вкладки
echo '<p>Это описание новой вкладки</p>'; // Контент вкладки
 
}

Если вам нужно добавить еще вкладку, тогда сразу в строку 11 (я указал /* сюда вставляем еще одну вкладку */):

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

… вставляем вот такой код:

$tabs['test_tab_2'] = array(
'title' => __( 'Новая вкладка-2', 'woocommerce' ), // название ссылки для меню вкладки
'priority' => 51,
'callback' => 'woo_new_product_tab_content_2'
);

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

  • Для 1-ой вкладки было «$tabs[‘test_tab’]», для 2-ой вкладки «$tabs[‘test_tab_2’]» (я добавил «_2»).
  • «priority» – здесь выставляем очередность вкладок.
  • «callback» – указываем название функции для вызова контента вкладки. Для 1-ой вкладки было «woo_new_product_tab_content», для 2-ой вкладки «woo_new_product_tab_content_2» (я добавил «_2»).

Теперь вызовем контент вкладки. Добавьте в конце нашего кода вот такой код:

function woo_new_product_tab_content_2() {
 
// Контент новой вкладки
 
echo '<h2>Новая вкладка-2</h2>'; // Заголовок вкладки
echo '<p>Это описание новой вкладки -2.</p>'; // Контент вкладки
 
}

Обратите внимание на строку №1.
Там указано имя функции «woo_new_product_tab_content_2», той, которую нужно прописать «callback».
Вот полностью готовый код для двух вкладок:

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'
);
 
$tabs['test_tab_2'] = array(
'title' => __( 'Новая вкладка-2', 'woocommerce' ), // название ссылки для меню вкладки
'priority' => 51,
'callback' => 'woo_new_product_tab_content_2'
);
 
return $tabs;
 
}
 
function woo_new_product_tab_content() {
 
// Контент новой вкладки
 
echo '<h2>Новая вкладка</h2>'; // Заголовок вкладки
echo '<p>Это описание новой вкладки</p>'; // Контент вкладки
 
}
 
function woo_new_product_tab_content_2() {
 
// Контент новой вкладки
 
echo '<h2>Новая вкладка-2</h2>'; // Заголовок вкладки
echo '<p>Это описание новой вкладки -2.</p>'; // Контент вкладки
 
}

Редактирование вкладок с данными о товаре – WooCommerce

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *