WooCommerce 教程：将产品类别添加到 CSS Body Class

redmaomail 2024-07-24 17:23 阅读数 69 #WooCommerce

业务 Bloomer 粉丝问我本周有趣的问题：如何根据产品类别在单个产品页面上应用 CSS？那么答案很简单：如果我们能够将类别名称添加到<body>，那么可以在您的自定义 CSS 中定位。所以，我们来看看这是怎么做到的！

幸运的是，GitHub 已经有一些文献，尽管 5 岁，但仍然像一个魅力。所以，很多谢谢 Michael Krapf

PHP Snippet：将 WooCommerce 产品类别添加为 Body CSS 类


/**
* @snippet Product Category > Body CSS Class | WooCommerce

* @sourcecode https://businessbloomer.com/?p=21507
* @author Rodolfo Melogli
* @testedwith WooCommerce 2.6.12, WordPress 4.7.1
*/

add_filter( 'body_class', 'bbloomer_wc_product_cats_css_body_class' );

function bbloomer_wc_product_cats_css_body_class( $classes ){
  if( is_singular( 'product' ) )
  {
    $custom_terms = get_the_terms(0, 'product_cat');
    if ($custom_terms) {
      foreach ($custom_terms as $custom_term) {
        $classes[] = 'product_cat_' . $custom_term->slug;
      }
    }
  }
  return $classes;
}