在特定 WooCommerce 产品页面上针对特定 div 进行自定义 css

Question

我正在使用 Wordpress 和 WooCommerce 为我的客户建立网站。对于每个产品页面，我都设置了两组 links（按钮，二级菜单）以允许用户访问其他产品类别页面。我希望某些 links 在用户位于某个产品页面时自动成为特定的颜色和粗细（例如处于活动状态，但不必先单击 link，我想类似到面包屑以根据 category/categories 他们正在查看的产品属于什么来显示用户所在的位置）。

我一直在尝试针对特定 link 的 post-id 和 div 进行 css 更改，但它不起作用。如果有任何帮助，我将不胜感激！

这是css我用来定位特定二级菜单link:

#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

您可以在 body_class WordPress 过滤器挂钩和选择的条件标签中添加一些额外的 classes，如本例所示：

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;
}

代码进入您的活动子主题（或主题）的 function.php 文件或任何插件文件。

此代码已经过测试并且有效

因此您将能够在 CSS 规则中使用 classes 选择器，例如（假示例）：

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;  }

WooCommerce 在正文中注入 classes 一些特定的 classes，如本 html 示例中所示：

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

因此您也可以在 css:

中使用此 class 选择器

单一产品
woocommerce
woocommerce-页面
woocommerce-active

例如这样：

body.woocommerce.single-product.woocommerce-active #menu-item-1886 > a {
     color: blue !important; 
}

对条件标签的引用：

在特定 WooCommerce 产品页面上针对特定 div 进行自定义 css

Targeting specific div on specific WooCommerce product pages to customize css

css

php

wordpress

product

woocommerce