Бесконечная прокрутка товаров плагин WooCommerce

WooCommerce

Привет! Сегодня я покажу вам очень полезный плагин для интернет магазина 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. Добавить свои стили;

Сохраните изменения.

Всё готово. Перейдите на сайт в каталог товаров. Внизу каталога будет отображаться кнопка, либо будет происходить автоматическая загрузка товаров. Смотря как настроите.

Остались вопросы? Напиши комментарий! Удачи!