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

Привет! Сегодня я покажу вам очень полезный плагин для интернет магазина WooCommerce. Вы можете сделать бесконечную прокрутку товаров с помощью функции Load More Products. Товары в каталоге будут постепенно подгружаться при прокрутке страницы вниз. Можно вывести кнопку “Загрузить больше”. Вы можете указать свой текст и стиль кнопки. Плагин имеет функцию постепенной загрузки изображений Lazy Load. Всё очень просто и быстро, смотрите далее!

 

интернет магазин загрузка

 

Установить плагин WooCommerce Load More Products вы можете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, установите и активируйте его.

 

плагин WooCommerce Load More Products

 

Далее, после активации плагина, слева в меню админ-панели перейдите на страницу: 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 Загрузить предыдущие. Настройки такие же.

 

кнопка Load Previous

 

Selectors

Здесь можно настроить крючки JavaScript для пользовательского кода:

  • Products Container Selector;
  • Product Item Selector;
  • Pagination Selector;
  • Next Page Selector;
  • Previous Page Selector.

 

Products Container Selector

 

JavaScript

Здесь вы можете добавить свой код до загрузки Before Update и после After Update.

 

JavaScript

 

CSS

  • Disable Font Awesome. Можно не загружать css файл для шрифта Awesome на сайт;
  • Font Awesome Version. Выбрать версию шрифта;
  • Custom CSS. Добавить свои стили;
  • Сохраните изменения.

 

css стили настройка

 

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

&n

Оцените статью