Привет! Сегодня я покажу вам очень полезный плагин для интернет магазина 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. Добавить свои стили;
- Сохраните изменения.
Всё готово. Перейдите на сайт в каталог товаров. Внизу каталога будет отображаться кнопка, либо будет происходить автоматическая загрузка товаров. Смотря как настроите.
Остались вопросы? Напиши комментарий! Удачи!
На индексацию сайта не влияет? То есть поисковик видит скрытый товар?
Вообще никак не влияет на индексацию. Поисковик видит обычный товар и индексирует его. Для более быстрой индексации, создайте XML и HTML карту. Также, надо правильно настроить файл robots.txt
Скажите, пожалуйста, нужны какие-то дополнительные настройки, что- бы появлялись изображения товаров при прокрутке? Изображения товаров не появляются. Я думала, что дизайн настроил под свой сайт и всё. Что я делаю не так?
В каталоге изображения товаров есть, а при прокрутке они не отображаются, правильно понимаю? Попробуйте изменить значение параметра JavaScript and CSS is used on WooCommerce pages only. Можете дать ссылку на каталог.
Спасибо, что ответили. Я абсолютно не разбираюсь в программировании, только визуальные настройки и готовый код вставить куда нужно.
Для начала попробуйте по переключать параметры: 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