Всплывающее описание товара в каталоге woo

19.01.2016 в категории Плагины 0 2
Home > Скачать шаблоны и плагины для wordpress cms > Плагины > Всплывающее описание товара в каталоге woo

Бывают случаи, когда для некоторых видов товара требуется ввести в витрины Woocoommerce описания. Однако, если размещать такие описания под заголовками,то витрина будет выглядеть громоздко. Но можно сделать описания всплывающими при наведении на товары курсором.
Ниже рассмотрим как это осуществить.

В первую очередь в functions.php темы запишем код, выводящий произвольное поле под заголовки товаров в витринах.

Этот код предложил посетитель seachingman на форуме Woocommerce. Я лишь только заменил тег span на div:

В результате в редакторе товаров появится поле с названием cf_short_description . После заполнения его формы текст появится под заголовком товара.
Собственно, если вас это устраивает, то можно так и оставить.

Выглядит неплохо. Но если вы хотите сделать текст всплывающим, то нужно сперва скрыть див описания.
Для этого запишем в style.css темы:

В css код можно ввести дополнительные украшающие атрибуты.

Если вы хотите вместо поля с дополнительным описанием краткое описание вставить то код приведённый выше замените на:

Теперь, чтобы сделать текст всплывающим, воспользуемся js кодом, приведенном на форуме по адресу- http://htmlforum.ru/index.php?s=999be76213b8a89b74d0786533700bfd&showtopic=25671#entry191945
В js коде нужно произвести замену на свои классы. То есть заменить:
li на .woocommerce ul.products li
и .big на .woocommerce ul.products li.product div.cf_short_description .
Код можно вставить в футер темы по разному. Например через плагин «Insert Headers and Footers»
Например, код для витрины представленной ниже будет выглядеть так:

Обратите внимание на начало кода — jQuery(document).ready(function($) {… Оно отличается от $(document).ready(function() {…
Дело в том что из WordPress библиотека загружается в режиме «no-confict». В режиме «no-confict» ярлык $ недоступен, вместо него используется слово jQuery.
Для того чтобы использовать ярлык $ в теле функции, необходимо этот ярлык поставить в параметр функции. Код будет выполнен, когда страница полностью загрузится.
Если вы хотите, чтобы код был выполнен сразу (без ожидания события «ready» в DOM), то начало кода следует записать в таком виде — (function($) {…, а конец кода будет выглядеть так — …})(jQuery); Однако в этом варианте код может не заработать при размещении в хеадере.

Можно также вставить вместо дополнительного описания в поле, просто краткое описание. В этом случае в скрипте выше следует заменить на cf_short_description на short_description и, если требуется, прописать соответствующий путь.

Отмечу, что всплывающее описание присутствует в товарах выведенных шорткодами или в «Похожих записях». Однако, если какой либо плагин или тема изменит прядок вывода элементов витрины, то всплывающие дополнительные описания не появятся. Например, плагин WooCommerce Grid / List toggle добавляет свои дивы в витрину. Это исправляется внесением изменения путей классов в js коде.

© 2014-2017 г.
POWERED BY MSSITE.RU