[Resolved] Display how many item per page in the frontend

[Author]

Posts

[wilborF]

Pls Help

We need a pagination in the frontend where user can select how many item per page

Attached is the example

Thanks

[Luo Yang]

Hello,

Thanks for the details, there isn't such kind of built-in feature within Views plugin:
user can select how many item per page

You can add a feature request here:
https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

Our developers will evaluate it.

And currently, you might consider custom codes, for example:
Use filter hook wpv_filter_query to change Views query, setup the pagination parameters as what you want.

More help:
https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_query
https://developer.wordpress.org/reference/classes/wp_query/#pagination-parameters

[wilborF]

Can you write a example code for us ? thanks

[Luo Yang]

For example, you can try these:

1) Make sure you are using the latest version of Toolset plugins, you can download them here:
https://toolset.com/account/downloads/

2) Edit your post view,
a) in section "Custom Search Settings", enable option "AJAX results update when visitors change any filter values"
So user can submit the search form without clicking submit button.

b) in section "Search and Pagination", setup a dropdown menu "item-per-page" in search form:

<div class="form-group">
	<label for="item-per-page">[wpml-string context="wpv-views"]Items per page[/wpml-string]</label>
	[wpv-control-postmeta type="select" field="item-per-page" source="custom" url_param="item-per-page" values="10,15,20" display_values="10,15,20"]
</div>

3) Add below PHP codes into your theme file "functions.php":

add_filter('wpv_filter_query', function($query, $settings, $views_id){
	if($views_id == 123){
		if(isset($_GET['item-per-page'])){
			$query['posts_per_page'] = $_GET['item-per-page'];
			foreach($query['meta_query'] as $k => $v){
				if($v['key'] == 'item-per-page'){
					unset($query['meta_query'][$k]);
					break;
				}
			}
		}
	}
	return $query;
}, 99, 3);

Please replace 123 with your post view's ID.

[wilborF]

Can you confirm that this work on views archive pages

[Luo Yang]

For the WordPress archive page, you need to try pre_get_posts action hook:
https://developer.wordpress.org/reference/hooks/pre_get_posts/

See the example codes in above document:
section "Targeting the right query"

[wilborF]

I'm Confuse can you write down another code for us thanks

[Luo Yang]

Here is the example codes:

add_action( 'pre_get_posts', function($query) {
    if ( ! is_admin() && $query->is_main_query() && isset($_GET['item-per-page'])) {
        $query->set( 'posts_per_page', $_GET['item-per-page'] ); // Setup item-per-page
		$meta_query = $query->query_vars['meta_query'];
		foreach($meta_query as $k => $v){
			if($v['key'] == 'item-per-page'){
				unset($meta_query[$k]); // remove extra meta query on item-per-page
				break;
			}
		}
        $query->set( 'meta_query', $meta_query );
		return;
    }
}, 99);

For your reference. More help:
https://developer.wordpress.org/reference/hooks/pre_get_posts/

[wilborF]

Its not working on woocommerce shop page and when we tried it to a custom post type archive page it said "No items found"

[wilborF]

We revised your code in the condition section "is_post_type_archive" and it seems its working right now

add_action('pre_get_posts', 'change_posts_per_page_archive_size',99, 3 );
function change_posts_per_page_archive_size($query) {
if ( is_post_type_archive( 'product' ) && $query->is_main_query() && isset($_GET['item-per-page']) ) {
$query->set( 'posts_per_page', $_GET['item-per-page'] ); // Setup item-per-page
$meta_query = $query->query_vars['meta_query'];
foreach($meta_query as $k => $v){
if($v['key'] == 'item-per-page'){
unset($meta_query[$k]); // remove extra meta query on item-per-page
break;
}
}
$query->set( 'meta_query', $meta_query );
return;
}
}

But the problem is, We do think that its conflict with the other filter input fields, when we trying to add another filter like categories, price, color etc. the item-per-page select input return to blank again.

Can you confirm you got the same issues on your end and do you have a quick solution for this thanks

(take note that we used wpv-control-post-taxonomy the standard way for the other filter fileds)

[wilborF]

add_action( 'pre_get_posts', function($query) {

if ( $query->is_main_query() && isset($_GET['item-per-page']) ) {

$query->set( 'posts_per_page', $_GET['item-per-page'] ); // Setup item-per-page
$meta_query = $query->query_vars['meta_query'];
foreach($meta_query as $k => $v){
if($v['key'] == 'item-per-page'){
unset($meta_query[$k]); // remove extra meta query on item-per-page
break;
}
}
$query->set( 'meta_query', $meta_query );
return;
}
}, 99);