How to Add Products Per Page Dropdown to Woocommerce

Posted by & filed under Tutorials, Web Design Tutorials.

How to Add Products Per Page Dropdown to Woocommerce was last modified: March 9th, 2014 by Derek Schmidt

This is going to be a very quick tutorial that will show you how to add the ability to Woocommerce for users to select the amount of products shown per page.

We will be using the built in Woocommerce hooks and filters and set a cookie via php so the browser can remember the selection across the website. We will be trying to add this into a plugin in the near future but until that time, follow along and edit as you see fit.
Major thanks to bcworkz for his help with setting the cookies and just being awesome!

so here we go, in your themes functions.php file let’s add the following little snippet:

// Lets create the function to house our form
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

function woocommerce_catalog_page_ordering() {
?>
<?php echo '<span class="itemsorder">Items Per Page:' ?>
    <form action="" method="POST" name="results" class="woocommerce-ordering">
    <select name="woocommerce-sort-by-columns" id="woocommerce-sort-by-columns" class="sortby" onchange="this.form.submit()">
<?php
 
//Get products on page reload
if  (isset($_POST['woocommerce-sort-by-columns']) && (($_COOKIE['shop_pageResults'] <> $_POST['woocommerce-sort-by-columns']))) {
        $numberOfProductsPerPage = $_POST['woocommerce-sort-by-columns'];
          } else {
        $numberOfProductsPerPage = $_COOKIE['shop_pageResults'];
          }
 
//  This is where you can change the amounts per page that the user will use  feel free to change the numbers and text as you want, in my case we had 4 products per row so I chose to have multiples of four for the user to select.
			$shopCatalog_orderby = apply_filters('woocommerce_sortby_page', array(
			//Add as many of these as you like, -1 shows all products per page
			  //  ''       => __('Results per page', 'woocommerce'),
				'20' 		=> __('20', 'woocommerce'),
				'-1' 		=> __('All', 'woocommerce'),
			));

		foreach ( $shopCatalog_orderby as $sort_id => $sort_name )
			echo '<option value="' . $sort_id . '" ' . selected( $numberOfProductsPerPage, $sort_id, true ) . ' >' . $sort_name . '</option>';
?>
</select>
</form>

<?php echo ' </span>' ?>
<?php
}
 
// now we set our cookie if we need to
function dl_sort_by_page($count) {
  if (isset($_COOKIE['shop_pageResults'])) { // if normal page load with cookie
     $count = $_COOKIE['shop_pageResults'];
  }
  if (isset($_POST['woocommerce-sort-by-columns'])) { //if form submitted
    setcookie('shop_pageResults', $_POST['woocommerce-sort-by-columns'], time()+1209600, '/', 'www.your-domain-goes-here.com', false); //this will fail if any part of page has been output- hope this works!
    $count = $_POST['woocommerce-sort-by-columns'];
  }
  // else normal page load and no cookie
  return $count;
}
 
add_filter('loop_shop_per_page','dl_sort_by_page');
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_page_ordering', 20 );

 

I tried to keep it well documented so if you have any questions feel free to let me know and I can make the edits as they come. I hope this helps, Because I wanted this located next to the “Sort by” dropdown I used the “before_shop_loop” action then styled it in place via css. You can always change this depending on your needs by just changing that hook.

Like this? Share it with your friends!
Facebook Twitter Linkedin Email

How to Add Products Per Page Dropdown to Woocommerce was last modified: March 9th, 2014 by Derek Schmidt

68 Responses to “How to Add Products Per Page Dropdown to Woocommerce”

  1. Annie

    Hi and thanks for this code! However things dont go as they should?
    Standard it shows 12 items, and as long as you keep that and hit next everytime it works fine, also just selecting show all works fine too.

    However, as soon as you select lets say 8 then on the bottom select next, it resets every time to 12 again. I suppose it should keep showing 8 even after hitting next.

    But where it really messes up is if at first it shows 8, then after hitting next its adds 12 again, if you hit/select 8 per page again, it messes the count up. If it was at 12 items and you select then lets say 32 the next page it skips from 13 to 33, so it does not show numbers 13 to 32 all of the sudden it starts showing 33 to 64.

    So it is all messed up and misguides clients for they dont see/skip a lot of products this way.

    Reply
  2. Annie

    I used this code by the way:

    // User selects how many products to view per page

    // via http://designloud.com/how-to-add-products-per-page-dropdown-to-woocommerce/

    function woocommerce_catalog_page_ordering() {

    ?>

    __(‘Producten per pagina’, ‘woocommerce’),

    ‘8’ => __(‘8 per pagina’, ‘woocommerce’),

    ’16’ => __(’16 per pagina’, ‘woocommerce’),

    ’32’ => __(’32 per pagina’, ‘woocommerce’),

    ‘-1′ => __(‘Alle producten’, ‘woocommerce’),

    ));

    foreach ( $shopCatalog_orderby as $sort_id => $sort_name )

    echo ” . $sort_name . ”;

    ?>

    <?php // Adrian's code

    if (isset($_POST['woocommerce-sort-by-columns']) && (($_COOKIE['shop_pageResults'] $_POST['woocommerce-sort-by-columns']))) {

    $currentProductsPerPage = $_POST['woocommerce-sort-by-columns'];

    } else {

    $currentProductsPerPage = $_COOKIE['shop_pageResults'];

    }

    ?>

    jQuery(‘select.sortby>option[value=""]‘).attr(‘selected’, true);

    <?php

    }

    // now we set our cookie if we need to

    function dl_sort_by_page($count) {

    if (isset($_COOKIE['shop_pageResults'])) { // if normal page load with cookie

    $count = $_COOKIE['shop_pageResults'];

    }

    if (isset($_POST['woocommerce-sort-by-columns'])) { //if form submitted

    setcookie('shop_pageResults', $_POST['woocommerce-sort-by-columns'], time()+1209600, '/', 'annadee.nl/', false); //this will fail if any part of page has been output- hope this works!

    $count = $_POST['woocommerce-sort-by-columns'];

    }

    // else normal page load and no cookie

    return $count;

    }

    add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_page_ordering', 20 );

    add_filter('loop_shop_per_page','dl_sort_by_page');

    Reply
    • Derek Schmidt

      Hey Annie, did you get your issue resolved? Maybe I can package this into a plugin soon — just been super busy lately which is why I am a bit late approving and replying to my comments ;-)

      Reply
      • Annie

        Hi Derek,

        Thx for your reaction, I did not get a notification so just found it by accident!

        No, it is not resolved, I use the code, see link above in test site please, but it does not work properly. As soon as I click on next it messes up the count.

        I know a lot of people would like this as a plugin, because in large shop, this is a must have.

        If you could develop a plugin, I am pretty sure lots of users would like to pay for this option if it is per license and affordable.

        It would mean a lot to me if you would concider developing this in the near future. Do you think you might want to take time to do this?

        Thx,
        Annie

        Reply

Leave a Reply

Please Note: We do our best to reply to all comments within a timely manner. However sometimes we can get pretty busy and this may delay our response a bit. If you need immediate assistance with a technical question, you may want to also try using Wordpress Forums or Stack Overflow.