如何为WooCommerce产品添加可后台单独设置内容的动态自定义标签页

Absolutely! You can create custom product tabs with per-product editable content without relying on plugins. Let's expand your existing code to add backend fields for each tab, then pull that dynamic content into the frontend tabs. Here's how to do it step by step:

1. Add Custom Metaboxes to Product Edit Page #

First, we'll add editable rich-text fields in the WooCommerce product backend so you can input unique content for each tab per product.

// Add custom metaboxes for product tabs
add_action('add_meta_boxes', 'woo_add_product_tab_metaboxes');
function woo_add_product_tab_metaboxes() {
    add_meta_box(
        'woo_product_custom_tabs',
        __('Custom Tab Content', 'woocommerce'),
        'woo_render_product_tab_metaboxes',
        'product',
        'normal',
        'default'
    );
}

// Render the metabox content with rich text editors
function woo_render_product_tab_metaboxes($post) {
    // Nonce field for security
    wp_nonce_field('woo_save_product_tab_content', 'woo_product_tab_nonce');

    // Get saved content (if exists)
    $attrib_desc_content = get_post_meta($post->ID, '_woo_attrib_desc_content', true);
    $qty_pricing_content = get_post_meta($post->ID, '_woo_qty_pricing_content', true);
    $other_products_content = get_post_meta($post->ID, '_woo_other_products_content', true);

    // Output fields with WordPress editor for rich content support
    echo '<h4>' . __('Attribute Description Tab Content', 'woocommerce') . '</h4>';
    wp_editor($attrib_desc_content, 'woo_attrib_desc_content', array('textarea_rows' => 5));

    echo '<h4>' . __('Quantity Pricing Tab Content', 'woocommerce') . '</h4>';
    wp_editor($qty_pricing_content, 'woo_qty_pricing_content', array('textarea_rows' => 5));

    echo '<h4>' . __('Other Products Tab Content', 'woocommerce') . '</h4>';
    wp_editor($other_products_content, 'woo_other_products_content', array('textarea_rows' => 5));
}

// Save the metabox content securely
add_action('save_post_product', 'woo_save_product_tab_content');
function woo_save_product_tab_content($post_id) {
    // Verify nonce security
    if (!isset($_POST['woo_product_tab_nonce']) || !wp_verify_nonce($_POST['woo_product_tab_nonce'], 'woo_save_product_tab_content')) {
        return;
    }

    // Check user edit permissions
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    // Sanitize and save each field's content
    if (isset($_POST['woo_attrib_desc_content'])) {
        update_post_meta($post_id, '_woo_attrib_desc_content', wp_kses_post($_POST['woo_attrib_desc_content']));
    }
    if (isset($_POST['woo_qty_pricing_content'])) {
        update_post_meta($post_id, '_woo_qty_pricing_content', wp_kses_post($_POST['woo_qty_pricing_content']));
    }
    if (isset($_POST['woo_other_products_content'])) {
        update_post_meta($post_id, '_woo_other_products_content', wp_kses_post($_POST['woo_other_products_content']));
    }
}

2. Modify Tabs Callback to Use Dynamic Content #

Next, update your existing tab functions to pull the saved backend content instead of static text. We'll also add a check to only show tabs when they have content (optional but keeps your product pages clean):

add_filter('woocommerce_product_tabs', 'woo_custom_product_tabs');
function woo_custom_product_tabs($tabs) {
    // 1) Keep your existing tab removals
    unset($tabs['description']);
    // unset($tabs['reviews']);
    unset($tabs['additional_information']);

    global $post;

    // 2) Add tabs only if content exists (remove this check if you want tabs to always show)
    $attrib_desc_content = get_post_meta($post->ID, '_woo_attrib_desc_content', true);
    if (!empty($attrib_desc_content)) {
        $tabs['attrib_desc_tab'] = array(
            'title' => __('Desc', 'woocommerce'),
            'priority' => 100,
            'callback' => 'woo_attrib_desc_tab_content'
        );
    }

    $qty_pricing_content = get_post_meta($post->ID, '_woo_qty_pricing_content', true);
    if (!empty($qty_pricing_content)) {
        $tabs['qty_pricing_tab'] = array(
            'title' => __('Quantity Pricing', 'woocommerce'),
            'priority' => 110,
            'callback' => 'woo_qty_pricing_tab_content'
        );
    }

    $other_products_content = get_post_meta($post->ID, '_woo_other_products_content', true);
    if (!empty($other_products_content)) {
        $tabs['other_products_tab'] = array(
            'title' => __('Other Products', 'woocommerce'),
            'priority' => 120,
            'callback' => 'woo_other_products_tab_content'
        );
    }

    return $tabs;
}

// Updated tab content callbacks to pull dynamic content
function woo_attrib_desc_tab_content() {
    global $post;
    $content = get_post_meta($post->ID, '_woo_attrib_desc_content', true);
    echo '<h2>' . __('Description', 'woocommerce') . '</h2>';
    echo wpautop($content); // Format content with proper paragraph spacing
}

function woo_qty_pricing_tab_content() {
    global $post;
    $content = get_post_meta($post->ID, '_woo_qty_pricing_content', true);
    echo '<h2>' . __('Quantity Pricing', 'woocommerce') . '</h2>';
    echo wpautop($content);
}

function woo_other_products_tab_content() {
    global $post;
    $content = get_post_meta($post->ID, '_woo_other_products_content', true);
    echo '<h2>' . __('Other Products', 'woocommerce') . '</h2>';
    echo wpautop($content);
}

How It Works #

• Backend: A new metabox titled "Custom Tab Content" will appear on every product edit page, with rich text editors for each tab (so you can add formatting, links, images, etc.).
• Frontend: Tabs will only display if you've added content to them for that specific product, and the content will match exactly what you input in the backend.
• Security: We use nonce verification and wp_kses_post to sanitize user input, ensuring your site stays secure.

Quick Notes #

• Add all this code to your child theme's functions.php file (never edit the parent theme directly—your changes will be lost on updates!).
• Adjust tab titles, priorities, or editor settings to match your store's needs.
• If you want tabs to show even with empty content, just remove the if (!empty(...)) checks in the woo_custom_product_tabs function.

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