By following the steps below, you will 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 Specerijen 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 only applicable 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.