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 ) ); 
}

mujuonly · Accepted Answer · 2019-02-27T11:50:44.623

2

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);
}

edited Feb 27 '19 at 11:50

answered Feb 27 '19 at 11:42

mujuonly

11,370
5
45
75

Thx Mujeebu Rahman. Worked half way, because now i have the WYSIWG Editor but it will allways show "Content goes here" instead of my content. it's not saving it. How can i override this? https://imgur.com/bIF1j36 – limilo Feb 27 '19 at 11:46
@limilo Need to add code to save meta and retrieve meta – mujuonly Feb 27 '19 at 11:47
Wich is `echo wpautop( get_post_meta( $post->ID, '_custom_tab_description', true ) ); ` But it's getting overriding with your code. Could u help me out there? – limilo Feb 27 '19 at 11:49
@limilo check updated answer – mujuonly Feb 27 '19 at 11:51
Thy @Mujeebu works. Only thing is that their might be a bug or something. It's still showing html elements they way i type it. Even in text mode. https://imgur.com/a/ITJ9nZ5 – limilo Feb 27 '19 at 11:55
i think i might find the solution, but don't know where to add it. I think the do_shortcode(); is missing – limilo Feb 27 '19 at 12:10

Add WYSIWG Editor to WooCommerce product custom tab

1 Answers1