带有Wysiwyg字段的元数据框显示在Woocommerce单个产品自定义选项卡上

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

    }

}

Answer 1

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: