wordpresswoocommercecustom-fieldsmeta-boxes

How do I allow html in Woocommerce custom meta box


How to I create a custom field meta box for woocommerce product page that displays html.

I want to place a iframe preview of a flip book into it. I tried placing the iframe around the meta and using only the url but that caused other issued. So I just want a simple way to insert html into a meta box.

Below is my code :

// 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',
        __( 'Custom Previews', '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;

    $preview = get_post_meta($post->ID, $prefix.'preview_wysiwyg', true) ? get_post_meta($post->ID, $prefix.'preview_wysiwyg', true) : '';
    $args['textarea_rows'] = 6;

    echo '<p>'.__( 'preview', 'cmb' ).'</p>';
    wp_editor( $preview, 'preview_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.'preview_wysiwyg', wp_kses_post($_POST[ 'preview_wysiwyg' ]) );
    
}
}

// Create custom tabs in product single pages
add_filter( 'woocommerce_after_single_product_summary', 'preview_product_content' );

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

$product_preview = get_post_meta( $post->ID, '_bhww_preview_wysiwyg', true );

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

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

Solution

  • To make it accept html I had to update the sanitize to allow html

    update_post_meta( $post_id, $prefix.'preview_wysiwyg', wp_kses_post($_POST[ 'preview_wysiwyg' ]) );
    

    changed to

    update_post_meta( $post_id, $prefix.'bpreview_wysiwyg', wp_kses_post($_POST[ 'bpreview_wysiwyg' ],$allowed) );
    

    and I added the variable $allowed = wp_kses_allowed_html();

    however this still does not allow iframes

    and when I tried to place iframe code around the output I get a 404 server side access not allowed.