Привет! Сегодня я покажу вам очень полезный плагин для интернет магазина WooCommerce. Вы можете сделать бесконечную прокрутку товаров с помощью функции Load More Products. Товары в каталоге будут постепенно подгружаться при прокрутке страницы вниз. Можно вывести кнопку “Загрузить больше”. Вы можете указать свой текст и стиль кнопки. Плагин имеет функцию постепенной загрузки изображений Lazy Load. Всё очень просто и быстро, смотрите далее!
Установить плагин WooCommerce Load More Products вы можете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, установите и активируйте его.
Далее, после активации плагина, слева в меню админ-панели перейдите на страницу: BeRocket – Load More Products.
В настройках вы можете:
General
- Products Loading Type. Выбрать тип загрузки. 3 варианта: Авто-загрузка; С помощью кнопки; AJAX пагинация.
- Loading Image. Выбрать изображение загрузки;
- Buffer Pixels. Расстояние в пикселях до загрузки;
- Don’t update url when next page shown. Не обновлять URL адрес при загрузки;
- JavaScript and CSS is used on WooCommerce pages only. Использовать CSS и JS только на страницах Woo;
- Сохраните изменения.
Button Settings
- Text on button. Укажите свой текст кнопки;
- Background color. Цвет фона кнопки;
- Background color on mouse over. Цвет фона при наведении;
- Border color. Цвет границ кнопки;
- Text color. Цвет текста;
- Text color on mouse over. Цвет текста при наведении;
- Font size. Размер шрифта;
- Paddings. Укажите расстояние со всех сторон между границей и кнопкой;
- Margin. Укажите величину отступа для всех сторон;
- Border. Величина границ со всех сторон;
- Border radius. Радиус границ.
Previous Settings
Здесь можно включить и настроить кнопку Load Previous Загрузить предыдущие. Настройки такие же.
Selectors
Здесь можно настроить крючки JavaScript для пользовательского кода:
- Products Container Selector;
- Product Item Selector;
- Pagination Selector;
- Next Page Selector;
- Previous Page Selector.
JavaScript
Здесь вы можете добавить свой код до загрузки Before Update и после After Update.
CSS
- Disable Font Awesome. Можно не загружать css файл для шрифта Awesome на сайт;
- Font Awesome Version. Выбрать версию шрифта;
- Custom CSS. Добавить свои стили;
- Сохраните изменения.
Всё готово. Перейдите на сайт в каталог товаров. Внизу каталога будет отображаться кнопка, либо будет происходить автоматическая загрузка товаров. Смотря как настроите.
&n