把WooCommerce的商品分類Slug添加在Body的Class上

WooCommerce 的商品分類如果需要不同設計，雖然可以透過手動查找 post-id 這個預設的 Class 去撰寫CSS樣式，但產品跟類別都會新增或修改，無法自動化太不切實際；如果使用分類的Slug(代稱)作為Class添加到 body 上，就可以做到所有分類都能擁有不同的CSS樣式。

作法為將以下程式碼加到佈景主題裡的 function.php就可以了：

add_filter( 'body_class', 'wc_product_cats_css_body_class');

function wc_product_cats_css_body_class( $classes){
  if( is_singular( 'product') ) {
    $current_product= wc_get_product();
    $custom_terms= get_the_terms( $current_product->get_id(), 'product_cat');
    if( $custom_terms) {
      foreach( $custom_termsas$custom_term) {
        $classes[] = 'product_cat_'. $custom_term->slug;
      }
    }
  }
  return$classes;
}

添加成功之後，假設”貓咪產品”的Slug(代稱)為 kitty, “狗狗產品”為 puppy，那樣板會為這兩個分類在body上分別添加 .product_cat_kitty 和 .product_cat_puppy，為兩個類別指定不同樣式的CSS寫法如下：

/* CSS */
.product_cat_kitty.woocommerce{ /*這邊放貓咪產品的樣式*/ }
.product_cat_puppy.woocommerce{ /*這邊放狗狗產品的樣式*/ }

*如果不喜歡 “product_cat_” 作為前綴，只要自行修改程式碼即可，另外需要注意class無法使用數字開頭，也不能用非英文的字符，如果修改或拿掉前綴，也請注意這個規則。