YITH Infinite Scrolling
YITH Infinite Scrolling
WordPress plugin
YITH Infinite Scrolling plugin banner

YITH Infinite Scrolling plugin allows to automatically load more content when user scrolls down on paginated pages.

Here are the settings for YITH Infinate Scrolling that work with Chap theme:

The selectors work for archives, search results and products.
Here are the selectors in plain text so they can be copied:

Navigation Selector
Next Selector
.next.item, .nav-previous.item
Item Selector
.product.card, article.item, article.column, article.card
Content Selector
.full.height > main, .full.height > .main.grid
Loading animation

The plugin comes with a default loading gif, but that doesn’t look very attractive. Since the loading image input isn’t escaped it’s possible to use a slight hack to use HTML instead of a loading gif by using the following code in the “Loading Image” input field:

//" class="invisible"><div class="ui active loader"></div><input type="hidden

First we load a 1x1px size invisible image as the loading gif and then close the image tag. Now we use Semantic UI’s .ui.loader as the loading animation. And finally a hidden input is used to deal with the leftover html.

We can also add some text or change size:

//" class="invisible"><div class="ui large active text loader">Loading</div><input type="hidden
Semantic UI’s Loader element is not enabled by default. If you don’t see any loading animation go to Chap Compiler, check definitions/elements/loader.less, save changes and then recompile.
Exit mobile version