如何为WooCommerce变体添加子类别层级并管理变体分类字段

嘿，我来帮你搞定这个WooCommerce变体自定义字段的需求！下面分后台字段添加和前端页面展示两部分来实现，都是纯代码方案，不需要额外插件，直接就能用：

首先我们要在后台的变体编辑界面，给每个变体加上尺寸、颜色、分辨率这三个自定义输入字段，用WooCommerce自带的钩子就能轻松实现：

// 给WooCommerce变体添加屏幕相关自定义字段
add_action( 'woocommerce_product_after_variable_attributes', 'add_custom_variation_screen_fields', 10, 3 );
function add_custom_variation_screen_fields( $loop, $variation_data, $variation ) {
    // 屏幕尺寸字段
    woocommerce_wp_text_input( array(
        'id'          => '_screen_size[' . $loop . ']',
        'label'       => __('屏幕尺寸', 'woocommerce'),
        'placeholder' => '例如：15.6英寸',
        'desc_tip'    => true,
        'description' => '输入该变体对应的屏幕尺寸',
        'value'       => get_post_meta( $variation->ID, '_screen_size', true )
    ) );

    // 屏幕颜色字段
    woocommerce_wp_text_input( array(
        'id'          => '_screen_color[' . $loop . ']',
        'label'       => __('屏幕颜色', 'woocommerce'),
        'placeholder' => '例如：深空灰',
        'desc_tip'    => true,
        'description' => '输入该变体对应的屏幕颜色',
        'value'       => get_post_meta( $variation->ID, '_screen_color', true )
    ) );

    // 屏幕分辨率字段
    woocommerce_wp_text_input( array(
        'id'          => '_screen_resolution[' . $loop . ']',
        'label'       => __('屏幕分辨率', 'woocommerce'),
        'placeholder' => '例如：1920×1080',
        'desc_tip'    => true,
        'description' => '输入该变体对应的屏幕分辨率',
        'value'       => get_post_meta( $variation->ID, '_screen_resolution', true )
    ) );
}

接下来要确保这些字段的值能被正确保存到数据库里，添加保存逻辑：

// 保存变体自定义字段的值
add_action( 'woocommerce_save_product_variation', 'save_custom_variation_screen_fields', 10, 2 );
function save_custom_variation_screen_fields( $variation_id, $i ) {
    // 保存屏幕尺寸
    if ( isset( $_POST['_screen_size'][$i] ) ) {
        update_post_meta( $variation_id, '_screen_size', sanitize_text_field( $_POST['_screen_size'][$i] ) );
    }

    // 保存屏幕颜色
    if ( isset( $_POST['_screen_color'][$i] ) ) {
        update_post_meta( $variation_id, '_screen_color', sanitize_text_field( $_POST['_screen_color'][$i] ) );
    }

    // 保存屏幕分辨率
    if ( isset( $_POST['_screen_resolution'][$i] ) ) {
        update_post_meta( $variation_id, '_screen_resolution', sanitize_text_field( $_POST['_screen_resolution'][$i] ) );
    }
}

现在后台的字段已经能正常编辑保存了，接下来要在前端产品页展示这些信息，并且实现用户切换变体时自动更新对应规格的效果，需要结合PHP和JS来完成：

第一步：添加展示区域的PHP代码 #

这段代码会在产品详情页的摘要区域下方，添加一个屏幕规格的展示容器，默认显示第一个变体的信息：

// 在单个产品页添加变体屏幕规格展示区域
add_action( 'woocommerce_single_product_summary', 'display_variation_screen_specs', 25 );
function display_variation_screen_specs() {
    global $product;

    // 只对可变产品生效
    if ( ! $product->is_type( 'variable' ) ) return;

    echo '<div class="variation-screen-specs" style="margin: 15px 0; padding: 15px; border-top: 1px solid #eee;">';
    echo '<h4>' . __('屏幕规格', 'woocommerce') . '</h4>';
    
    // 初始化显示第一个变体的规格（如果有可用变体）
    $variations = $product->get_available_variations();
    if ( ! empty( $variations ) ) {
        $first_variation = $variations[0];
        $screen_size = get_post_meta( $first_variation['variation_id'], '_screen_size', true );
        $screen_color = get_post_meta( $first_variation['variation_id'], '_screen_color', true );
        $screen_resolution = get_post_meta( $first_variation['variation_id'], '_screen_resolution', true );

        echo '<div class="specs-content">';
        if ( $screen_size ) echo '<p><strong>' . __('尺寸：') . '</strong>' . $screen_size . '</p>';
        if ( $screen_color ) echo '<p><strong>' . __('颜色：') . '</strong>' . $screen_color . '</p>';
        if ( $screen_resolution ) echo '<p><strong>' . __('分辨率：') . '</strong>' . $screen_resolution . '</p>';
        echo '</div>';
    } else {
        echo '<p class="specs-content">暂无可用变体规格</p>';
    }
    echo '</div>';
}

第二步：添加变体切换的JS逻辑 #

这段代码会监听用户的变体选择事件，实时更新展示的规格信息：

// 加载变体切换的JS脚本
add_action( 'wp_footer', 'variation_screen_specs_js' );
function variation_screen_specs_js() {
    global $product;

    if ( ! $product->is_type( 'variable' ) ) return;
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // 监听变体选中事件，更新规格
            $('form.variations_form').on('show_variation', function(event, variation) {
                // 获取当前变体的自定义字段值
                var screenSize = variation.screen_size || '';
                var screenColor = variation.screen_color || '';
                var screenResolution = variation.screen_resolution || '';

                // 构建展示的HTML内容
                var specsHtml = '';
                if (screenSize) specsHtml += '<p><strong>尺寸：</strong>' + screenSize + '</p>';
                if (screenColor) specsHtml += '<p><strong>颜色：</strong>' + screenColor + '</p>';
                if (screenResolution) specsHtml += '<p><strong>分辨率：</strong>' + screenResolution + '</p>';

                // 更新页面上的规格内容
                $('.specs-content').html(specsHtml);
            });

            // 当取消选择变体时，显示提示文本
            $('form.variations_form').on('hide_variation', function() {
                $('.specs-content').html('<p>请选择产品变体查看屏幕规格</p>');
            });
        });
    </script>
    <?php
}

// 将自定义字段数据传递给JS的变体对象
add_filter( 'woocommerce_available_variation', 'add_screen_fields_to_variation_data' );
function add_screen_fields_to_variation_data( $variation ) {
    $variation['screen_size'] = get_post_meta( $variation['variation_id'], '_screen_size', true );
    $variation['screen_color'] = get_post_meta( $variation['variation_id'], '_screen_color', true );
    $variation['screen_resolution'] = get_post_meta( $variation['variation_id'], '_screen_resolution', true );
    return $variation;
}

• 这些代码建议放在子主题的functions.php文件里，或者创建一个简单的自定义插件来添加，这样主题更新时不会丢失代码。
• 你可以根据需求调整字段类型（比如把颜色改成下拉选择框），或者通过CSS修改前端展示区域的样式，让它更贴合你的网站风格。

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