WooCommerce产品iframe自定义字段无法正常存储与显示的问题求助

The root cause of those unwanted escaped quotes (\") in your stored and output content is the use of esc_attr() when saving the field. That function is built specifically for sanitizing HTML attribute values (like the text inside an input tag), so it automatically escapes quotes and special characters—great for attributes, but totally wrong for full blocks of HTML/iframe code.

Here's how to fix this properly, while keeping your site secure:

Step 1: Update the Save Function #

Replace esc_attr() with a sanitization tool designed for HTML content. You have two solid options:

Option 1: Use wp_kses_post() (Simpler, Secure Defaults)

This function lets through all HTML tags allowed in WordPress posts, which covers your iframe, style, div, and span elements perfectly:

add_action('woocommerce_admin_process_product_object', 'save_product_video_field', 10, 1 );
function save_product_video_field( $product ){
    if( isset($_POST['_product_video_field']) )
        $product->update_meta_data( '_product_video_field', wp_kses_post($_POST['_product_video_field']) );
}

Option 2: Custom wp_kses() Setup (Tighter Security)

If you want to explicitly allow only the exact tags and attributes your code uses (recommended for maximum safety), define a custom allowed HTML list:

add_action('woocommerce_admin_process_product_object', 'save_product_video_field', 10, 1 );
function save_product_video_field( $product ){
    if( isset($_POST['_product_video_field']) ){
        $allowed_html = array(
            'style' => array(),
            'div' => array(
                'class' => array()
            ),
            'span' => array(
                'style' => array()
            ),
            'iframe' => array(
                'src' => array(),
                'title' => array(),
                'allowfullscreen' => array(),
                'webkitallowfullscreen' => array(),
                'mozallowfullscreen' => array()
            )
        );
        $product->update_meta_data( '_product_video_field', wp_kses($_POST['_product_video_field'], $allowed_html) );
    }
}

Step 2: Ensure Proper Frontend Output #

When displaying the code on the product page, don’t re-escape the HTML. Use the same sanitization function to keep it safe while rendering correctly:

add_action('woocommerce_single_product_summary', 'display_product_video_field', 25 );
function display_product_video_field(){
    global $product;
    $video_code = $product->get_meta( '_product_video_field' );
    
    if( !empty($video_code) ){
        echo wp_kses_post( $video_code );
        // If using the custom allowed HTML array, replace with wp_kses($video_code, $allowed_html)
    }
}

Why This Works #

• Unlike esc_attr(), wp_kses_post() and wp_kses() sanitize HTML by removing unsafe tags/attributes instead of escaping valid ones. This keeps your quotes intact and lets your iframe/style code render as intended.
• This approach keeps your site secure—you won’t be opening doors to malicious code, which would happen if you just removed sanitization entirely.

After making these changes, your iframe code will be stored without unwanted backslashes and will work correctly on the frontend.

内容的提问来源于stack exchange，提问作者ebeliejinfren