Pagination in portfolio grids not working with plugin Search&Filter

Hi elenapoliti,

What was the version of Enfold that the Search & Filter plugin was working?

Best regards,
Nikko

Hi elenapoliti,

I apologize for the delayed response.
The issue seems a bit tricky, the pagination that comes with portfolio grid does not work in this case because the Post Number is set to All instead of putting a certain number.
I’m not really sure how it works with our page builder but please try to use Infinite Scroll instead of pagination: https://searchandfilter.com/documentation/search-results/infinite-scroll/

Best regards,
Nikko

Hi elenapoliti,

I tried to test the Search & Filter Pro plugin however I can’t seem to make it work with

[searchandfilter id="123456" action="filter_next_query"]

There’s a avia_post_grid_query filter in Portfolio Grid where you can filter in the query, and I tried to modify it according to the instructions however it doesn’t work.
The only one that actually worked for me is

[searchandfilter id="123"]
[searchandfilter id="123" show="results"]

But it will need some modifications with CSS to make it look like portfolio grid, which I think is the easier approach.
I also tested infinite scroll but could not get it to work even with a WordPress Default theme.

Best regards,
Nikko

Hi elenapoliti,

I have created a new test page based on the link you gave (link in private content), I also duplicated the search filter and pointed it to the new page.
I added this CSS Code to adjust the style (in Enfold > General Styling > Quick CSS):

#top #search-filter-results-4746 hr,
#top #search-filter-results-4746 > div:not(.pagination) p {
    display: none;
}

#top #search-filter-results-4746 > div:not(.pagination) {
    width: 50%;
    float: left;
    box-sizing: border-box;
    background-color: white;
    border: 0.5px solid #ececec;
    display: flex;
    flex-direction: column-reverse;
    min-height: 470px;
}

#top #search-filter-results-4746 > div:not(.pagination) h2 {
    background-color: black;
    color: white;
    font-family: 'neutratext-book', Helvetica, Arial, sans-serif!important;
    font-size: 18px !important;
    margin: 0;
    padding: 20px;
    text-transform: none;
    min-height: 80px;
}

#top #search-filter-results-4746 div:not(.pagination) p:has(img) {
    display: block;
}

#top #search-filter-results-4746 > hr:nth-last-child(3) {
    display: block;
    margin-bottom: 20px;
}

#top #search-filter-results-4746 > .pagination {
    padding-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#top #search-filter-results-4746 > .pagination a {
    float: none;
    width: auto;
    padding: 0 20px;
    font-size: 14px;
}

Let us know if this works.

Best regards,
Nikko