Доброго времени суток, дорогой друг! Прежде чем, приступить к чтению данного материала, убедись, что ты уже прекрасно знаешь, что и как делать с фильтрами по слоям в 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; }
И конечно же Вы не обязаны использовать именно этот код, я просто показал Вам сам процесс. Вот собственно и всё. Подписывайтесь на меня в социальных сетях или тут на почтовую рассылку, чтобы не пропустить, как можно будет сделать, чтобы фильтры открывались по кнопке. Добра Вам!
Юрий
- 29 мая 2017, 13:02 0 ↓Роман
- 28 июня 2017, 15:18 0 ↑ ↓1. Создаёте необходимые меню.
2. Затем, используя стандартный виджет WordPress вывода меню, выводите необходимые меню.
Макс
- 31 января 2019, 09:31 0 ↓