如何在Divi主题的WooCommerce中显示可变产品的颜色选项数量

嘿，我刚好处理过类似的需求，结合Divi主题和WooCommerce的特性，给你两个靠谱的实现方案，你可以根据自己的技术能力选择：

方法一：添加自定义代码到子主题（推荐） #

这种方式不会因为主题更新丢失修改，是最稳妥的做法：

1. 先确认你在使用Divi子主题（如果还没启用子主题，建议先创建并激活，避免主题更新时覆盖自定义代码）
2. 打开子主题的functions.php文件——可以通过WP后台「外观」→「主题文件编辑器」找到，也能通过FTP连接服务器修改
3. 把下面这段代码粘贴进去：

// 在WooCommerce产品循环中显示颜色变体数量
add_action( 'woocommerce_after_shop_loop_item_title', 'display_color_variation_count', 15 );
function display_color_variation_count() {
    global $product;
    
    // 只对可变产品生效
    if ( $product->is_type( 'variable' ) ) {
        // 获取默认颜色属性的变体值（pa_color是WooCommerce默认的颜色属性slug，如果你自定义了属性，记得替换成你自己的slug）
        $color_attributes = $product->get_attribute( 'pa_color' );
        
        if ( !empty( $color_attributes ) ) {
            // 拆分属性值并去重，统计颜色数量
            $color_count = count( array_unique( explode( ', ', $color_attributes ) ) );
            // 输出展示内容，样式可以自己调整
            echo '<div class="color-variation-count" style="margin-top: 8px; color: #666; font-size: 14px;">颜色：' . $color_count . '</div>';
        }
    }
}

4. 保存修改，刷新首页或产品列表页就能看到效果了

小提示：如果你的颜色属性不是默认的pa_color，可以去WP后台「产品」→「属性」里查看对应属性的slug，然后替换代码里的pa_color即可。

方法二：用Divi代码模块+AJAX（适合不想碰主题文件的用户） #

如果你不想修改主题代码，可以结合Divi的自定义代码模块来实现：

1. 编辑需要展示产品的页面（比如首页），找到对应的产品展示模块（比如Divi的「产品」模块）
2. 在产品模块下方添加一个「代码」模块，选择「JavaScript」类型，粘贴下面这段代码：

jQuery(document).ready(function($) {
    // 遍历每个产品项
    $('.woocommerce-loop-product__link').each(function() {
        var productId = $(this).find('a').attr('data-product_id');
        
        // 通过AJAX获取产品的颜色变体数量
        $.ajax({
            url: wc_params.ajax_url,
            type: 'POST',
            data: {
                action: 'get_color_variation_count',
                product_id: productId
            },
            success: function(response) {
                if (response > 0) {
                    $(this).find('.woocommerce-loop-product__title').after('<div class="color-variation-count" style="margin-top: 8px; color: #666; font-size: 14px;">颜色：' + response + '</div>');
                }
            }.bind(this)
        });
    });
});

3. 这一步需要添加AJAX处理函数，你可以用「Code Snippets」这类插件来添加，避免修改主题文件：

add_action('wp_ajax_get_color_variation_count', 'get_color_variation_count');
add_action('wp_ajax_nopriv_get_color_variation_count', 'get_color_variation_count');
function get_color_variation_count() {
    $product_id = intval($_POST['product_id']);
    $product = wc_get_product($product_id);
    
    if ($product && $product->is_type('variable')) {
        $color_attributes = $product->get_attribute('pa_color');
        if (!empty($color_attributes)) {
            $color_count = count(array_unique(explode(', ', $color_attributes)));
            echo $color_count;
        } else {
            echo 0;
        }
    } else {
        echo 0;
    }
    wp_die();
}

自定义样式优化 #

如果觉得默认样式不好看，可以在Divi「主题选项」→「自定义CSS」里添加样式调整：

.color-variation-count {
    font-weight: 500;
    color: #2c3e50 !important;
    font-size: 13px;
    margin-top: 6px !important;
}

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