• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Решено Как поменять цвет фона подложки у товара

a.kalugin

Форумчанин
#1
Друзья, приветствую!
Может кто подскажет, как в определенной категории, цвет фона обложки товара поменять с белого на другой цвет? У меня в магазине будет 4 категории разного кабеля, для каждого кабеля есть свой цвет. Изображение я установил, а фон белый. Вот можно именно в отдельной категории поменять фон? Первое изображение это как у меня сейчас, второе - как требуется. Можно конечно на изображение вручную фон сделать в редакторе, но я думаю что будет криво отображаться
1.jpg 2.jpg
 

tuxfighter

Гуру
Местный
#2
как в определенной категории, цвет фона обложки товара поменять с белого на другой цвет
с помощью css
Можно конечно на изображение вручную фон сделать в редакторе, но я думаю что будет криво отображаться
с чего вдруг??
 

ADv

Гуру
Местный
#3
Друзья, приветствую!
Может кто подскажет, как в определенной категории, цвет фона обложки товара поменять с белого на другой цвет? У меня в магазине будет 4 категории разного кабеля, для каждого кабеля есть свой цвет. Изображение я установил, а фон белый. Вот можно именно в отдельной категории поменять фон? Первое изображение это как у меня сейчас, второе - как требуется. Можно конечно на изображение вручную фон сделать в редакторе, но я думаю что будет криво отображаться
Посмотреть вложение 4339 Посмотреть вложение 4340
0. Риторический вопрос не требует ответа, потому как, согласно правилам форума, вопрос - без ссылки на проблему.

1. Зайдите в товарную категорию, найдите в элементе body класс, принадлежащий текущей рубрике и пропишите правила в CSS типа .product-category-name .element {background: #666666;}
2. Если же класса для рубрики нет, добавьте его с помощью кода в functions.php
3. Напишите функцию, которая будет устанавливать цвет фона нужного элемента в зависимости от рубрики.
 

a.kalugin

Форумчанин
#4
0. Риторический вопрос не требует ответа, потому как, согласно правилам форума, вопрос - без ссылки на проблему.
так проблема чисто визуальная, просмотра кода я так понимаю не требуется, и я скриншоты сделал - могу конечно дать ссылку на сайт, там увидите абсолютно тоже самое :)
по поводу кода - в админке, при редактировании категории есть поле Custom CSS, вставил туда вышенаписанный код - ничего не поменялось
 

ADv

Гуру
Местный
#5
так проблема чисто визуальная, просмотра кода я так понимаю не требуется, и я скриншоты сделал - могу конечно дать ссылку на сайт, там увидите абсолютно тоже самое :)
по поводу кода - в админке, при редактировании категории есть поле Custom CSS, вставил туда вышенаписанный код - ничего не поменялось
Вышеуказанный код - абстрактный, направление для движения, но не решение. Без ссылки - никак, увы.
 

a.kalugin

Форумчанин
#8
@ADv, Все получилось! Спасибо, что помогаете! Скромная благодарность от меня
Жаль только, что внутри самого товара фон не поменялся, так же внизу колонка "сопутствующие товары" не поменяла цвет, тема видимо не привязывает фон к категории, а стандартный везде ставит
p.s. в самом товаре так же есть поле custom css, вставил туда этот код но там он не работает :)
 

ADv

Гуру
Местный
#9
@ADv, Все получилось! Спасибо, что помогаете! Скромная благодарность от меня
Жаль только, что внутри самого товара фон не поменялся, так же внизу колонка "сопутствующие товары" не поменяла цвет, тема видимо не привязывает фон к категории, а стандартный везде ставит
CSS:
/* Текущая реализация в теме не позволит применить зеленый фон ко всем товарам в товарной категории, но можно сделать поштутчно для каждого */

/* Основные фото товара для товара https://группа-телеком.рф/product/ок8ц/ */
.postid-2014 .owl-carousel .img-thumbnail img {
    background: green;
}
/* Сопутствующие товары для товара https://группа-телеком.рф/product/ок8ц/ */
.postid-2014 .product-image img {
background: green;
}
 

ADv

Гуру
Местный
#10
Код позволит задать CSS классы текущей рубрики для всех товаров в ней
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;
}
Получится
CSS:
.product-in-cat-2 .product-image img,
.product-in-cat-2 .owl-carousel .img-thumbnail img{
    color: #ffffff;
}
Где .product-in-cat-2 - цифру нужно будет подсмотреть при исследовании элемента для выбранного товара.
Тогда можно будет массово применять один цвет для всех товаров в этой товарной категории.
 

a.kalugin

Форумчанин
#11
CSS:
.term-130 .product-image img {
background: green;
}
Пробуйте.
можете подсказать, это код сработал только для одной категории (на которую я дал ссылку) на остальные категории кабеля почему то не сработал.
По остальному, что написали, уже завтра буду смотреть, спасибо!
 

ADv

Гуру
Местный
#12
можете подсказать, это код сработал только для одной категории (на которую я дал ссылку) на остальные категории кабеля почему то не сработал.
По остальному, что написали, уже завтра буду смотреть, спасибо!
Так и есть
1538822561321.png
Откройте инспектор элементов в браузере, найдите строку на скрине и в указанном месте возьмите нужный терм. Для разных категорий он будет отличаться.
Продублируйте первый код, что я давал, изменив в нем цифру для нужной категории, и цвет, если необходимо.
Остальное - позволит упростить изменение фона картинок у товаров по такому же принципу.
 

a.kalugin

Форумчанин
#13
Сделал, все получилось, огромное спасибо!
/* Текущая реализация в теме не позволит применить зеленый фон ко всем товарам в товарной категории, но можно сделать поштутчно для каждого */
А больше и не надо - товаров в данной категории больше не будет (если только я не решу убрать вариативный выбор и все варианты поштучно потом добавить как отдельные товары)
я бы может еще хотел, чтобы на главной странице сайта, где слайдеры "рекомендуемые товары" "последние товары" и внизу самом, где "популярное" "новое" "хиты" "скидка" так же чтобы фон подгружался необходимый, но не знаю как это сделать:unsure:
 

a.kalugin

Форумчанин
#14
Да, наверное все таки самый удачный вариант был бы ручками везде фон поставить в самом изображении, и залить в таком виде. Тогда сразу бы везде, во всех нужных местах отображалось с требуемым фоном. Наверное так и сделаю в дальнейшем, ибо менять/добавлять везде код, во первых муторно, во вторых тема не подгружает значения из категории товара ни ни главной, ни в корзине, ни в самом товаре
 
Последнее редактирование:
Сверху Снизу