Як додати нову вкладку до товару у WooCommerce без плагінів: покроковий код

Якщо у вас інтернет-магазин на WordPress з WooCommerce і ви хочете додати окрему вкладку до товару — скажімо, для опису додаткової комплектації чи інших деталей — це реально зробити власноруч. Без зайвих плагінів, які тільки вантажать сайт і сваряться між собою 😅

Що робить цей код?

1. Додає нову вкладку “Додаткова комплектація” до товару
   Ця вкладка з’явиться поруч із стандартними — такими як «Опис», «Відгуки» тощо.

2. Додає поле в редакторі товару в адмінці
   Тобто ви зможете легко заповнити текст чи навіть вставити картинки через звичайний WordPress редактор (TinyMCE).

3. Автоматично зберігає дані у мета-полі товару
   Ваш текст з вкладки буде зберігатись окремо і підвантажуватись лише до відповідного товару.

4. Додає трохи стилів для краси та адаптивності
   Щоб контент виглядав акуратно і на фронті, і в адмінці.

Як додати нову вкладку до WooCommerce товару?

Ось короткий план дій:

• Додаємо фільтр woocommerce_product_tabs і вставляємо нову вкладку.

• Додаємо мета-бокс у редактор товару (через add_meta_box).

• Підключаємо редактор для зручного заповнення вкладки.

• Зберігаємо контент у мета-поле товару (post_meta).

Цей підхід підходить для всіх, хто хоче додати вкладку в WooCommerce для:

• Додаткових характеристик

• Таблиць розмірів

• Інструкцій до товару

• Опцій комплектації (як у моєму прикладі)

Чи можна додати кілька таких вкладок?

Так, можна! Просто копіюєте функцію додавання вкладки і міняєте назву та callback. Це вже апгрейд для просунутих 😎

🔥 Хочете ще більше таких фішок для WooCommerce?
Замовляйте консультацію — підкажу, як зробити ваш магазин зручним і прибутковим!

Покрокова інструкція: як додати нову вкладку до товару в WooCommerce 🚀

1. Відкрийте файл functions.php

Це файл вашої теми або дочірньої теми. Знайти його можна тут:
Вигляд → Редактор файлів теми → functions.php
Або через FTP / хостинг у папці wp-content/themes/ваша-тема/functions.php.

❗ Рекомендую завжди працювати з дочірньою темою, щоб оновлення теми не стерло ваші правки.

2. Вставте ось цей код у functions.php:

// Додавання нової вкладки "Додаткова комплектація"
function add_custom_tab( $tabs ) {
    $tabs['additional_equipment'] = array(
        'title'    => __( 'Додаткова комплектація', 'text-domain' ),
        'priority' => 50,
        'callback' => 'display_additional_equipment_tab_content'
    );
    return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'add_custom_tab' );

// Відображення контенту нової вкладки
function display_additional_equipment_tab_content() {
    global $post;
    $additional_equipment_content = get_post_meta( $post->ID, '_additional_equipment_content', true );
    
    if ( ! empty( $additional_equipment_content ) ) {
        echo apply_filters( 'the_content', $additional_equipment_content );
    } else {
        echo '<p>Немає додаткової інформації.</p>';
    }
}

// Додаємо стилі в адмінку
function custom_admin_styles() {
    echo '<style>
        .custom-tab-content {
            margin: 0;
            padding: 10px;
        }
        .wp-admin .custom-tab-content * {
            max-width: 100%;
        }
    </style>';
}
add_action('admin_head', 'custom_admin_styles');

// Додаємо мета-бокс у редактор товару
function add_additional_equipment_meta_box() {
    add_meta_box(
        'additional_equipment_meta_box',
        'Додаткова комплектація',
        'display_additional_equipment_meta_box',
        'product',
        'normal',
        'default'
    );
}
add_action( 'add_meta_boxes', 'add_additional_equipment_meta_box' );

// Відображення мета-поля
function display_additional_equipment_meta_box( $post ) {
    $additional_equipment_content = get_post_meta( $post->ID, '_additional_equipment_content', true );
    wp_editor( $additional_equipment_content, 'additional_equipment_content', array( 'textarea_name' => 'additional_equipment_content', 'media_buttons' => true ) );
}

// Зберігаємо контент мета-поля
function save_additional_equipment_content( $post_id ) {
    if ( isset( $_POST['additional_equipment_content'] ) ) {
        update_post_meta( $post_id, '_additional_equipment_content', wp_kses_post( $_POST['additional_equipment_content'] ) );
    }
}
add_action( 'save_post', 'save_additional_equipment_content' );

Як це працює? 🤓

✅ Вкладка «Додаткова комплектація» автоматично з’явиться на сторінках товарів у вашому магазині WooCommerce.
✅ В адмінці товару з’явиться нове поле редактора (під основним описом), куди можна вставити текст, картинки, таблиці — усе як у звичайному редакторі WordPress!
✅ Після заповнення цього поля і збереження товару — нова вкладка з вашими даними з’явиться на сайті в картці товару.

Де зберігається вміст вкладки?

Весь контент вкладки записується в мета-поле вашого товару з ключем _additional_equipment_content. Це безпечно і не ламає структуру сайту.

Чому це рішення — топчик?

• Не вантажить сайт зайвими плагінами (і, як ми з тобою знаємо, не свариться з іншими плагінами 🙈).

• Дає повний контроль над контентом вкладок.

• Можна легко адаптувати під будь-який магазин і додати ще кілька вкладок за потреби.

Часті запитання:

❓ Чи можна змінити назву вкладки?
Так! Змініть рядок 'title' => __( 'Додаткова комплектація', 'text-domain' ) на потрібну вам назву, наприклад, «Інструкція» чи «Гарантія».

❓ А як додати ще одну вкладку?
Скопіюйте функцію add_custom_tab, дайте їй іншу назву та поміняйте callback. Можна додати і 2, і 5 вкладок без проблем!

🛒 Хочете ще більше таких лайфхаків для WooCommerce? Підписуйтесь на мої блоги та приходьте на консультацію — допоможу зробити ваш магазин не тільки красивим, а й зручним для продажів!