Adding Custom Text Area to WooCommerce Product

There is a display bug in WooCommerce when displaying a WYSIWYG editor on admin product pages inside any “product data” setting tabs. Try it:

// Display a custom field in product admin pages
add_action( 'woocommerce_product_options_general_product_data', 'add_product_custom_wysiwyg_field' );
function add_product_custom_wysiwyg_field() {
    global $product_object;

    echo '<div class="product_custom_field">
    <p>' . __( "Mer information" ) . '</p>
    <div style="padding:9px;">';

    $content  = $product_object->get_meta( $meta_key );

    wp_editor( $content, '_technical_specs', ['textarea_rows' => 6] );

    echo '</div></div>';
}

You will get something like (and it produce some JS errors):

enter image description here

The best way is to add a custom metabox instead, just like the product short description:

enter image description here

So your revisited code will be instead:

// Add custom Meta box to admin products pages
add_action( 'add_meta_boxes', 'create_product_technical_specs_meta_box' );
function create_product_technical_specs_meta_box() {
    add_meta_box(
        'custom_product_meta_box',
        __( 'Technical specs', 'cmb' ),
        'add_custom_content_meta_box',
        'product',
        'normal',
        'default'
    );
}

// Custom metabox content in admin product pages
function add_custom_content_meta_box( $post ){
    $product = wc_get_product($post->ID);
    $content = $product->get_meta( '_technical_specs' );

    echo '<div class="product_technical_specs">';

    wp_editor( $content, '_technical_specs', ['textarea_rows' => 10]);

    echo '</div>';
}

// Save WYSIWYG field value from product admin pages
add_action( 'woocommerce_admin_process_product_object', 'save_product_custom_wysiwyg_field', 10, 1 );
function save_product_custom_wysiwyg_field( $product ) {
    if (  isset( $_POST['_technical_specs'] ) )
         $product->update_meta_data( '_technical_specs', wp_kses_post( $_POST['_technical_specs'] ) );
}

// Add "technical specs" product tab
add_filter( 'woocommerce_product_tabs', 'add_technical_specs_product_tab', 10, 1 );
function add_technical_specs_product_tab( $tabs ) {
    $tabs['test_tab'] = array(
        'title'         => __( 'Mer information', 'woocommerce' ),
        'priority'      => 50,
        'callback'      => 'display_technical_specs_product_tab_content'

    );

    return $tabs;
}

// Display "technical specs" content tab
function display_technical_specs_product_tab_content() {
    global $product;
    echo '<div class="wrapper-technical_specs">' . $product->get_meta( '_technical_specs' ) . '</div>';
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

deneme bonusu veren sitelerbahis casinomakrobetceltabetpinbahispolobetpolobet girişpinbahis girişmakrobet girişpulibet girişmobilbahis girişkolaybet giriş