Woocommerce 仅使用 css 定位商店页面

Question

这是我需要做的：

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

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

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

我遇到的问题如下：

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

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

提前致谢， 马里奥。

Answer 1

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

主商店页面的 WooCommerce 条件标签：

is_shop()

示例

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

Conditional Tags | WooThemes Documentation

Answer 2

要在此处提供的答案的基础上再接再厉，我该如何进一步根据活动的 WPML 语言向商店页面添加唯一标识符？ （我基本上只是在尝试减少德语版商店页面上的字体大小 - 事实证明这很难做到）

Answer 3

使用带有is_shop 条件的过滤器body_class，您可以定位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 文件中。