Question

我正在使用Wordpress和WooCommerce为我的客户建立一个网站。对于每个产品页面，我设置了两组链接（按钮，二级菜单），以允许用户访问其他产品类别页面。当用户在某个产品页面上时，我希望某些链接自动成为特定的颜色和重量（如活动状态，但无需先点击链接，我想类似于面包屑，以显示用户所在的位置）他们所查看的产品所属的类别/类别的条款。）

我一直在尝试定位post-id和特定链接的div以进行css更改，但它无法正常工作。我真的很感激任何帮助！

以下是我用于定位特定二级菜单链接的CSS：

#menu-item-1886 > a {
color: #003b59 !important;   
font-weight: 600;

}

这有效，但当然它在所有页面上对此菜单项进行了更改。我希望它只在特定的产品页面上。

我也试过这个，但也没有用：

.body.post-id-766 #menu-item-1886 > a {
color: #003b59 !important;   
font-weight: 600;

}

该网站位于http://www.hoptri.d-gecko.com

再一次，非常感谢你对此的帮助！提前谢谢！

Answer 1

您可以使用 [flex] WordPress过滤器钩子添加，并在您想要的位置选择一些其他类别的条件标签，如下例所示：

body_class

代码放在活动子主题（或主题）的function.php文件中，或者放在任何插件文件中。

此代码经过测试并正常运行

所以你可以在你的CSS规则中使用那些类选择器，如（假例子）：

add_filter( 'body_class', 'adding_some_custom_body_classes' );
function adding_some_custom_body_classes( $classes ) {
    if ( is_product() ) {
        $classes[] = 'product-single-pages';
    } elseif( is_product() && is_single( array( 17, 19, 1, 11 ) )  {
        $classes[] = 'product-single-pages-2';
    }
    return $classes;
}

WooCommerce在body类中注入了一些特定的类，如在这个html示例中所示：

body.product-single-pages #menu-item-1886 > a,
body.product-single-pages2 #menu-item-1886 > a { font-weight: 600; }

body.product-single-pages #menu-item-1886 > a { color: green !important; }

body.product-single-pages2 #menu-item-1886 > a { color: red !important;  }

所以你也可以在你的css中使用这个类选择器：

单品
woocommerce
woocommerce页
woocommerce活性

例如这样：

 <body class="product-template-default single single-product postid-19 logged-in woocommerce woocommerce-page right-sidebar woocommerce-active customize-support">

对条件标记的引用：

针对特定WooCommerce产品页面上的特定div来定制css

1 个答案: