Meta box with a wysiwyg field displayed on Woocommerce single product custom tabs

Question

Need to display a custom fields in the related products on a single product page.

I would like to add a meta box to the Add New Product fields and display results on custom tab on single product page under reviews.I tried using code but nothing shows on the page. Adding extra product tab helps me in adding extra information. So adding, saving and displaying product is what I am looking for.

add_filter( 'add_meta_boxes', 'bhww_core_cpt_metaboxes' );

function bhww_core_cpt_metaboxes( $meta_boxes ) {

    //global $prefix;
    $prefix = '_bhww_'; // Prefix for all fields

    // Add metaboxes to the 'Product' CPT
    $meta_boxes[] = array(
        'id'         => 'bhww_woo_tabs_metabox',
        'title'      => 'Additional Product Information - <strong>Optional</strong>',
        'pages'      => array( 'product' ), // Which post type to associate with?
        'context'    => 'normal',
        'priority'   => 'default',
        'show_names' => true,                   
        'fields'     => array(
            array(
                'name'    => __( 'Ingredients', 'cmb' ),
                'desc'    => __( 'Anything you enter here will be displayed on the Ingredients tab.', 'cmb' ),
                'id'      => $prefix . 'ingredients_wysiwyg',
                'type'    => 'wysiwyg',
                'options' => array( 'textarea_rows' => 5, ),
            ),
            array(
                'name'    => __( 'Benefits', 'cmb' ),
                'desc'    => __( 'Anything you enter here will be displayed on the Benefits tab.', 'cmb' ),
                'id'      => $prefix . 'benefits_wysiwyg',
                'type'    => 'wysiwyg',
                'options' => array( 'textarea_rows' => 5, ),
            ),
        ),
    );

    return $meta_boxes;

}

/////////////////////////////////////////

add_filter( 'woocommerce_product_data_tabs', 'bhww_woo_extra_tabs' );

function bhww_woo_extra_tabs( $tabs1 ) {

    global $post;
    $product_ingredients = get_post_meta( $post->ID, '_bhww_ingredients_wysiwyg', true );
    $product_benefits    = get_post_meta( $post->ID, '_bhww_benefits_wysiwyg', true );

    if ( ! empty( $product_ingredients ) ) {

        $tabs1['ingredients_tab'] = array(
            'title'    => __( 'Ingredients', 'woocommerce' ),
            'priority' => 15,
            'callback' => 'bhww_woo_ingredients_tab_content'
        );

    }

    if ( ! empty( $product_benefits ) ) {

        $tabs1['benefits_tab'] = array(
            'title'    => __( 'Benefits', 'woocommerce' ),
            'priority' => 16,
            'callback' => 'bhww_woo_benefits_tab_content'
        );

    }

    return $tabs1;

}

function bhww_woo_ingredients_tab_content() {

    global $post;
    $product_ingredients = get_post_meta( $post->ID, '_bhww_ingredients_wysiwyg', true );

    if ( ! empty( $product_ingredients ) ) {

        echo '<h2>' . esc_html__( 'Product Ingredients', 'woocommerce' ) . '</h2>';

        // Updated to apply the_content filter to WYSIWYG content
        echo apply_filters( 'the_content', $product_ingredients );

    }

}

function bhww_woo_benefits_tab_content() {

    global $post;
    $product_benefits = get_post_meta( $post->ID, '_bhww_benefits_wysiwyg', true );

    if ( ! empty( $product_benefits ) ) {

        echo '<h2>' . esc_html__( 'Product Benefits', 'woocommerce' ) . '</h2>';

        // Updated to apply the_content filter to WYSIWYG content
        echo apply_filters( 'the_content', $product_benefits );

    }

}

LoicTheAztec · Accepted Answer · 2017-11-06T22:47:31.220

Here is the way to add your 2 custom fields (editor wysiwyg) in Admin edit product pages and display the values in front-end single product pages custom tabs:

## ---- 1. Backend ---- ##

// Adding a custom Meta container to admin products pages
add_action( 'add_meta_boxes', 'create_custom_meta_box' );
if ( ! function_exists( 'create_custom_meta_box' ) )
{
    function create_custom_meta_box()
    {
        add_meta_box(
            'custom_product_meta_box',
            __( 'Additional Product Information <em>(optional)</em>', 'cmb' ),
            'add_custom_content_meta_box',
            'product',
            'normal',
            'default'
        );
    }
}

//  Custom metabox content in admin product pages
if ( ! function_exists( 'add_custom_content_meta_box' ) ){
    function add_custom_content_meta_box( $post ){
        $prefix = '_bhww_'; // global $prefix;

        $ingredients = get_post_meta($post->ID, $prefix.'ingredients_wysiwyg', true) ? get_post_meta($post->ID, $prefix.'ingredients_wysiwyg', true) : '';
        $benefits = get_post_meta($post->ID, $prefix.'benefits_wysiwyg', true) ? get_post_meta($post->ID, $prefix.'benefits_wysiwyg', true) : '';
        $args['textarea_rows'] = 6;

        echo '<p>'.__( 'Ingredients', 'cmb' ).'</p>';
        wp_editor( $ingredients, 'ingredients_wysiwyg', $args );

        echo '<p>'.__( 'Benefits', 'cmb' ).'</p>';
        wp_editor( $benefits, 'benefits_wysiwyg', $args );

        echo '<input type="hidden" name="custom_product_field_nonce" value="' . wp_create_nonce() . '">';
    }
}



//Save the data of the Meta field
add_action( 'save_post', 'save_custom_content_meta_box', 10, 1 );
if ( ! function_exists( 'save_custom_content_meta_box' ) )
{

    function save_custom_content_meta_box( $post_id ) {
        $prefix = '_bhww_'; // global $prefix;

        // We need to verify this with the proper authorization (security stuff).

        // Check if our nonce is set.
        if ( ! isset( $_POST[ 'custom_product_field_nonce' ] ) ) {
            return $post_id;
        }
        $nonce = $_REQUEST[ 'custom_product_field_nonce' ];

        //Verify that the nonce is valid.
        if ( ! wp_verify_nonce( $nonce ) ) {
            return $post_id;
        }

        // If this is an autosave, our form has not been submitted, so we don't want to do anything.
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
            return $post_id;
        }

        // Check the user's permissions.
        if ( 'product' == $_POST[ 'post_type' ] ){
            if ( ! current_user_can( 'edit_product', $post_id ) )
                return $post_id;
        } else {
            if ( ! current_user_can( 'edit_post', $post_id ) )
                return $post_id;
        }

        // Sanitize user input and update the meta field in the database.
        update_post_meta( $post_id, $prefix.'ingredients_wysiwyg', wp_kses_post($_POST[ 'ingredients_wysiwyg' ]) );
        update_post_meta( $post_id, $prefix.'benefits_wysiwyg', wp_kses_post($_POST[ 'benefits_wysiwyg' ]) );
    }
}

## ---- 2. Front-end ---- ##

// Create custom tabs in product single pages
add_filter( 'woocommerce_product_tabs', 'custom_product_tabs' );
function custom_product_tabs( $tabs ) {
    global $post;

    $product_ingredients = get_post_meta( $post->ID, '_bhww_ingredients_wysiwyg', true );
    $product_benefits    = get_post_meta( $post->ID, '_bhww_benefits_wysiwyg', true );

    if ( ! empty( $product_ingredients ) )
        $tabs['ingredients_tab'] = array(
            'title'    => __( 'Ingredients', 'woocommerce' ),
            'priority' => 45,
            'callback' => 'ingredients_product_tab_content'
        );

    if ( ! empty( $product_benefits ) )
        $tabs['benefits_tab'] = array(
            'title'    => __( 'Benefits', 'woocommerce' ),
            'priority' => 50,
            'callback' => 'benefits_product_tab_content'
        );

    return $tabs;
}

// Add content to custom tab in product single pages (1)
function ingredients_product_tab_content() {
    global $post;

    $product_ingredients = get_post_meta( $post->ID, '_bhww_ingredients_wysiwyg', true );

    if ( ! empty( $product_ingredients ) ) {
        echo '<h2>' . __( 'Product Ingredients', 'woocommerce' ) . '</h2>';

        // Updated to apply the_content filter to WYSIWYG content
        echo apply_filters( 'the_content', $product_ingredients );
    }
}

// Add content to custom tab in product single pages (2)
function benefits_product_tab_content() {
    global $post;

    $product_benefits = get_post_meta( $post->ID, '_bhww_benefits_wysiwyg', true );

    if ( ! empty( $product_benefits ) ) {
        echo '<h2>' . __( 'Product Benefits', 'woocommerce' ) . '</h2>';

        // Updated to apply the_content filter to WYSIWYG content
        echo apply_filters( 'the_content', $product_benefits );
    }
}

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

Tested and works. You will get:

1) In backend:

2) In Front-end:

First of all my apology for late was not well.So under general tab if i create a custom field text area say below tax class then inside that text area i want to add editor wysiwyg. — Amit, Nov 16 '17 at 18:13
@Amit Thanks I will check if it's possible notifying you… In your new question that you have maid you are asking too much things in one question… You should better divide this progressively… see you tomorow — LoicTheAztec, Nov 16 '17 at 19:04
@Amit Ok yes this is possible and works… so you can make a new question and I will answer it… notify me here please. Thanks — LoicTheAztec, Nov 18 '17 at 18:16

Meta box with a wysiwyg field displayed on Woocommerce single product custom tabs

1 Answers1

Linked

Related