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

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 стили настройка

 

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

 

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

 

   
Добавить комментарий

  1. Данил

    На индексацию сайта не влияет? То есть поисковик видит скрытый товар?

    Ответить
    1. Admin автор

      Вообще никак не влияет на индексацию. Поисковик видит обычный товар и индексирует его. Для более быстрой индексации, создайте XML и HTML карту. Также, надо правильно настроить файл robots.txt

      Ответить
  2. Людмила

    Скажите, пожалуйста, нужны какие-то дополнительные настройки, что- бы появлялись изображения товаров при прокрутке? Изображения товаров не появляются. Я думала, что дизайн настроил под свой сайт и всё. Что я делаю не так?

    Ответить
    1. Admin автор

      В каталоге изображения товаров есть, а при прокрутке они не отображаются, правильно понимаю? Попробуйте изменить значение параметра JavaScript and CSS is used on WooCommerce pages only. Можете дать ссылку на каталог.

      Ответить
      1. Людмила

        Спасибо, что ответили. Я абсолютно не разбираюсь в программировании, только визуальные настройки и готовый код вставить куда нужно.

      2. Admin автор

        Для начала попробуйте по переключать параметры: 1 – Don’t update url when next page shown; 2 – JavaScript and CSS is used on WooCommerce pages only; 3 – Disable Font Awesome. То есть, если параметр выключен, включите его и наоборот. Затем зайдите на страницу каталога и перезагрузите её. Если это не поможет, значит плагин не совместим с Woocommerce, вашей темой или другим плагином. В этом случае, можно глянуть файл error_log в корневой директории сайта на хостинге. Может там ошибка отобразилась. Если там нет, тогда к спецу надо обращаться. Могу порекомендовать вам хорошего разработчика WordPress и WooCommerce, вот здесь ссылка вверху на его группу ВК – Супер плагины WordPress