Add a Products Per Page dropdown for WooCommerce

It’s no lie that WooCommerce is an amazing ecommerce tool for WordPress. It’s always my go-to plugin for creating stores of all types and sizes.

While the product archive pages have a great layout and sorting ability – one aspect I think every store can benefit from is a ‘show x products per page’ ability – as seen on most retail stores online. WooCommerce doesn’t do this by default – however some themes do include it. But you can add this to any theme with the following snippet by placing it in your functions.php file or standalone plugin.

Whats cool about this snippet is when the user has selected an option from the dropdown, it will autoload the page without having an additional button to click to update. You can also change the values of the ‘per page’ options as well.

// add a products per-page select dropdown to archive - above shop productloop
add_action( 'woocommerce_before_shop_loop', 'pro_selectbox', 25 );
function pro_selectbox() {
$per_page = filter_input(INPUT_GET, 'perpage', FILTER_SANITIZE_NUMBER_INT);
echo '<div class="woocommerce-perpage">';
echo '<select onchange="if (this.value) window.location.href=this.value">';
$orderby_options = array(
'9' => '9',
'12' => '12',
'24' => '24',
'300' => 'All'
);
foreach( $orderby_options as $value => $label ) {
echo "<option ".selected( $per_page, $value )." value='?perpage=$value'>$label</option>";
}
echo '</select>';
echo '</div>';
}
add_action( 'pre_get_posts', 'pro_pre_get_products_query' );
function pro_pre_get_products_query( $query ) {
$per_page = filter_input(INPUT_GET, 'perpage', FILTER_SANITIZE_NUMBER_INT);
if( $query->is_main_query() && !is_admin() && is_post_type_archive( 'product' ) ) {
$query->set( 'posts_per_page', $per_page );
}
}

Hope that helps.

You can then style the dropdown (I implemented Select2 to modify the dropdown in the example below).

Useful post? Share it

5 comments on “Add a Products Per Page dropdown for WooCommerce

  1. Hi mate, this was super-helpful code which is working great on my client site’s main shop page… but for some reason, seems to be ignored on the Product Category pages. The dropdown appears & various options can be selected, but the result is not firing; it just shows the default number of products on each page. Any ideas what I should be looking at?

    1. Hi Glen,

      Hmm, this works for me on store and product category / tag pages on multiple stores.
      If the dropdown appears but doesn’t action anything when you make a selection, you may need to edit this line:

      if( $query->is_main_query() && !is_admin() && is_post_type_archive( ‘product’ ) ) {

      …and could try adding in is_product_category() into the conditional in the last function, something like this (not tested):

      if( $query->is_main_query() && !is_admin() && is_post_type_archive( ‘product’ ) || is_product_category() ) {

      Phil

  2. Hi Phil,
    Your code is really sweet. I was using a plugin…but it hadn’t been updated in 2-3 years! I was searching for a php alternative, when I came across your code 🙂

    I’d like to shift the drop-downs location…it is stepping on the “showing x results of x” text, so I was thinking that moving it to the right side of the page would be nice. I’d also like to add a bit of text…something like “Set Products Per Page”…and then the drop-down to the right of that.

    I’m sorry to bug you, but as is no doubt obvious, I am no code genius.

    Thanks,
    Bill

    1. D’oh! sorry, I figured out how to add the text I mentioned….so it is just figuring out how to get it to the right side. I also just noticed that whatever option I select, the count doesn’t go beyond 12.

      Thanks,
      Bill

      1. Hi Bill,

        In every instance where I use this snippet, I always position is on the right and thats done with some CSS:

        .woocommerce-perpage {
        display: inline-block;
        float: right;
        margin-left: 20px;
        }

Leave a Reply

Your email address will not be published. Required fields are marked *