Woocommerce如何设置子分类字体加粗及增大字号

代码添加入口 #

• 推荐在 WordPress 后台依次进入「外观」→「自定义」→「额外CSS」中添加下述代码，不需要修改主题原生CSS文件，可避免主题更新后自定义代码被覆盖。

适配代码（2种可选） #

方案1：仅对指定的两个子分类生效 #

仅修改你提到的「Single Gas Modules」和「Dual Gas Modules」两个分类的样式，不影响其他分类：

/* 自定义指定子分类显示样式 */
.woocommerce .product-category h2:contains("Single Gas Modules"),
.woocommerce .product-category h2:contains("Dual Gas Modules"),
.woocommerce .wc-block-product-categories li a:contains("Single Gas Modules"),
.woocommerce .wc-block-product-categories li a:contains("Dual Gas Modules") {
    font-weight: 700 !important;
    font-size: 1.2em !important;
    /* 如需额外修改颜色、边距等样式可在此处补充配置 */
}

注：如果上述代码不生效，可右键点击页面上的子分类文本选择「检查」，复制对应元素的CSS选择器替换代码开头的选择器即可。

方案2：对所有二级子分类统一生效 #

如果后续新增其他二级子分类也需要同款样式，可使用通用匹配代码：

/* 所有二级子分类统一设置样式 */
.woocommerce .wc-block-product-categories-list > li ul li a,
.woocommerce .products .product-category.child-category h2 {
    font-weight: 700 !important;
    font-size: 1.2em !important;
}

生效操作 #

• 代码添加完成后点击「发布」保存设置，清空浏览器缓存和站点缓存（如有安装缓存插件）后刷新页面即可查看效果。
• 可根据实际显示需求调整font-size的数值，数值越大字号越大。

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