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

Показ описания при наведении на картинку

Тема в разделе "Вопросы, советы и доработки.", создана пользователем Руслан066, 4 окт 2015.

  1. Руслан066

    Руслан066

    Сообщения:
    5
    Симпатии:
    0
    Баллы:
    1
    Друзья, перерыл весь интернет на 2 языках.
    Простейшая задача.

    При наведении на картинку(hover еффект) в выводе продуктов в основном разделе, и категории конкретные - показ короткого описания товара.

    Буду очень признателен за помощь.
     
  2. rikitiki

    rikitiki Местный

    Сообщения:
    750
    Симпатии:
    185
    Баллы:
    43
    Как-то замысловато написано. Фиг поймёшь.
    Если вам попросту всплывающий текст в витрины вставить то:
    http://innka.info/vsplyvayushhie-opisaniya-v-vitrinax-woocommerce/
    На мой взгляд лучше обычного hover, так как в этом варианте div c текстом за курсором бегает.
     
    Последнее редактирование: 4 окт 2015
  3. Руслан066

    Руслан066

    Сообщения:
    5
    Симпатии:
    0
    Баллы:
    1
    http://pomodoro.od.ua/category/1 вот пример, так можно сделать?
     
  4. rikitiki

    rikitiki Местный

    Сообщения:
    750
    Симпатии:
    185
    Баллы:
    43
    Тогда просто в css hover, курсив, да слой тень на плетень
     
  5. rikitiki

    rikitiki Местный

    Сообщения:
    750
    Симпатии:
    185
    Баллы:
    43
    Глянeул в файербаге как сделано.
    То что выделено надо в ссылку добавить и выводить при hover:
    <div class="home_content_item cat0" data-hash="4 гриба" id_goods="15">
    <img src="http://pomodoro.od.ua/files/goods/middle_bez-imeni-3.jpg">
    <a href="#">
    <div class="name_item_bott2">
    <span class="desck"> Белые грибы, Вешанки, Шампиньоны, Фирменный белый соус, Лисички с зеленью </span>
    </a>
    <div class="shadow_item"></div>
    <span class="hci_id">код товара: 15</span>
    </div>


    .category_content .home_content_item a span.desck {
    display: none;
    font-size: 12px !important;
    text-transform: lowercase;
    top: 78px;
    width: 180px;
    }
     
    • Нравится Нравится x 1
  6. Руслан066

    Руслан066

    Сообщения:
    5
    Симпатии:
    0
    Баллы:
    1
    Если Вы не против, давайте разберемся какие файлы следует изменить для этого и что куда прописывать.
    Я полагаю следует создать див.дескрипшн в каком-то .php файле, затем прописать ему стиль в каком-то .css файле.
    Как называются эти файлы?

    Помодоро - этом устаревший модх версии до 2010 года, я буду делать на вукумерс свежей версии и вп.

    http://themeforest.net/item/sellya-responsive-woocommerce-theme/full_screen_preview/5418581
    вот еще пример, очень нравится, так аккуратно сделано, хочу повторить.
     
  7. Руслан066

    Руслан066

    Сообщения:
    5
    Симпатии:
    0
    Баллы:
    1
    Попробовал повторить урок с вашей ссылки, чтобы разобраться во всем.

    1. Добавил в functions скрипт - появилось короткое описание в конце вывода товара.
    2. Добавил в styles - скрытие этого описания - ничего не происходит.
    3. Добавил в footer - скрипт при наведении - ничего не происходит.
     
  8. rikitiki

    rikitiki Местный

    Сообщения:
    750
    Симпатии:
    185
    Баллы:
    43
    Я вам в первом посте ссылку дал на статью своего сайта. Там два кода для вставки в витрину. Если хотите полями выводить то вставьте первый, а если кратким описание то второй. Первый более универсален так как идёт как бы дополнением.
    Когда в витрине повится то спрячьте его display.none.
    Но есть одна тонкость для вашего случая - описание должно выводиться в теге a, в коде же оно под тегом. В моём случае это было безразлично поскольку не загораживает ссылку.
    Не уверен, но возможно последовательность во втором коде можно поправить изменив девятку.
    Дайте время вспомнить, подумать обмозговать. Возможно форумчанин seachпman появится и даст совет. Он лучше моего php знает.
     
    Последнее редактирование: 4 окт 2015
  9. rikitiki

    rikitiki Местный

    Сообщения:
    750
    Симпатии:
    185
    Баллы:
    43
    1 - это правильно.
    2 - в простейшем случае путь указывается .woocommerce ul.products li.product div.short_description,
    но может повлиять тема и плагины. Надо глянуть в файербаге. Было бы проще если вы дали ссылку на вашу витрину.
    3.- В футер ничего добавлять не нужно. Это для случая когда hover через скрипт выводится, а у вас через css/
     
  10. Руслан066

    Руслан066

    Сообщения:
    5
    Симпатии:
    0
    Баллы:
    1
    http://themeforest.net/item/flatsome-responsive-woocommerce-theme/full_screen_preview/5484319

    Вот тема, которая мне понравилась, пробейте пожалуйста, вот этот путь:

    .woocommerce ul.products li.product div.short_description{
    display: none;
    }

    Походу ".woocommerce ul.products li.product" здесь, должно быть что-то другое, потому что "Короткое описание появляется, но не скрывается" думаю ошибка в пути, если решим это, ваш урок получиться, а hover уже сам додумаю как сделать.

    И вы не подскажите есть ли файл в WooCommerce подобной структуры:
    - Product Title
    - Featured Image
    - Price
    - Add to cart button
    Что бы я мог сам настроить отображение товара.

    АП:

    посмотрите заодно пожалуйста уже и как называется картинка товара

    $('.woocommerce ul.products li').mousemove(function(event) { // li - элемент при наведении на который показывается текст

    для этого.
     
  11. rikitiki

    rikitiki Местный

    Сообщения:
    750
    Симпатии:
    185
    Баллы:
    43
    У-у-у... Flatsome. Сегодня уже видел варианть в соседней теме.
    И три блока хавером выводятся, а вы ещё собираетесь четвёртый повесить. Выделил их жирным. Два в теге как вам нужно, а третий вне тега как у вас сейчас
    <ul class="products small-block-grid-2 large-block-grid-3">
    .......
    <li class="product-small grid1 grid-normal">
    <div class="inner-wrap">
    <a href="http://flatsome.uxthemes.com/product/beyond-top-nly-trend/">
    <div class="product-image hover_fade_in_back">
    <div class="front-image">
    <div class="back-image back">
    <img class="attachment-shop_catalog" width="247" height="300" alt="917542-0001_2" src="http://41hmj38vkl98fqzebjp1112g.wpe...ds/sites/2/2013/08/917542-0001_2-247x300.jpeg">
    </div>
    <div class="quick-view" data-prod="149">Quick View</div>
    </div>
    </a>
    <div class="info style-grid1">
    </div>
    </li>
    Сотвеетственно, если от тега li плясать то до обратной картинки то что в теге a li.product-small grid1 grid-normal div.inner-wrap a div.back-image, а вне тега ка к кувас сейчас: li.product-small grid1 grid-normal div.inner-wrap a div.info style-grid1.
    Но это на демо http://themeforest.net/item/flatsome-responsive-woocommerce-theme/full_screen_preview/5484319
    А у вас может быть в зависимости от настроек другой путь.
     
  12. rikitiki

    rikitiki Местный

    Сообщения:
    750
    Симпатии:
    185
    Баллы:
    43
    Настройки могут быть в редактроре темы, может в каких-либо плагинах, но лучше установите файербаг, выделив какой-либо требуемый элемент и узнайте класс или id. А потом вносите правки в css.