如何仅将WooCommerce主分类car-battery的子分类展示为无空格列表

实现方案 #

WooCommerce的产品分类存档页默认会在<body>标签上生成term-{分类slug}的专属类，你只需要给原有CSS添加该前缀限定作用域即可，针对你要的无空格列表效果，补充了间距重置的相关样式，修改后代码如下：

/* 仅对slug为car-battery的主分类页面生效 */
body.term-car-battery .product-loop-categories .product-category {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.term-car-battery .product-loop-categories .product-category a {
    background-color: transparent;
    /* 可根据需求调整列表项的行间距，不需要可设为0 */
    padding: 2px 0;
}
body.term-car-battery .product-loop-categories .product-category a img {
    display: none;
}

说明

• 前缀body.term-car-battery会精准匹配slug为car-battery的产品分类页面，不会作用到站点其他页面
• 新增的.product-category样式用于重置默认列表边距、隐藏列表标记，实现无空格的列表展示效果
• 如果以上代码不生效，可以打开car-battery分类页面，右键查看页面源码找到<body>标签的class属性，替换term-car-battery为实际存在的对应分类slug类即可

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