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
function woocommerce_catalog_page_ordering() {
?>
<form action="" method="POST" name="results">
<select name="woocommerce-sort-by-columns" id="woocommerce-sort-by-columns" class="sortby" onchange="this.form.submit()">
<?php
// 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(
'' => __('Results per page', 'woocommerce'),
'24' => __('24 per page', 'woocommerce'),
'36' => __('36 per page', 'woocommerce'),
'48' => __('48 per page', 'woocommerce'),
'64' => __('64 per page', 'woocommerce'),
));
foreach ( $shopCatalog_orderby as $sort_id => $sort_name )
echo '<option value="' . $sort_id . '" ' . selected( $_SESSION['sortby'], $sort_id, false ) . ' >' . $sort_name . '</option>';
?>
</select>
</form>
<?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, '/', 'your-web-address.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.
James
Great piece of code. this was very helpful. Thanks.
Is there a way for the drop down to display the current selection amount. meaning if i changed it to display 36 per page and it reloads the page to display that amount, can the drop down now show 36 as the “current” selection instead of showing the first/base number?
Thanks
Derek Schmidt
Hey James, Yes there is definitely a way, it would be very similar to the way Woocommerce does it in their ‘sort-by’ select. I thought I had already implemented that in there but if you want to double check, look in your woocommerce files -> templates and in one of those folders is the sorting.php file. Going off memory here but if you open that up you will see how Woo did it with their drop-down. I know the code above is setup for that but there must be a small error in there somewhere or within setting the cookie and that is why their choice is not present in the dropdown when the screen reloads. As soon as I get some free time I will put Woo back on local host and get that worked out but I do not have any active installs with Woocommerce still on them. I will trouble shoot and let you know and likewise if you get this resolved before me. Many thanks!
Marcel
Hi Thanks for this code. I am also curious of the solution to show the current selected number. In my case it does not store the cookie value som somehow it resets to the default 10 all the time with page switches. Do you have a hin were to find this issue?
Derek Schmidt
Other users have reported this issue and it has typically been a theme or plugin conflict. Try switching to the default twenty twelve and see if that fixex it, if not then try deactivating all plugins and enable one at a time until you find the problem. If you find the conflicting theme/plugin then post here so we can work on resolving it.
Marcel
Have done some debugging and found that the cookie simply did not store… then I saw the ‘your-web-address.com’, replaced it with mine….
and it worked like a charm… Now the only wish is to get the default value in… I’ll check if I can find a solution for that.
Marcel
Found the issue… don’t know if it is the best solution but it works for me.. Have added checks for my new display_count vars and used this one to match the selected value. Defaulted to 24 and took out the blank one. Works perfect for me. Hope it helps you. Had to add the post check because the session var was one lap behind the real value.
Thanks for your effort and sharing…!
// Lets create the function to house our form
function woocommerce_catalog_page_ordering() {
?>
__(’24 per pagina’, ‘woocommerce’),
’48′ => __(’48 per pagina’, ‘woocommerce’),
‘-1′ => __(‘Alles tonen’, ‘woocommerce’),
));
foreach ( $shopCatalog_orderby as $sort_id => $sort_name )
echo ” . $sort_name . ”;
?>
<?php
….. rest of code is still the same
Derek Schmidt
Glad you got it working, thanks for sharing the solution
luke
Thanks for this it is great, except it is messing up my pagination. When I select next page, or page 2 etc.. I get a 404 error…
Any ideas what is happening there?
Luke
Derek Schmidt
Hey Luke, did you replace the “your-web-address.com” with your own?
Zach
Hey guy’s this code works great. I have the same issues as everyone else when it resets back to 10 items i would like the default to be 12. Would be great to see this working 100% the smallest things seem to be the biggest headaches in wordpress lol. Other then that the plugin/hack is pretty nice and does do the job. I did change the web addy and tried to add the folder url also. But that did nothing still does not work. All I really need is for it to show 12 items and not 10.
Derek Schmidt
Hey Zach, try adding this to your themes functions.php file:
// change default number of products per page
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 12;' ), 20 );
Zach
I did that but the dropdown stops working. It will show 12 items but it will not let me change to 20 or 30 if i wanted.
Derek Schmidt
Could you paste your functions.php to a pastebin and I can check it out? Either that or post both snippets of here
Zach
Here it is the default Twenty Eleven theme i used.
http://pastebin.com/nJmszpS5
Zach
yes the plugin works cookies work find. but if you clear your cookies or start on a new browser default still shows 10. i was wondering how i can get that to show 12 and still have it so the dropdown works.
Derek Schmidt
Oh i see, so you need to place the add_filter within the function like so:
dont forget to change your domain name back
Zach
You can delete my previous comment above this. I figured out how to allways display 12 items in your store. The default is set to 10 so what you should do is go into your admin dashboard. Locate settings,reading and change posts and items to 12 or whatever default number you may want. This has saved me and this plugin works great! No need to add the default woocommerce one this one works like a charm and without that annoying code they provided us lol.
Derek Schmidt
Wow, lol I have been pecking away at it this morning trying to over complicate things and sometimes it is the most simplest solution that ends up working out. Thanks for sharing Zach, take care!
Zach
Same Derek i over think on coding and bam its all ways the simplest thing all ready coded for you. But those cookies you figured out work like a charm for when people select certain numbers. Thats one bad thing with me in coding i think it has to be hard then turns out it’s a 1,2 punch type of deal lol.