如何在WooCommerce商品页标题下显示pa_intensiteit属性图片色板

实现步骤 #

1. 替换原有代码，支持归档页和单商品页显示 #

将你原有的代码替换为以下PHP代码，它会同时在店铺归档页和单商品页的标题下方展示属性与对应色板：

// 注册钩子：归档页和单商品页都生效
add_action('woocommerce_shop_loop_item_title', 'display_intensiteit_attribute_with_swatch', 15);
add_action('woocommerce_single_product_summary', 'display_intensiteit_attribute_with_swatch', 15);

function display_intensiteit_attribute_with_swatch(){
    global $product;

    // 产品不存在或无对应属性时直接返回
    if ( ! $product || ! $product->get_attribute('pa_intensiteit') ) {
        return;
    }

    $intensiteit_terms = $product->get_attribute('pa_intensiteit');
    $terms = explode(', ', $intensiteit_terms); // 拆分多属性值

    echo '<div class="intensiteit-swatch-container">';
    echo '<span class="sterkte-label">sterkte: </span>';
    
    foreach ( $terms as $term_name ) {
        $term = get_term_by('name', $term_name, 'pa_intensiteit');
        if ( $term ) {
            // 获取术语自定义颜色，无设置则默认绿色
            $swatch_color = get_term_meta($term->term_id, 'color', true) ?: '#2ecc71';

            // 输出色板+文字
            echo '<span class="intensiteit-swatch-item">';
            echo '<span class="intensiteit-swatch" style="background-color: ' . esc_attr($swatch_color) . ';"></span>';
            echo '<span class="intensiteit-label">' . esc_html($term_name) . '</span>';
            echo '</span>';
        }
    }
    
    echo '</div>';
}

2. 添加CSS样式渲染圆形色板 #

将以下CSS代码添加到主题的style.css文件，或通过WordPress后台「外观」→「自定义」→「额外CSS」面板添加：

/* 色板容器样式 */
.intensiteit-swatch-container {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 圆形色板样式 */
.intensiteit-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
    border: 1px solid rgba(0,0,0,0.1); /* 可选：添加边框增强视觉 */
}

/* 属性项对齐 */
.intensiteit-swatch-item {
    display: flex;
    align-items: center;
}

/* 标签样式 */
.sterkte-label {
    font-weight: 500;
}

3. （可选）为每个属性术语自定义颜色 #

如果需要给不同的intensiteit属性值设置不同颜色，添加以下PHP代码到主题的functions.php文件，这样就能在后台编辑属性术语时设置对应颜色：

// 添加属性术语的颜色字段
add_action('pa_intensiteit_add_form_fields', 'add_intensiteit_term_color_field', 10);
add_action('pa_intensiteit_edit_form_fields', 'edit_intensiteit_term_color_field', 10, 2);

function add_intensiteit_term_color_field() {
    ?>
    <div class="form-field">
        <label for="color"><?php _e('色板颜色', 'woocommerce'); ?></label>
        <input type="color" name="color" id="color" value="#2ecc71">
        <p class="description"><?php _e('选择该强度对应的色板颜色', 'woocommerce'); ?></p>
    </div>
    <?php
}

function edit_intensiteit_term_color_field($term) {
    $color = get_term_meta($term->term_id, 'color', true) ?: '#2ecc71';
    ?>
    <tr class="form-field">
        <th scope="row" valign="top"><label for="color"><?php _e('色板颜色', 'woocommerce'); ?></label></th>
        <td>
            <input type="color" name="color" id="color" value="<?php echo esc_attr($color); ?>">
            <p class="description"><?php _e('选择该强度对应的色板颜色', 'woocommerce'); ?></p>
        </td>
    </tr>
    <?php
}

// 保存术语颜色设置
add_action('edited_pa_intensiteit', 'save_intensiteit_term_color_field', 10, 2);
add_action('create_pa_intensiteit', 'save_intensiteit_term_color_field', 10, 2);

function save_intensiteit_term_color_field($term_id) {
    if ( isset($_POST['color']) ) {
        update_term_meta($term_id, 'color', sanitize_hex_color($_POST['color']));
    }
}

完成以上步骤后，商品归档页和单商品页的标题下方就会显示带绿色圆形色板的intensiteit属性，也支持自定义每个属性值的颜色。

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