仅使用css定位商店页面的Woocommerce

Question

这就是我需要做的事情：

• 使用css（我创建的特定自定义类，如下所述）定位仅主商店页面。

这是我迄今为止所做的和尝试过的事情：

• 我的子主题中有archive-product.php的覆盖模板。
• 在此覆盖模板中，我在产品循环开始之前添加了一个带有自定义类custom-shop-class的div，因为我想专门定位循环产品。
• 我尝试使用课程page-id-4进行定位，因为如果我将鼠标悬停在wp-admin的“商店”页面上，则会给我http://.../post.php?post=4&action=edit

我遇到的问题如下：

• 从我发现的是，在其他各种商店页面中使用相同的archive-product.php模板，而不仅仅是在主要的“商店”页面中（如果我错了，请纠正我），所以当我使用CSS定位我的custom-shop-class，它会影响使用相同模板文件的所有其他商店页面，但它不能。
• 商店页面没有专门的标识符或类，类似于body标签中的page-id-??类（如通常的WP页面中所示）。

关于最佳方法/解决方案的任何建议？

提前致谢， 马里奥。

Answer 1

设置条件语句以检查主商店页面，如果该语句的计算结果为true，则回显有问题的div。

主要商店页面的WooCommerce条件标记：

if (is_shop()) {
echo "<div class='custom-shop-class'></div>";
} else {
echo "<div class='custom-product-category-class'></div>";
}

示例

<?php if (is_shop()):?>
<div class="custom-shop-class"></div>
<?php else: ?>
<div class="custom-product-category-class"></div>
<?php endif;?>

<强>可替换地：

{{1}}

Answer 2

使用过滤器 body_class 和 is_shop 条件，您可以定位 WooCommerce 主商店页面。

add_filter( 'body_class', 'woo_shop_class' );
// Add WooCommerce Shop Page CSS Class
function woo_shop_class( $classes ) {
  if ( is_shop() )  // Set conditional
    $classes[] = 'woo-shop'; // Add Class
return $classes;
}

代码位于您的主题 functions.php 文件中。

Answer 3

为了在此处提供的答案的基础上，我如何进一步根据活动的WPML语言向商店页面添加唯一标识符？ （我基本上只是试图在商店页面的德语版本上减小字体大小 - 这显然难以做到）