Adjustable number of posts per pagination filter using JetSmartfilter

Adjustable number of posts per pagination filter using JetSmartfilter

Short Intro:

Roweij Spices wanted to have a filter that can choose number of products display per pagination

Problem:

Jetsmartfilter is a tool that is use for filtering posts such as product and other post type. However, in Roweij Spices case they wanted to have a filter where they can choose the number of display per pagination.

Solution:

By following the steps below, you will be able to achieve this functionality in your archive page.

In this solution, we've used :

  • JetSmartfilter - For the filter
  • Hook Function - A function that will modify the filter's response and result

Creating Filter

  1. Create a filter using JetSmartfilter
  2. Use Radio for the filter type
  3. In Data Source, you can choose manual and kindly input how would you like to display your posts. In Roweij Spices case, we used 6, 9,12 and 15
  4. In query variable field, put a variable name in your choice. In Roweij case, we've used customquery as variable. This will be used later in the hook to fetch the option value to be used in modifying the query.
  5. Click saved

Front End

  1. In your listing grid, add ID just to make sure that the function will be applicable only to this listing grid.
  2. Add your Filter Widget and make sure to add the ID from Listing Grid
  3. Then save your work

Adding the hook function

Add the code using Code Snippet Plugin of your choice or in functions.php. For safety purposes, you can use Code Snippet :

add_filter( 'jet-smart-filters/query/final-query', 'post_per_page_filter' );
function post_per_page_filter( $query ) {
if($query['jet_smart_filters'] == 'jet-engine/arch-filter' && isset($query['meta_query'])){
$hasPostPerPageFilter = false;
foreach($query['meta_query'] as $index => $mq){
if($mq['key'] == 'customquery'){
$ppp = (int)$mq['value'];
$hasPostPerPageFilter = true;
if(count($query['meta_query']) == 1){
unset($query['meta_query']);
}
else{
unset($query['meta_query'][$index]);
}
break;
}
}
if($hasPostPerPageFilter == true){
$query['posts_per_page'] = $ppp;
}
}
return $query;
}

 

Code Explanation :

    • arch-filter (red highlight) - this is the ID of your listing grid. If you choose another variable name, kindly adjust this one as well
    • customquery (orange highlight) - this is the query variable name from the filter that we've created. If you choose another variable name, kindly adjust this one as well.

Contact details

More solutions

by ilias

You're using JetFormBuilder and want to make sure users are at least 18 years old based on their birthday input.

by ilias

This article will show you how to add dynamic code to your templates using the Elementor Shortcode widget and custom PHP code.

by ilias

This article will show you how to add an image to invoice and slip PDF template in PDF Invoice & Packing Slips for Woocommerce plugin