Как добавить табу на страницу товара

В плагине WooCommerce есть возможность добавлять свои табы с помощью фильтра woocommerce_product_tabs и добавление выглядит примерно таким образом:

function custom_tab_render_content() {
    echo 'custom tab content';
}

add_filter( 'woocommerce_product_tabs', function ( $tabs = [] ) {
    $tabs['new_custom_one'] = [
        'title'    => __( 'New Custom Tab' ),
        'priority' => 40,
        'callback' => 'custom_tab_render_content',
    ];

    return $tabs;
} );

Код нужно добавлять в дочернюю тему или в плагин ProFunctions.

Но в теме Bono добавлена дополнительная возможность управлять табами во Внешний вид > Настроить > WooCommerce > Товар. Здесь можно включить или выключить вывод ненужных табов, а также перестроить порядок их вывода. Чтоб это работало с вашей новой табой, необходимо её добавить в настройки кастомайзера с помощью фильтра bono_customize_product_tabs:

add_filter( 'bono_customize_product_tabs', function ( $tabs = [] ) {
    $tabs['new_custom_one'] = __( 'New Custom Tab' );

    return $tabs;
} );

После этого она появится в кастомайзере.

Вывод контента в новой табе

В первом примере кода выводится общий контент для всех товаров: custom tab content. Но наверняка этот контент должен быть свой у каждого товара. Это можно улучшить, добавив дополнительное поле

для этого нужно добавить код:

add_action( 'woocommerce_product_options_general_product_data', function () {
    global $product_object;
    /** @var WC_Product $product_object */
    woocommerce_wp_textarea_input( [
        'id'          => 'custom_data',
        'label'       => __( 'Custom Data', THEME_TEXTDOMAIN ),
        'value'       => $product_object->get_meta( 'custom_data' ),
    ] );
} );

add_action( 'woocommerce_process_product_meta', function ( $post_id ) {
    $product = wc_get_product( $post_id );
    $data    = isset( $_POST['custom_data'] ) ? $_POST['custom_data'] : '';
    $data    = wp_unslash( $data );
    $product->update_meta_data( 'custom_data', sanitize_text_field( $data ) );
    $product->save();
} );

и затем переделать функцию рендера контента вот так

function custom_tab_render_content() {
    global $product;
    if ( $product ) {
        echo $product->get_meta( 'custom_data' );
    }
}

Теперь текст, введенный в поле Custom Data, будет выводиться в новой табе.

Еще один момент – в данной реализации в поле Custom Data могут быть добавлены html-тэги, в том числе и <script>. Если этого нужно избежать, то тогда в ф-ции custom_tab_render_content нужно выводить контент таким способом

echo esc_html( $product->get_meta( 'custom_data' ) );

Если нужно чтоб работали шорткоды в отдельной табе, то вывод нужно обернуть в do_shortcode()

echo do_shortcode( $product->get_meta( 'custom_data' ) );

Чтобы поле “Custom Data” вывести в табе “Дополнительно”, нужно заменить хук woocommerce_product_options_general_product_data на woocommerce_product_options_advanced

Вам помог ответ?