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;
}

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