Пользовательский CSS для столбцов в каждой категории продуктов

Question

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

www. tattiniboots.com/shop вы можете увидеть 4 колонки макета. Однако, например, на «странице аксессуаров» я хотел бы разместить макет из 2 колонок

. Пожалуйста, просмотрите приведенный ниже css, чтобы увидеть, что я сейчас использую для моей раскладки из 4 колонок

, которую я пробовалиспользуя идентификаторы страниц и постов вместе с идентификаторами категорий, но они не работают

.page-id-5538 .woocommerce ul.products li.last, .woocommerce-page ul.products li.last {
    margin: 0 3.5% 2em 0;
}
.page-id-5538 .woocommerce ul.products li.first, .woocommerce-page ul.products li.first {
    clear: none;
    margin: 0 0 1 0;
}
.page-id-5538 .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    padding-top: 5%;
    width: 21%;
} 

Answer 1

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

Например, на странице «Аксессуары» этот класс находится на теле term-accessories.

. Чтобы добавить стили только для этой страницы, вы могли бысделайте что-то вроде этого ...

.term-accessories ul.products li.product {
    width: 50%;
} 

Примечание: если вы нажмете f12 в вашем браузере, он откроет инструмент инспектора, который вы можете использовать, чтобы найти классы в теге body длялюбая страница.

Примечание 2: Если это все еще «не работает», используйте вышеупомянутый инструмент для проверки элемента, к которому вы применяете CSS. Возможно, вам просто нужно быть более конкретным со своими стилями, чтобы переопределить уже примененные.

В качестве крайней меры вы можете попробовать добавить !important, чтобы переопределить любые стили, но это не рекомендуется.

Например ...

.term-accessories ul.products li.product {
    width: 50% !important;
} 

Answer 2

Ответ здесь:

.term-79 ul.products li.product {
    ~ formatting values here ~
}