Добавить пользовательский CSS на страницу продукта Woocommerce в указанной категории

Я потратил несколько часов на изучение того, как это сделать, но все, что я нашел, объясняет это так, как это происходит над моей головой. Я не очень разбираюсь в кодировании, но я знаю, как проверять элемент и работать оттуда, но это не помогает мне в этом случае.

Я хочу использовать другой макет страницы / шаблон для продуктов в указанной категории. Я использую WooCommerce, и я смог использовать элемент проверки, чтобы воссоздать страницу продукта так, как я хотел. Затем я скопировал текст в пользовательский css, и он отлично работает. Однако это становится глобальным изменением.

Большинство страниц моих продуктов выиграют от шаблона по умолчанию, а не из тех, которые я сделал. Я хочу знать, как добавить код внутри скобок, чтобы пользовательский CSS-код (настраиваемый шаблон), который я добавил, применяется только к продуктам в указанной категории.

Надеюсь, все это имеет смысл. Вот фотографии, чтобы дать вам наглядный пример.

введите описание изображения здесь

Я уже знаю, какой пользовательский CSS я хочу добавить к модифицированному шаблону страницы продукта. Я надеюсь, что назначение этого пользовательского CSS для определенных категорий так же просто, как добавление скобок, похожих на это (извините, я уверен, что это неправильно, но я вижу, что пользовательский css, который похож на этот)

.product.category-2 {здесь изменяется пользовательский css}

Спасибо, что нашли время, чтобы прочитать это, и я ценю любую помощь.

Solutions Collecting From Web of "Добавить пользовательский CSS на страницу продукта Woocommerce в указанной категории"

Добавьте это в свой funtions.php https://gist.github.com/thegdshop/3197540

Это должно добавить соответствующий класс категории, если на странице единственного prlduct.

Вот мое решение … Добавил следующее в functions.php в моей дочерней теме:

 add_filter( 'body_class','my_body_classes2' ); function my_body_classes2( $classes ) { if ( is_product() ) { global $post; $terms = get_the_terms( $post->ID, 'product_cat' ); foreach ($terms as $term) { $product_cat_id = $term->term_id; $classes[] = 'product-in-cat-' . $product_cat_id; } } return $classes; } 

Теперь, когда вы просматриваете страницу одного продукта, к тегу <body> добавляется дополнительный класс CSS для каждой категории, в которой находится продукт.

Затем, если вы хотите изменить стиль для любых страниц одного продукта в категории 2 или 4, вы можете использовать следующий CSS:

 .product-in-cat-2 , .product-in-cat-4 { color: #ffffff; }