Как применить свой class В woocommerce для категории товаров и для карточки товара?

Question

Полина Нефедова @stvik

сама себе делаю сайт

WooСommerce

Как применить свой class В woocommerce для категории товаров и для карточки товара?

Всем добрый день ребят я не программист и для меня это лес но я все таки чуток разобрался что да как и вот передо мной встала проблема. когда дошел до дизайна карточки товара и категории товара не могу задать свой класс для каждого не для заголовков не до картинок. Получается если я беру какой нибудь класс который есть задаю для этого свои параметры то он меняется как и в категории так и на карточки товара. Вот как не научиться дописывать свои класс? помогите плиззззз) а то уже 3 сутки пошли мозг кипит

Вопрос задан более трёх лет назад
522 просмотра

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 2

Комментировать

9 комментариев

Пычев Анатолий @pton
Для обсуждения используйте комментарии.

вот где найти мне этот боди ?
Это говорит о том, что Вам следует изучить основы вертки. Хотя бы несколько начальных видеороликов в youtube. Тег <body> это обрамляющий тег контента страницы.
Также просмотрите несколько роликов по оновам css.

Получается если я беру какой нибудь класс который есть задаю для этого свои параметры то он меняется как и в категории так и на карточки товара.
Вы берете классы общие для карточек подкатегорий и товаров. Решение - использовать различные классы. Скорее всего у Вас карточка подкатегории имеет класс product-category а карточка товара type-product

Но если Вы хотите добавить свои классы, то Вам необходимо использовать хуки Wordpress.
Добавляение пользовательских классов css

/** * Добавляет css класс в карточку подкатегории на странице архива. * * @param array $classes One or more classes to add to the class list. * @param string|array $class One or more classes to add to the class list. * @param object $category object Optional. * * @return array */ function pancode_product_cat_add_myclass( $classes, $class, $category ) { $classes[] = 'my-cat-class'; return $classes; } add_filter( 'product_cat_class', 'pancode_product_cat_add_myclass', 10, 3 ); /** * Добавляет css класс в карточку товара на странице архива. * * @param array $classes One or more classes to add to the class list. * @param WC_Product $product Product object. * @return array */ function pancode_product_add_myclass( $classes, $product ) { $classes[] = 'my-product-class'; return $classes; } add_filter( 'woocommerce_post_class', 'pancode_product_add_myclass', 10, 2 );

Это можно вставить в файл functions.php Вашей темы
Написано более трёх лет назад
Полина Нефедова @stvik Автор вопроса

Пычев Анатолий, что то не получилось . А можете мне его поставить ? я вам дам доступ. Пожалуйста а то я все скоро мозг лопнит

Написано более трёх лет назад
Полина Нефедова @stvik Автор вопроса

у вас вк ?

Написано более трёх лет назад
Пычев Анатолий @pton

Что не получилось?
Просто добавьте код который я написал в Ваш function.php

Написано более трёх лет назад
Полина Нефедова @stvik Автор вопроса

я написала. А дальше что я не поняла ((((

Написано более трёх лет назад
Полина Нефедова @stvik Автор вопроса

/**
* Добавляет css класс в карточку товара на странице архива.
*
* @param array $classes One or more classes to add to the class list.
* @param WC_Product $product Product object.
* return array
*/
function pancode_product_add_myclass( $classes, $product ) {
$classes[] = 'my-product-class';
return $classes;
}
add_filter( 'woocommerce_post_class', 'pancode_product_add_myclass', 10, 2 );

я вставила вот этот год в functions.php а дальше что делать ) я чайник у меня опыта пару недель ))

Написано более трёх лет назад
Полина Нефедова @stvik Автор вопроса

Написано более трёх лет назад
Полина Нефедова @stvik Автор вопроса

да я вставила задала классу .my-product-class {border: 3px solid #001e43; } и у меня на карточке появилась граница но почему то она же и появилась уже в самом товаре ввиди линии . что делать ?

Написано более трёх лет назад
Полина Нефедова @stvik Автор вопроса

stkuhni.ru/product-category/kuhnya/kuhnya-1 посмотри пожалуйста

Написано более трёх лет назад

Пригласить эксперта

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

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

WordPress

+1 ещё

Средний
Как вместо картинок добавить видео в каталог woocommerce?
- 1 подписчик
- 50 минут назад
- 22 просмотра
1

ответ
WooСommerce

Простой
Вывод дополнительных ингридиентов в карточку товара?
- 1 подписчик
- 05 мая
- 57 просмотров
0

ответов
WordPress

+1 ещё

Средний
Почему не удаляются поля checkout формы на вордпрессе?
- 1 подписчик
- 05 мая
- 25 просмотров
2

ответа
WordPress

+1 ещё

Средний
Wordpress woocommerce внутренние ссылки на товар откуда?
- 1 подписчик
- 04 мая
- 19 просмотров
1

ответ
WordPress

+1 ещё

Простой
Отсутствует кнопак импорта в woocommerce wordpress, что делать?
- 1 подписчик
- 04 мая
- 20 просмотров
0

ответов
WordPress

+1 ещё

Простой
Как можно изменить вид «похожие товары» в woocommerce?
- 1 подписчик
- 28 апр.
- 30 просмотров
1

ответ
WordPress

+1 ещё

Простой
Какой есть плагин для регистрации и добавлением дополнительных полей и с поддержкой Woocommerce?
- 1 подписчик
- 25 апр.
- 34 просмотра
2

ответа
WordPress

+1 ещё

Простой
Woocommerce rest api, как реализовать филтрацию с учетом вариаций?
- 1 подписчик
- 25 апр.
- 29 просмотров
1

ответ
WooСommerce

Простой
Как добавить в корзину товар по промокоду?
- 1 подписчик
- 19 апр.
- 18 просмотров
0

ответов
WooСommerce

Простой
Как автоматически формировать код выдачи заказов woocommerce?
- 1 подписчик
- 18 апр.
- 25 просмотров
2

ответа
Показать ещё Загружается…

Junior/Middle UI/UX Designer

Hodl Hodl

от 1 200 до 2 500 $

Senior Ruby developer

Hodl Hodl

от 3 000 до 5 000 $

Android-разработчик / Senior Android Developer

Ciliz • Санкт-Петербург

от 300 000 ₽

UX/UI дизайн

08 мая 2024, в 19:42

150000 руб./за проект

Настройка TrueNAS Scale

08 мая 2024, в 19:41

1500 руб./за проект

Дизайн карточек

08 мая 2024, в 18:59

1000 руб./за проект

Answer 1 · 2020-04-25 14:15:49

Вам требуется просто Ваши css правила прописать с привязкой к родительскому элементу.
Загляните в тег <body> для страницы категории и карточки товара. Вы найдете разные классы которые определяют Вашу страницу.

/* например*/
body.archive .мой-класс {
   ... стили для страницы категории
}
body.single-product .мой-класс {
   ... стили для карточки товара
}

Answer 2 · 2020-04-25 14:55:46

Анатолий мой золотой человечек я не совсем поняла ))) вот где найти мне этот боди ? разжуйте плиз где что искать я только научилась как можно написать класс а ищу я их с большим трудом) вот смотрите что мне нужно сделать

Как применить свой class В woocommerce для категории товаров и для карточки товара?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт