Введите часть искомого слова, названия или фразы...
↑ ↓
  1. Новые темы озаглавленные с маленькой буквы - удаляются без предупреждения!
  2. Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

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

Тема в разделе "Вопросы новичков", создана пользователем Conste, 23 июл 2015.

  1. Conste

    Conste

    Сообщения:
    2
    Симпатии:
    0
    Баллы:
    1
    Всем привет, есть задача: нужно вставить иконки для каждой категории.
    [​IMG]

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

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

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

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    553
    Баллы:
    113
    Можно сделать с помощью 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; /* Смещаем текст вправо */
       }
    Аналогично можно прописать для других категорий.

    Вот здесь приводили другой вариант решения без стандартного виджета категорий товаров.
     
    • Нравится Нравится x 3
  3. Conste

    Conste

    Сообщения:
    2
    Симпатии:
    0
    Баллы:
    1
    Ай спасибо, добрый человек) Все получилось, иконки вставились на ура =)