Adding Custom Text Area to WooCommerce Product

Question

Some of the products in my store has quite long descriptions. Therefore I want to use the main Description for just a basic description and add an extra tab for i.e. Technical Specs.

I'm using the main WooCommerce import tool to import my products, and it would be great if I could add the technical specs into the correct tab during import.

The following piece of code does the trick, but it saves the HTML as text. How do I go about to change that?

/**
* WooCommerce: Adds custom fields to backend
**/

// Display fields
    add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');

// Save fields
    add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');

function woocommerce_product_custom_fields()
{
    global $woocommerce, $post;
    echo '<div class="product_custom_field">';

    //Custom Product  Textarea
    woocommerce_wp_textarea_input(
        array(
            'id' => '_custom_product_textarea',
            'placeholder' => 'Vill du ange ytterligare information om produkten?',
            'label' => __('Mer information', 'woocommerce')
        )
    );
    echo '</div>';
}

// Save to database
function woocommerce_product_custom_fields_save($post_id)
{
// Custom Product Textarea Field
    $woocommerce_custom_procut_textarea = $_POST['_custom_product_textarea'];
    if (!empty($woocommerce_custom_procut_textarea))
        update_post_meta($post_id, '_custom_product_textarea', esc_attr($woocommerce_custom_procut_textarea));
}

/**
 * Add a custom product data tab
 */
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {

    // Adds the new tab

    $tabs['test_tab'] = array(
        'title'         => __( 'Mer information', 'woocommerce' ),
        'priority'      => 50,
        'callback'      => 'woo_new_product_tab_content'

    );

    return $tabs;

}
function woo_new_product_tab_content() {
// The new tab content
echo get_post_meta(get_the_ID(), '_custom_product_textarea', true);
}

I'm guessing it has something to do with update_post_meta() and it sanitizes the text?

Answer 1

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):

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

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.