在WooCommerce中使用自定义CSS设置产品详细信息页面的样式

时间：2013-03-29 作者：Sam

我正在尝试在WooCommerce中使用自定义CSS设计单个产品页面。我设法在头文件和php IF语句中使用条件标记is\\u product\\u category来设置类别的样式。

到目前为止，很好，我有一个名为“她”的类别，所有与该类别相关的页面都是粉红色的。但是，当我转到“她”类别中的单个产品时，它会恢复为默认CSS。

我检查了一下，没有条件标记来表示单个产品。我花了几个小时研究和阅读所有我能找到的东西，但我找不到解决办法。我需要产品页面具有与父类别相同的样式。有没有想过我该如何做到这一点？

非常感谢

2 个回复
SO网友:DigitalDesignDj

尝试添加类，而不是将CSS限制在某些页面上。

您应该寻找允许您仅将样式应用于这些页面的类。通常，整个站点的CSS将立即加载并保存在缓存中。因此，不要试图仅在某些页面上加载样式，而是提供仅覆盖要修改的页面上的现有样式的样式。

检查body_class 函数，它会在<body> 标记已存在。

如果这还不够，请尝试更改模板以将类别作为类名输出。

此外，您不应该只将样式表注入头部，您应该使用wp_enqueue_script 添加新样式，但实际上也不需要这样做。

SO网友:Sam

非常感谢。这就是对我有效的解决方案：必须在函数中添加此代码。php文件，然后使用类别slug设置元素样式。

add_filter(\'body_class\',\'wpa76627_class_names\');
function wpa76627_class_names( $classes ) {
    if( is_singular( \'product\' ) ):
    global $post;
    foreach( get_the_terms( $post->ID, \'product_cat\' ) as $cat )
        $classes[] = $cat->slug;
endif;
    return $classes;
}
然后在CSS中添加：BODY.my-product-cat-slug

结束
标签： css   plugins   小码农  

相关推荐

W3缓存CSS和JS文件GZip问题总数

已经用google page speed和gzipwtf检查了我的网站。我注意到我的css和js文件没有得到压缩（尽管html是）。已尝试取消选中“设置更改后阻止对象缓存”，并因此从这些文件中删除了查询字符串，但没有效果。还尝试在htaccess中添加以下内容（包括上面和下面的wordpress规则），但均无效：# BEGIN GZIP <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/h