Add WYSIWG Editor to WooCommerce product custom tab

Question

i build a custom solution, to display custom tabs on my WooCommerce product pages. I can manage them via the admin area. Problem is that when i add some code for example from visual composer into it, it will display that 1:1 on the product page.So the users see the code fragments. The solution that i got right now is a simple input field. How can i change that to an WYSIWG Editor? That's where i define the admin area.

add_action( 'woocommerce_product_options_general_product_data', 'wp_bibel_de_add_custom_product_field' );

function wp_bibel_de_add_custom_product_field() {
    woocommerce_wp_textarea_input( 
        array( 
            'id'          => '_custom_tab_description', 
            'label'       => __( 'Custom Tab Description' )
        )
    );
}

That's the complete code i wrote

add_action( 'woocommerce_product_options_general_product_data', 'wp_amaoni_de_add_custom_product_field' );

function wp_amaoni_de_add_custom_product_field() {
    woocommerce_wp_textarea_input( 
        array( 
            'id'          => '_custom_tab_description', 
            'label'       => __( 'Custom Tab Description' )
        )
    );
}

add_action( 'woocommerce_process_product_meta', 'wp_amaoni_de_save_custom_product_field' );

function wp_amaoni_de_save_custom_product_field( $post_id ){

    $custom_tab_description = $_POST['_custom_tab_description'];

    if( !empty( $custom_tab_description ) ) :
        update_post_meta( $post_id, '_custom_tab_description', esc_html( $custom_tab_description ) );
    endif; 
}
add_filter( 'woocommerce_product_tabs', 'wp_amaoni_de_add_woocommerce_product_tabs' );

function wp_amaoni_de_add_woocommerce_product_tabs( $tabs ) {
    $tabs['wp_amaoni_de_custom_tab'] = array(
        'title'     => __( 'New Product Tab' ),
        'priority'  => 50,
        'callback'  => 'wp_amaoni_de_new_product_tab_callback'
    );

    return $tabs;
}

function wp_amaoni_de_new_product_tab_callback() {
    global $post;

    echo wpautop( get_post_meta( $post->ID, '_custom_tab_description', true ) ); 
}

Answer 1

add_action('woocommerce_product_options_general_product_data', 'wp_amaoni_de_add_custom_product_field');

function wp_amaoni_de_add_custom_product_field() {

    global $post;

    $content = $post->post_content;
    $editor_id = '_custom_tab_description';

    wp_editor($content, $editor_id);
}