Что бы увидеть email и телефон, включите JavaScript.

WooCommerce делаем фильтр товаров красивым

Доброго времени суток, дорогой друг! Прежде чем, приступить к чтению данного материала, убедись, что ты уже прекрасно знаешь, что и как делать с фильтрами по слоям в WooCommerce. Если нет, то статья "WooCommerce фильтр товаров или как пользоваться фильтром по слоям", поможет тебе в этом. В этой же статье мы объединим все фильтры в один виджет и сделаем отображение количества найденных товаров.

Подготовительный этап красивых фильтров товаров в WooCommerce

Первое что нам необходимо сделать, это поставить дополнительный плагин, а именно, плагин amr shortcode any widget. Он позволяет вставить любой созданный виджет в любое место с помощью простого шорт-кода, которые он присваивает каждому виджету при их сохранении.

Теперь нам надо внести некоторые коррективы в непосредственно в код. Но прежде нам надо скопировать файл class-wc-widget-layered-nav-filters.php из папки wp-content/plugins/woocommerce/includes/widgets, в папку woocommerce вашей темы. Название самого файла, тоже чуть измените иначе не подключиться, так как в самом плагине для подключения используется конструкция include_once. Я сохранил путь такой же как был в папке плагина, чтобы не путаться в дальнейшем.

Делаем красивые и удобные фильтры товаров в WooCommerce

Теперь, осталось совсем немного, а точнее поправить кое-где код и создать виджеты. Ну и конечно же пошаманить с CSS, куда без этого, ведь мы делаем красивые фильтры!

Добавляем ниже следующий кусок кода в сам скопированный файл:

echo '
'; $total = $wp_query->found_posts; printf( __( '
Найдено товаров: %d
', 'woocommerce' ), $total ); echo '
 
'; echo '
';

перед строкой, конца виджета:

$this->widget_end( $args );

Этот код определяет количество выведенных постов и выводит их количество в виджете.

Теперь открываем файл functions.php Вашей темы и как Вы уже правильно догадались, регистрируем наш виджет, а именно добавляем строку:

include_once('woocommerce/includes/widgets/bs-class-wc-widget-layered-nav-filters.php');

Как я писал выше, я сохранил путь каким он был в плагине, это подключит наш новый класс в нашу тему и переопределит уже подключенный класс. Да совсем забыл, обязательно измените название класса, иначе получите ошибку, что производится повторное объявление класса. Также обратите внимание на widget_id, если его не переопределять, то наш класс изменит переопределить работу виджета подключаемого в самом плагине WooCommerce. Так же можете изменить название самого виджета с помощью widget_name, и т.д., описание и заголовок.

После этих, несложных манипуляций заходим в виджеты, там плагин, который мы установили для генерации шорт-кодов создал отдельную панель виджетов "Widgets of Shortcodes", которая служит единственной цели, удобству использования, а именно группировки виджетов, которые мы будем отображать с помощью их шорт-кодов.

Прежде всего загоняем туда наш вновь созданный виджет или если не меняли id, тот что определяется самим плагином "WooCommerce Навигационные фильтры". В нём будет отображаться все задействованные клиентом магазина фильтры. Затем, добавляем необходимое количество виджетов (в соответствии с количеством наших фильтров) "WooCommerce Фильтр по слоям". Сюда, также можно добавить и фильтр по цене, это виджет "WooCommerce Фильтр по цене". Как настраивать сами виджеты, я писал в статье "WooCommerce фильтр товаров или как пользоваться фильтром по слоям".

После того как Вы их настроите и сохраните создаём виджет "Текст" в панели магазина.

Иногда виджет "Текст" может не сработаться с плагином генерации шорткодов, копать надо в глубь темы, корни там, или воспользоваться еще одним плагином "Black Studio TinyMCE Widget", который добавляет виджет аналогичный виджету "Текст" только с редактором.

И в сам виджет прописываем код:

[do_widget id=woocommerce_layered_nav_filters-2] [do_widget id=woocommerce_price_filter-2] [do_widget id=woocommerce_layered_nav-4] [do_widget id=woocommerce_layered_nav-6] [do_widget id=woocommerce_layered_nav-7] [do_widget id=woocommerce_layered_nav-10] [do_widget id=woocommerce_layered_nav-9] [do_widget id=woocommerce_layered_nav-3]

Соответственно Вы вставляете свои шорт-коды на фильтры. И последнее, идём с помощью меню WordPress в редактор CSS и добавляем саму красоту, с помощью кода:

/*---------------------------------------
 Стили Фильтров
----------------------------------------*/
#bs-filters {
    border: 1px solid #fff !important;
    border-radius: 5px !important;
}
#bs-filters .widget_price_filter .price_slider_amount {
    margin-top: 20px !important;
}
#bs-filters .widget_layered_nav ul li a:before,
#bs-filters .widget_layered_nav_filters ul li a:before {
    margin-top: .4em;
}
#bs-filters,
#bs-filters li,
#bs-filters span,
#bs-filters a,
#bs-filters a:before {
    font-size: 12px !important;
}
#bs-filters {
    padding: 5px !important;
    background-color: #225ecd;
    box-shadow: 0 0 3px #052367;
}
#bs-filters-wrapper {
    background-color: #fff;
    padding: 5px !important;
    border-radius: 5px;
}
#bs-filters #woocommerce_layered_nav_filters-2 h3 {
    display: block;
    line-height: normal;
    font-size: 14px;
    margin: 5px;
}
#bs-filters #woocommerce_layered_nav_filters-2 {
    margin-bottom: 15px;
    background-color: rgba(35,212,0,0.3);
    padding: 5px 10px 30px;
    border-radius: 5px;
}
#bs-filters button:before {
    margin-left: -12px;
}
#bs-filters button {
    padding: 5px 10px !important;
    width: auto !important;
}
#bs-filters .widget h3.widget-title {
    font-size: 14px;
    margin-bottom: 0;
}
.bs-count-product {
    text-align: center;
    position: relative;
}
.bs-count-product .text-count {
    padding: 5px 7px;
    position: absolute;
    bottom: -40px;
    left: 35px;
    border: 2px solid #fff;
    background-color: #ffddb9;
    border-radius: 3px;
    box-shadow: 0 0 3px #000;
}

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

Теги материала: WordPress WooCommerce
Понравилась статья, поделитесь ей с друзьями!
RSS подписка по электронной почте


коммент.

avatar

Юрий

- 29 мая 2017, 13:02
Pдравствуйте. Можете подсказать: как настроить виджет Woocommerce категории товаров чтоб он в сайдбаре показывал разные категории. К примеру как вот на этом сайте-http://stabilizatory.msk.ru/ По напряжению и идет перечисление категорий, затем По назначению и идет другое перечисление категорий и т. д Спасибо заранее за помощь
avatar

Роман

- 28 июня 2017, 15:18
Доброго времени суток, Юрий! С помощью виджета Woocommerce, так сделать не получится. Такое можно реализовать с помощью фильтров по слоям. При создании атрибутов, можно сделать иерархию. Другим вариантом, создания такого показа, может быть следующий процесс:
1. Создаёте необходимые меню.
2. Затем, используя стандартный виджет WordPress вывода меню, выводите необходимые меню.
avatar

Макс

- 31 января 2019, 09:31
Роман, по умолчанию, при выборе параметров фильтра. Например цвета, сама панель фильтрации скрывается и открывается выбранный товар. А как сделать, что бы сначала выбрать все необходимые фильтры, а уже после этого по кнопке (в идеале по кнопке «фильтровать» фильтра цены) переходить уже к выбранным товарам?

Написать комментарий

Ваш email не будет опубликован. Обязательные поля отмечени символом *