Wordpress pagination with custom posts_per_page issue - php

Question

In a custom Woocommerce products page I filter posts_per_page with a dropdown menu. It works well and the table is updated with the new value.
But then if I click on the 'Next' button, next_posts_link doesn't post the new posts_per_page value, and the second page starts from record #11, as default.
Any solution?
<?php
$prodNum = $_POST['num_prods'];
?>
<!-- SELECT POST PER PAGES -->
<form id="numProdsForm" method="POST">
<select name="num_prods" id="num_prods" onchange="this.form.submit()">
<option value="10" <?php if ($prodNum==10){ ?> selected <?php } ?>>10</option>
<option value="20" <?php if ($prodNum==20){ ?> selected <?php } ?>>20</option>
<option value="30" <?php if ($prodNum==30){ ?> selected <?php } ?>>30</option>
<option value="50" <?php if ($prodNum==40){ ?> selected <?php } ?>>50</option>
<option value="100" <?php if ($prodNum==50){ ?> selected <?php } ?>>100</option>
</select>
</form>
<!-- CUSTOM TABLE -->
<table>
<?php if ( woocommerce_product_loop() ) { ?>
<?php
$args = array(
'post_type' => 'product',
'posts_per_page' => $prodNum,
'orderby'=>'title',
'order' => 'ASC'
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
global $product;
?>
<tr>
<td class="flex-row" role="cell"><?php echo $product->get_attribute( 'color' ); ?></td>
</tr>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
<?php
} else {
do_action( 'woocommerce_no_products_found' );
}
?>
</table>
<div class="products-pagination">
<?php previous_posts_link( '« PREV', $loop->max_num_pages) ?>
<?php next_posts_link( 'NEXT »', $loop->max_num_pages) ?>
</div>
I've tried to put the pagination before wp_reset_query();, or to use get $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1; but nothing changes.

Answer 1

You could try using a "GET" rather than "POST" for the form, and pass the offset and number of posts to show as URL params. Then you can add the offset attribute to the query. You can also optimize some of your code by using selected selected function definition rather than your if statements for the options.
<?php
$product_number = ( isset( $_GET['num_prods'] ) ) ? absint( $_GET['num_prods'] ) : 0;
$existing_offset = ( isset( $_GET['offset'] ) ) ? absint( $_GET['offset'] ) : 0;
$offset = $product_number + $existing_offset;
?>
<!-- SELECT POST PER PAGES -->
<form id="numProdsForm" method="GET">
<input type="hidden" name="offset" value="<?php echo esc_attr( $offset ); ?>">
<select name="num_prods" id="num_prods" onchange="this.form.submit()">
<option value=""> - - Choose Number of Products to Show -- </option>
<option value="10" <?php selected( 10, $product_number ); ?>>10</option>
<option value="20" <?php selected( 20, $product_number ); ?>>20</option>
<option value="30" <?php selected( 30, $product_number ); ?>>30</option>
<option value="50" <?php selected( 50, $product_number ); ?>>50</option>
<option value="100" <?php selected( 100, $product_number ); ?>>100</option>
</select>
</form>
<!-- CUSTOM TABLE -->
<table>
<?php if ( woocommerce_product_loop() ) { ?>
<?php
$args = array(
'post_type' => 'product',
'posts_per_page' => $product_number,
'offset' => $offset, // the offset.
'orderby' => 'title',
'order' => 'ASC',
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) :
$loop->the_post();
global $product;
?>
<tr>
<td class="flex-row" role="cell"><?php echo $product->get_attribute( 'color' ); ?></td>
</tr>
<?php endwhile; ?>
<?php wp_reset_postdata(); // use wp_reset_postdata(). ?>
<?php
} else {
do_action( 'woocommerce_no_products_found' );
}
?>
</table>
<div class="products-pagination">
<?php previous_posts_link( '« PREV', $loop->max_num_pages ); ?>
<?php next_posts_link( 'NEXT »', $loop->max_num_pages ); ?>
</div>