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

Иконки категорий Woocommerce (Как сделать?)

Image CMS

Conste

Новичок
#1
Всем привет, есть задача: нужно вставить иконки для каждой категории.


Беда в том, что я уже два дня парюсь и так и не сообразил как их туда запихать. Пытался решить проблему несколькими способами.
1) Установил плагин Category & Page Icons, но так как эти категории созданы не через стандартный раздел: Записи-->Рубрики, а через плагин Woocommerce: Товары-->Категории и выводятся на страницу виджетом Woocommerce, то этот плагин не видит эти категории.


2) В самом вукомерсе можно задать картинку для категории, что я и сделал, но картинка эта никуда не выводится и нигде не появляется.


Все запросы в гугле насчет иконок категорий приводят в основном только к плагину Category & Page Icons, который эти самые категории не видит. Вопрос знатокам: как правильно это сделать? может в коде что-нибудь добавить? может есть какой-нибудь хак, который заставит этот плагин видеть кроме стандартных, еще и категории Woocommerce? или кто-нибудь знает другой плагин, который эти иконки вставит туда? Помогите, чуваки!
 

searchingman

Гуру
Местный
#2
Можно сделать с помощью CSS.
Виджет категорий товаров имеет примерно такую структуру.
HTML:
<ul class="product-categories">
<li class="cat-item cat-item-9"><a href="http://woocommerce23x.loc/category/aksessuary-i-uslugi/">Аксессуары и услуги</a> <span class="count">(0)</span></li>
<li class="cat-item cat-item-18"><a href="http://woocommerce23x.loc/category/zhenskaya-odezhda/">Женская одежда</a> <span class="count">(0)</span></li>
<li class="cat-item cat-item-17 cat-parent"><a href="http://woocommerce23x.loc/category/muzhskaya-odezhda/">Мужская одежда</a> <span class="count">(1)</span><ul class="children">
<li class="cat-item cat-item-19"><a href="http://woocommerce23x.loc/category/muzhskaya-odezhda/muzhskie-futbolki/">Мужские футболки</a> <span class="count">(1)</span></li>
</ul>
Из этого видно, что у каждого элемента-категории есть свой уникальный класс.
Н-р, для категории "Женская одежда" .cat-item-18 , для "Мужская одежда" .cat-item-17.
На основе примера код для "Мужская одежда" будет примерно такой, который нужно будет вставить в style.css вашей темы.
HTML:
li.cat-item-17 {
    background: url(images/mens_clothing.png) no-repeat 0 4px; /* Параметры фона */
    padding-left: 24px; /* Смещаем текст вправо */
   }
Аналогично можно прописать для других категорий.

Вот здесь приводили другой вариант решения без стандартного виджета категорий товаров.
 
Сверху Снизу