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?
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.