如何为 WooCommerce 精选商品添加自定义 CSS 类

WooCommerce 的精选商品默认没有专属的 CSS 类标识，当我们需要对精选商品设置特殊的边框、背景或者排版样式时，就需要手动为其添加自定义 CSS 类。下面介绍几种常用的实现方式，你可以根据自身的开发习惯选择。

方法一：通过主题 functions.php 添加钩子

这是最推荐的方式，不会在主题更新时丢失修改，适合大多数用户。WooCommerce 提供了 post_class 过滤器，可以修改商品列表项的类属性。

实现步骤

• 进入 WordPress 后台，依次点击外观、主题文件编辑器
• 在右侧选择当前主题下的 functions.php 文件
• 在文件末尾添加以下代码

// 为 WooCommerce 精选商品添加自定义 CSS 类
add_filter('post_class', 'add_featured_product_css_class', 10, 3);
function add_featured_product_css_class($classes, $class, $post_id) {
    // 判断当前文章类型是否为商品
    if (get_post_type($post_id) === 'product') {
        // 判断商品是否为精选
        if (get_post_meta($post_id, '_featured', true) === 'yes') {
            // 添加自定义 CSS 类 featured-product-custom
            $classes[] = 'featured-product-custom';
        }
    }
    return $classes;
}

添加完成后保存文件，刷新商品列表页面，查看商品项的 HTML 结构，就能看到新增的 featured-product-custom 类了。

方法二：修改 WooCommerce 模板文件

如果你熟悉模板文件结构，也可以直接修改商品列表的模板文件，这种方式更直观，但需要注意主题更新时的文件覆盖问题。

操作步骤

• 先复制 WooCommerce 插件目录下的 templates/content-product.php 文件
• 将复制的文件放到当前主题目录下的 woocommerce 文件夹中，路径为 wp-content/themes/你的主题/woocommerce/content-product.php
• 找到文件中输出 class 属性的位置，通常在 <li> 标签处，修改为如下内容

// 原始代码可能是 <li <?php wc_product_class('', $product); ?>>
// 修改为以下内容
<li <?php 
    // 获取默认的商品类
    $product_classes = wc_get_product_class('', $product);
    // 判断是否为精选商品
    if ($product->is_featured()) {
        // 添加自定义 CSS 类
        $product_classes[] = 'featured-product-custom';
    }
    // 输出类属性
    echo 'class="' . esc_attr(implode(' ', $product_classes)) . '"';
?>>

方法三：使用插件快速配置

如果不想手动修改代码，也可以使用专用的插件实现，适合没有代码基础的用户。

可以在 WordPress 插件市场搜索 WooCommerce Custom Product Classes 这类插件，安装启用后，在商品编辑页面的精选商品选项旁，会出现自定义 CSS 类的输入框，直接输入你要添加的类名保存即可，插件会自动将类名输出到商品项的 class 属性中。

自定义 CSS 样式示例

添加完自定义 CSS 类后，就可以在主题的样式文件中编写对应的样式了，比如给精选商品添加金色边框和阴影效果：

/* 精选商品自定义样式 */
.featured-product-custom {
    border: 2px solid #ffd700;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
    position: relative;
}
/* 可选：给精选商品添加角标标识 */
.featured-product-custom::before {
    content: "精选";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ffd700;
    color: #333;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 3px;
}

注意事项

• 修改 functions.php 文件前建议先备份，避免代码错误导致站点异常
• 如果使用子主题，所有的代码修改都建议放在子主题的 functions.php 中，防止主题更新丢失修改
• 添加 CSS 类后要清除站点缓存和浏览器缓存，才能看到样式效果

WooCommerce自定义_CSS_类精选商品WordPress修改时间：2026-06-21 15:03:28