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

Question

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

1 дек. 2017 г., 12:20:00

Просмотры: 20.2K

Голосов: 3

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

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

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

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

пример пользовательского CSS для категории WooCommerce

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

.product.category-2 { custom css changes here }

Спасибо, что уделили время для прочтения, и я благодарен за любую помощь.

Blake Shiman

31

woocommerce offtopic

Комментарии

Тело документа должно иметь класс term-XX, где XX — это ID категории. Если добавить .term-XX в начало CSS-правил, они будут применяться только к этой категории.

Jacob Peattie

1 дек. 2017 г. 12:56:03

Все ответы на вопрос

Комментарии

Спасибо вам и всем остальным за помощь! Я попробую это сделать, когда вернусь в офис, и дам вам знать, как все прошло. Еще раз спасибо!

Blake Shiman

2 дек. 2017 г. 04:03:13

Комментарии

WordPress уже добавляет уникальный класс к тегу body для категорий, term-{id}

Jacob Peattie

1 дек. 2017 г. 12:54:05

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

Например, ID категории товара — 206. Куда мне добавить это в файле functions.php? После того как я помещу ID категории товара в нужное место, куда мне тогда добавить пользовательский CSS-код, чтобы это заработало? Можно ли сделать это с помощью пользовательского CSS? Еще раз спасибо

Blake Shiman

1 дек. 2017 г. 12:55:47

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { width: 100%; }

Blake Shiman

1 дек. 2017 г. 12:57:30

Выше приведен пример кода, который я хочу добавить для указанной категории страницы товара.

Blake Shiman

1 дек. 2017 г. 12:58:39

@JacobPeattie OP явно просит добавить селектор на страницу отдельного товара, а не на страницу категорий. Боюсь, ваш комментарий совсем не в тему.

Daniel Fonda

1 дек. 2017 г. 13:11:57

Показать остальные 1 комментариев

MarkPraschan 321 · Answer 1 · 2017-12-01T20:41:39Z

Вот моё решение... Добавил следующее в 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;
}

Daniel Fonda 336 · Answer 2 · 2017-12-01T12:35:33Z

Добавьте это в ваш файл functions.php https://gist.github.com/thegdshop/3197540

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

Daniel Fonda

336

1 дек. 2017 г. 12:35:33

TurboWeb.ro 1 · Answer 3 · 2018-05-18T22:11:18Z

1) Установите плагин "Add Custom CSS"

2) По умолчанию он не отображает поле для добавления CSS. Вам нужно зайти в настройки плагина (нижняя часть админ-панели), где будет вопрос "Включить пользовательский CSS для следующих страниц" — затем отметьте "Товары", и теперь при редактировании отдельных товаров через WooCommerce у вас появится поле для добавления CSS.

Не уверен, подойдет ли этот метод для вашей задачи, но мне он понадобился для устранения render-blocking CSS на странице товара.

Ashar Zafar 117 · Answer 4 · 2018-05-31T22:23:07Z

Добавление класса body, связанного с категорией товара в WooCommerce Добавьте этот код в ваш functions.php

add_filter( 'body_class', 'wc_cat_names' );
function wc_cat_names( $classes ) {
    if(is_product()){
    global $post;
    $terms = get_the_terms( $post->ID, 'product_cat' );
        foreach ($terms as $term) {
            $classes[] = $term->slug;
        }
    }
    return $classes;
}

Ashar Zafar

117

31 мая 2018 г. 22:23:07

Aadii Mughal 171 · Answer 5 · 2019-08-28T15:27:22Z

Я добавил этот код в файл functions.php, перейдя по пути:

Консоль ...>>> Внешний вид >>> Редактор >>>> 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;
}

Затем перешел в: Консоль ...>>> Товары >>>> Категории >>> Навел курсор на кнопку "Редактировать" и получил ID категории

Этот же ID я использовал на странице отдельного товара:

.product-in-cat-(ID) {
    color: #ffffff;
}

Это сработало