Как сделать раскрывающееся меню категорий товаров Woocommerce в виджете сайдбара по клику

Чтобы было понятно, этот скрипт пишется для этого виджета:
Как сделать раскрывающееся меню категорий товаров Woocommerce в виджете сайдбара по клику

Скрипт будет написан для такой структуры (все лишние теги и классы удалены для простоты восприятия), в вашем шаблоне могут быть другие классы:

<ul class="product-categories">
  <li><a>Для малышей</a></li>
  <li><a>Для мальчиков</a></li>
  <li><a>Для девочек</a></li>
  <li class="cat-parent"><a>Прочие игрушки</a>
    <ul class='children'>
      <li><a>Фигурки и персонажи</a></li>
      <li><a>Игры</a></li>
      <li><a>Конструкторы и головоломки</a></li>
      <li><a>Другие игрушки</a></li>
    </ul>
  </li>
  <li class="cat-parent"><a>Прочие товары</a>
    <ul class='children'>
    <li class="cat-item cat-item-19"><a>Мобили</a></li>
    </ul>
  </li>
</ul>

Вы можете исправить скрипт под свои классы и под свою структуру:

$('.product-categories .cat-parent').children('a').click(function() {
  $(this).siblings('.children').slideToggle();
  return false;
});

Для дочернего меню нужно задать display: none; в стилях:

ul.children{
  display: none;
}

В некоторых шаблонах есть специальное поле для добавления своих js-кодов
Например:

Или добавить его в свой файл скриптов, например custom.js:

$(function() {
  $('.product-categories .cat-parent').children('a').click(function() {
    $(this).siblings('.children').slideToggle();
    return false;
  });
});

Пример

See the Pen category menu woocommerce open on click by Denis (@deniscreative) on CodePen.0

Как сделать открытие картинок из слайдера RoyalSlider для WP в pop-up

Для того, чтобы можно было открывать картинки из слайдера Royal Slider в popup нужно: 1….

Специальные теги для плагина Contact Form 7

Иногда нужно получить больше информации из отправленной формы, не только те данные, которые заполнил пользователь,…

Что нового в WordPress 4.4

Несколько дней назад состоялся релиз WordPress 4.4 «Clifford», названный в честь американского музыканта Клиффорда Брауна….

Пример пагинации для WordPress

Пример пагинации, которую использую я при верстке в связке с плагином WP-PageNavi.

10 комментариев

То что нужно! Но для неподготовленного пользователя следует добавить что скрипт вставляется в footer.php в теге <code></code>

Денис, уточни пожалуйста куда вставлять скрипт

В некоторых шаблонах есть специальное поле для добавления своих js-кодов
Например:

Или добавить его в свой файл скриптов, например custom.js:

$(function() {
  $('.product-categories .cat-parent').children('a').click(function() {
    $(this).siblings('.children').slideToggle();
    return false;
  });
});
Рамиль

Сделал все по инструкции, но почему то не работает. display:none сработало, а с раскрытием трудности возникли. Структура и классы идентичны. Можете подсказать в чем может быть дело?

Сложно сказать что-то не видя код. Это как сказать, что у меня тоже Mazda3, и я так же ремонтировал ходовую как и в статье, но стук сзади остался, может ли кто-то подсказать причину.
Вариантов много, нужно смотреть.

Игорь

Здравствуйте! А как переделать скрипт, что бы меню раскрывалось при наведении а не по клику?

Просто заменить .click на .hover будет не достаточно, необходимо переписать скрипт так:

$(function() {
  $(".product-categories .cat-parent").hover(function() {
      $(this)
        .children(".children")
        .slideToggle();
      return false;
    });
});

Но это будет не совсем удобно для пользователя.

Пример — https://codepen.io/deniscreative/pen/mpYRWZ

Добрый день.
Все способы пробовал, но меню так и не получилось разворачивать по клику как у вас.
По клику на меню, оно открывает категорию перегружая страницу и открывает все дочерние подкатегории.

Как на вашем примере не получается.(

Возможно, у вас в шаблоне уже прописаны какие-то скрипты для меню с дочерними элементами. Нужно смотреть. Код в статье отлично работает на базовом шаблоне, проверено на нескольких проектах.

Вадим

Древняя тема, но такая актуальная) Отличное качество кода, когда просто вставил — и работает как надо.
Спасибо, Денис, за креатив и полезные заметки! Удачи во всём, надеюсь, всё хорошо у тебя.

Мои 5 копеек — развитие идеи, позволяет не меняя шаблонов кастомизировать стандартный виджет категорий woocommerce.

/*вставляем в стили :*/
.cat-parent a
{
font-size: 15px!important;
font-weight: 700;
padding-bottom: 3px;
/* border-bottom: 1px solid red; */
}
.site-main .product-categories .cat-parent ul.children
{
display: none;
}
.site-main .product-categories .cat-parent i
{
color: #fdfdfd;
float: right;
width: 31px;
height: 23px;
text-align: center;
cursor: pointer;
display: inline-block;
padding-top: 3px;
font-size: 17px;
background-color: #72b64f;
/* border: 1px solid black; */
}
.woocommerce .site-main .widget_product_categories li.cat-parent>a {
font-weight: bold;
display: inline-block;
width: 87%;
}
.cat-parent a
{
border-bottom: 1px solid transparent;
}
.cat-parent.open a
{
border-bottom: 1px solid #72b64f;
}

/*вставляем в скрипты:*/
$(‘.site-main .product-categories .cat-parent’).children(‘a’).after(

);

$(function() {
$(‘.product-categories .cat-parent’).children(‘i’).click(function() {
$(this).siblings(‘.children’).slideToggle();

if(!$(this).parent(‘.cat-parent’).hasClass(‘open’)){
$(this).parent(‘.cat-parent’).addClass(‘open’);
$(this).parent(‘.cat-parent’).children(‘i’).attr( «title»,»Свернуть»);
}else{
$(this).parent(‘.cat-parent’).removeClass(‘open’);
$(this).parent(‘.cat-parent’).children(‘i’).attr( «title»,»Развернуть»);
}
return false;
});
});

Ответить