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

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

Руслан066

Новичок
Друзья, перерыл весь интернет на 2 языках.
Простейшая задача.

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

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

rikitiki

Специалист
Местный
При наведении на картинку(hover еффект) в выводе продуктов в основном разделе, и категории конкретные - показ короткого описания товара.
Как-то замысловато написано. Фиг поймёшь.
Если вам попросту всплывающий текст в витрины вставить то:
http://innka.info/vsplyvayushhie-opisaniya-v-vitrinax-woocommerce/
На мой взгляд лучше обычного hover, так как в этом варианте div c текстом за курсором бегает.
 
Последнее редактирование:

Руслан066

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

http://pomodoro.od.ua/category/1 вот пример, так можно сделать?
 

rikitiki

Специалист
Местный
Глян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;
}
 
  • Like
Реакции: D&B

Руслан066

Новичок
Глянeул в файербаге как сделано.
То что выделено надо в ссылку добавить и выводить при hover:
}

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

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

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

Руслан066

Новичок
Глянeул в файербаге как сделано.
То что выделено надо в ссылку добавить и выводить при hover:
}

Попробовал повторить урок с вашей ссылки, чтобы разобраться во всем.

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

rikitiki

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

rikitiki

Специалист
Местный
Попробовал повторить урок с вашей ссылки, чтобы разобраться во всем.

1. Добавил в functions скрипт - появилось короткое описание в конце вывода товара.
2. Добавил в styles - скрытие этого описания - ничего не происходит.
3. Добавил в footer - скрипт при наведении - ничего не происходит.
1 - это правильно.
2 - в простейшем случае путь указывается .woocommerce ul.products li.product div.short_description,
но может повлиять тема и плагины. Надо глянуть в файербаге. Было бы проще если вы дали ссылку на вашу витрину.
3.- В футер ничего добавлять не нужно. Это для случая когда hover через скрипт выводится, а у вас через css/
 

Руслан066

Новичок
Я вам в первом посте ссылку дал на статью своего сайта.

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 - элемент при наведении на который показывается текст

для этого.
 

rikitiki

Специалист
Местный
У-у-у... 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
А у вас может быть в зависимости от настроек другой путь.
 

rikitiki

Специалист
Местный
И вы не подскажите есть ли файл в WooCommerce подобной структуры:
- Product Title
- Featured Image
- Price
- Add to cart button
Что бы я мог сам настроить отображение товара.
Настройки могут быть в редактроре темы, может в каких-либо плагинах, но лучше установите файербаг, выделив какой-либо требуемый элемент и узнайте класс или id. А потом вносите правки в css.
 
Сверху Снизу