WooCommerce自定义textarea字段如何支持HTML标签并正常显示？

Hey there! Let's tackle your custom field HTML issue—this is a super common problem when dealing with user-inputted formatted content, so I’ve got you covered.

Why Your HTML Content Disappears After Saving #

Most CMS platforms (like WordPress, which I’m guessing you’re using for products) automatically filter HTML from custom fields by default to prevent cross-site scripting (XSS) attacks. If your field’s save logic is stripping all HTML tags entirely, that’s why your content vanishes when you hit save. The system sees the HTML as potentially unsafe and discards it.

Why Your Tags Show Up as Plain Text Instead of Rendering #

When you replaced the function and saw <b>blabla</b> instead of bold text, that’s because your output function is escaping HTML characters (like turning < into <). Browsers interpret these escaped characters as plain text instead of HTML tags.

Fixes to Get HTML Working Properly #

Let’s break this into two parts: allowing HTML during save, and rendering it correctly on the front end.

1. Allow Specific HTML Tags When Saving the Field #

Instead of letting the system strip all HTML, explicitly define which tags are safe (like <b>, <i>, and styled <span> for colors). Here’s how to do this with a custom save function (adjust for your platform if it’s not WordPress):

// Hook into product save action
function save_safe_custom_product_field( $post_id ) {
    // Check if our field is submitted
    if ( isset( $_POST['your_custom_field_key'] ) ) {
        // Define allowed HTML tags and attributes
        $allowed_html = array(
            'b' => array(), // Bold tag, no attributes needed
            'i' => array(), // Italic tag
            'span' => array(
                'style' => array() // Allow inline styles for color
            )
        );
        // Sanitize the input to keep only allowed tags
        $clean_content = wp_kses( $_POST['your_custom_field_key'], $allowed_html );
        // Update the custom field with the sanitized content
        update_post_meta( $post_id, 'your_custom_field_key', $clean_content );
    }
}
add_action( 'save_post_product', 'save_safe_custom_product_field' );

This uses wp_kses—a safe sanitization function that only keeps the tags you explicitly allow, so you avoid security risks while letting users format content.

2. Render HTML Correctly on the Front End #

Instead of using an escaping function (like esc_html()), use a function that preserves safe HTML. For WordPress, wp_kses_post works perfectly here:

// Fetch and display the custom field content
$custom_content = get_post_meta( get_the_ID(), 'your_custom_field_key', true );
if ( ! empty( $custom_content ) ) {
    echo wp_kses_post( $custom_content );
}

If you’re not using WordPress, look for a similar sanitized output function in your platform—avoid raw echo unless you’ve already sanitized the input (since raw echo can be unsafe if someone inputs malicious code).

Quick Recap #

• Save issue: Your system was stripping all HTML. Fix by explicitly allowing safe tags during save with a sanitization function.
• Render issue: Your output was escaping HTML. Fix by using a safe output function that preserves allowed tags.

内容的提问来源于stack exchange，提问作者Dr.MTR