WooCommerce变量产品添加「最受欢迎」标签功能实现求助

问题背景 #

在WooCommerce网站中，需要为后台选中的变体选项添加「最常选择」标签。已完成后台自定义复选框的添加与元数据保存，但前端无法为对应变体（使用CFVSW插件的色块样式变体，而非原生下拉选择）添加标签。

问题原因 #

1. 原JS代码针对WooCommerce原生<select>变体选项编写，但当前网站使用CFVSW插件生成的色块式变体选项（cfvsw-swatches-option类的div元素），选择器不匹配。
2. 未将后台标记的「最常选择」变体信息传递到前端JS，无法关联色块与标记的变体。

完整解决方案代码 #

1. PHP代码（后台字段+前端数据传递） #

// 后台变体编辑页添加复选框
add_action('woocommerce_product_after_variable_attributes', 'add_most_chosen_variation_field', 10, 3);
function add_most_chosen_variation_field($loop, $variation_data, $variation)
{
    $most_chosen = get_post_meta($variation->ID, '_most_chosen_variation', true);
    ?>
    <label for="most-chosen-variation-<?php echo $loop; ?>">
        <input type="checkbox" name="most_chosen_variation[<?php echo $loop; ?>]" id="most-chosen-variation-<?php echo $loop; ?>" value="1" <?php checked($most_chosen, '1'); ?> />
        最常选择变体
    </label>
    <?php
}

// 保存后台复选框数据
add_action('woocommerce_save_product_variation', 'save_most_chosen_variation_field', 10, 2);
function save_most_chosen_variation_field($variation_id, $loop)
{
    $most_chosen = isset($_POST['most_chosen_variation'][$loop]) ? '1' : '0';
    update_post_meta($variation_id, '_most_chosen_variation', $most_chosen);
}

// 将标记的变体数据传递到前端
add_action('woocommerce_single_product_summary', 'pass_most_chosen_variation_data', 15);
function pass_most_chosen_variation_data()
{
    global $product;
    if (!$product->is_type('variable')) return;

    $most_chosen_variations = array();
    foreach ($product->get_available_variations() as $variation) {
        if (get_post_meta($variation['variation_id'], '_most_chosen_variation', true) == '1') {
            $attributes = $variation['attributes'];
            $most_chosen_variations[] = $attributes;
        }
    }
    ?>
    <script>
        var mostChosenVariations = <?php echo json_encode($most_chosen_variations); ?>;
    </script>
    <?php
}

// 添加标签样式
add_action('wp_head', 'add_most_chosen_variation_css');
function add_most_chosen_variation_css()
{
    ?>
    <style>
        .most-chosen-label {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #f0ad4e;
            color: #fff;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
            z-index: 10;
        }
        .cfvsw-swatches-option {
            position: relative; /* 让标签相对于色块定位 */
        }
    </style>
    <?php
}

2. JS代码（前端标签渲染） #

add_action('wp_footer', 'render_most_chosen_variation_labels');
function render_most_chosen_variation_labels()
{
    ?>
    <script>
        jQuery(document).ready(function($) {
            // 遍历所有标记的变体属性
            mostChosenVariations.forEach(function(variationAttrs) {
                // 遍历属性键值，找到对应的色块容器
                for (var attrKey in variationAttrs) {
                    var attrValue = variationAttrs[attrKey];
                    // 找到对应的色块元素
                    var swatchOption = $('.cfvsw-swatches-container[swatches-attr="' + attrKey + '"] .cfvsw-swatches-option[data-slug="' + attrValue + '"]');
                    if (swatchOption.length) {
                        // 添加标签
                        swatchOption.append('<span class="most-chosen-label">最常选择</span>');
                        break; // 每个变体对应一个属性组合，找到后跳出循环
                    }
                }
            });
        });
    </script>
    <?php
}

说明 #

1. 样式调整：将标签设置为绝对定位，依附在色块的右上角，避免挤压原有内容。
2. 数据关联：通过get_available_variations获取所有变体，筛选出标记为「最常选择」的变体，将其属性键值对传递到前端，JS根据这些值匹配对应的色块元素并添加标签。
3. 兼容性：适配CFVSW插件的色块结构，无需修改插件核心代码。

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