WooCommerce: CSS - 针对特定商品类别进行定位

Question

WooCommerce: CSS - 针对特定商品类别进行定位

phpcsswordpresswoocommercehook-woocommerce

4

我已经在目录页面上的产品图片中添加了投影效果。但是我希望将"utility"类别下的产品排除在外，所以该类别下的图片不会有投影效果。（编辑：即使它们出现在另一个也包含它们的类别中，也不会有投影效果）这是我需要添加到所有产品的内容：

.woocommerce ul.products li.product a img {
    box-shadow: 0 0 14px #aaa !important;
}

我正在尝试针对特定的类别进行操作：

.product-cat-utility ul.products li.product a img {
    box-shadow: 0 0 0 #aaa !important;
}

这并不起作用，我希望有一个更优雅的解决方案。谢谢。

- tiny

2个回答

1

对于任何正在搜索的人，这似乎是一个解决办法：

.woocommerce ul.products li.product a img {
    box-shadow: 0 0 14px #aaa ;
}

.product_cat-utility img {
  box-shadow: 0 0 0px #aaa !important;
}

- tiny

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 7uc1f3r · Accepted Answer

每个类别页面上的<body class="...">包含唯一的类，其中既包括术语id，也包括术语名称。

尝试像这样：

.woocommerce ul.products li.product a img {
    box-shadow: 0 0 14px #aaa !important;
}

.term-utility ul.products li.product a img, .myclass-utility ul.products li.product a img {
    box-shadow: 0 0 0 #aaa !important;
}

为术语（父元素）实用性及其子项添加自定义正文类

function my_body_classes( $classes ) {
    global $post;

    if ( is_product_category() ) {
        $term_slug = 'utility';
        $taxonomy  = 'product_cat';
        $term_id   = get_term_by( 'slug', $term_slug, $taxonomy )->term_id; // Get the term ID
        $child_ids = get_term_children( $term_id, $taxonomy ); // Get the children terms IDs
        $terms_ids = array_merge( $child_ids, [$term_id] ); // an array of all term IDs (main term Id and it's children)

        if ( has_term( $terms_ids, $taxonomy, $post->ID ) ) {
            $classes[] = 'myclass-utility';
        }
    }

    return $classes;  
}
add_filter( 'body_class','my_body_classes' );