I recently had a project that needed a way to display all products in a given category without them being broken up by pages, what is typically called “pagination”. They still wanted pagination by default, but wanted a way to view all products as well. Many websites do this by simply putting a “View All” link next to all the other page number links. I wanted to accomplish that same thing.
The project is using WooCommerce for it’s large catalog of products and I didn’t see a setting or other non-programmatic way to turn off pagination, especially as an optional link for the website viewer. So I rolled up my sleeves and did it via code. Here’s an overview of the steps to accomplish the task:
- Copy WooCommerce pagination template file to current theme
- Modify pagination template file to include a View All option
- Return all products when View All option is clicked
- Optional: Add link to return to pagination when viewing all products.
Let’s take a deeper look at each step.
1. Copy WooCommerce pagination template file to current theme
WooCommerce allows you to overwrite their template files by copying them to your current theme’s folder in a subfolder called “woocommerce”. Let’s see that in action for our task at hand. What we want to do is copy the file:
“/wp-content/plugins/woocommerce/templates/loop/pagination.php”
to
“/wp-content/themes/[theme]/woocommerce/loop/pagination.php”
Copying the template files from the WooCommerce plugin directory to your current theme allows you to make modifications to the files and still safely update WooCommerce without losing those changes.
2. Modify pagination template file to include a View All option
Now we want to add a “View All” link to our list of pages for product listings. We want the link to appear in line with the rest of the pages, so we need to add the link within the “<nav>” tags that WooCommerce gives us. This is the HTML I added for the View All link:
<?php if (is_paged()) : ?> <div style="float: right"><a href="../../?view=all">View All</a></div> <?php else: ?> <div style="float: right"><a href="?view=all">View All</a></div> <?php endif; ?>
So, to put that in better context, here is the full chunk of code within the <nav> tags after modification:
<nav class="woocommerce-pagination"> <?php echo paginate_links( apply_filters( 'woocommerce_pagination_args', array( 'base' => str_replace( 999999999, '%#%', get_pagenum_link( 999999999 ) ), 'format' => '', 'current' => max( 1, get_query_var('paged') ), 'total' => $wp_query->max_num_pages, 'prev_text => '←', 'next_text => '→', 'type' => 'list', 'end_size => 3, 'mid_size => 3 ) ) ); ?> <?php if (is_paged()) : ?> <div style="float: right"><a href="../../?view=all">View All</a></div> <?php else: ?> <div style="float: right"><a href="?view=all">View All</a></div> <?php endif; ?> </nav>
3. Return all products when View All option is clicked
Now that we have a View All link on our product listing, we need all the products to show up when that gets clicked.
We accomplish that by adding some code to either our theme’s function.php file or putting the code into our own dedicated custom plugin. Normally I would suggest the latter because you typically don’t want your functionality to go away if you change themes or if you want to easily use it on another project. However, since this modification requires making changes within our existing theme, we can’t easily isolate all the needed changes to a dedicated plugin. So, in your theme’s function.php file we add the following code:
//NUMBER OF PRODUCTS TO DISPLAY ON SHOP PAGE add_filter('loop_shop_per_page', 'wg_view_all_products'); function wg_view_all_products(){ if($_GET['view'] === 'all'){ return '9999'; } }
This actually just tells the pagination function of WooCommerce to display 9999 products per page. So if you have more than 9999 products, then you could add another digit or two to that number to make sure you get them all on one page, although that might be quite a long page load for that many products.
That’s it! You will now have a View All link in your pagination that reloads the page with all products visible.
4. Optional: Add link to return to pagination when viewing all products.
Once a visitor has clicked “View All”, they can use the browser back button to revert back to seeing products separated by pages. However, it might be helpful to have a link to go back to seeing less products for those that have reached the full list of products directly, via a link or bookmark, for example. To do that, we need to add some code to our pagination.php file we already have open. Right above our navigation HTML in step 2 there is an if statement that needs the following code immediately before it:
if( $_GET['view'] === 'all' ) { ?> <div style="float: right"><a href=".">View Less</a></div> <?php }
To put that into larger perspective with some of the surrounding code up to the <nav> tags section that we just modified in step 2, it now looks like this:
global $wp_query; if( $_GET['view'] === 'all' ) { ?> <div id="wg-view-all"><a href=".">View Less</a></div> <?php } if ( $wp_query->max_num_pages <= 1 ) return; ?> <nav class="woocommerce-pagination">
We now have a “View Less” link when viewing all products that takes us back to page 1.
HI,
This is a bit of a dumb question but how do I turn on the pagination in the first place?
If i have 20 products but the shortcodes will only display the specified number of products (say 10) on the page. How do insert the pagination in the first place before amending it with your code?
Thanks
Hmm…I haven’t used the shortcode options for displaying products. So I’m not familiar with them. The pagination happens automatically when you go to a product category page that lists all the products in a particular category (aka an “archive” page in WordPress).
Hi,
I just tried out your solution and it works. Thank you thank you thank you.
The thing is it only works with the shop page which is the entire list of all products in your shop.
Could you please expand on it and include how to “VIEW ALL PER CATEGORY”. I’ve got categories and would like the viewer to view all within the category they’re in.
Also how can one include the link/function “View Less” at the point when the viewer uses the “View All” and wants to return to the normal default view?
I eagerly await your response.
Thanks in advance.
I also just noticed on the shop page, if I go to say page 3 and click on view all, it doesn’t work. It only works for the 1st page….. Help!!!!
Thanks.
Have you find way to make it work on page 3 ? ore more then 3 ?
Yes! I’ll be posting an update on this blog post soon to fix that issue.
Actually I spoke to soon…. it DOES work per category it’s just that it doesn’t work when one tries to “View All” on any other page than the 1st page.
Could you please offer a solution. Much appreciated.
Apologies for the mix up.
I look forward to your response.
Thanks!
Really appreciate this quick and nice help. It just took me 5 minutes to add this button with my own CSS.
Thanks again!
Hi I am getting some problem with this ‘View All’ link in my website. Its working fine everywhere but in shop page when I clicked on next page in pagination and than click on it its not working.
Please help if possible.
Thanks!
I had the same issue with View All but got it to work using is_paged. Here is the code I used…you may have to adjust the css to your needs.
I posted this once but it did not accept my code, so here it is in Pastebin.
http://pastebin.com/RfP7Z2W8
Hope it helps.
Thanks for this addition, Steve. I’ve updated the post to include this fix.
Hi jsaxey, i have used your ‘view all’ feature in my site. But when i clicked the link its been loading for endless without showing the records. For this i have used my theme function page for add_filter. Can you please tell me what’s going wrong?
Hi jsaxey, i forgot to post the url.. here it is.http://heystlers.com/?post_type=product. Please have a look.
Your website is using AJAX to do pagination. The steps I outlined won’t work in that scenario and would require a different method to return all the results. What I posted here requires the site does a full page refresh when clicking the View All link. Sorry about that.
Hi Guys, I’ve just had to do this for one of our sites and had to make some amends. I’ve listed the changes on our blog here: http://raison.co/woocommerce-pagination-view-all/
I’ve credited this article as there is a lot of cross over.
Thanks and feel free to feedback in the comments.
Elliot
Hi Elliot, does this work for ajax pagination?
Hi Elliot;
I found your post after having to fix the issue on a website that I was working on with the view all code you initially wrote. But the site I was working on had it in two spots.
I fixed the pagination.php and then had to track back what they were doing in the functions page using an echo to write the /?view=all.
I came up with a better work around for this solution using your code and adding the View All to the top of the page in the orderby.php
Here is what you need to add to get it to work.
At the top of the page:
global $woocommerce, $wp_query;
//Added for View All Pages
if( $_GET[‘view’] === ‘all’ ) { ?>
View Less
found_posts || ! woocommerce_products_will_display() )
return;
and at the bottom of the page right after the form:
max_num_pages
View All
View All
Thought you might like to add this to your post if you want to.
Thanks for the help.
In your post you set the number of products to 9999, although there are probably not many shops with more that that many products, the filter also takes ‘-1’ for all the products.
@jsaxey I’ve created a plugin for a ‘products per page’ dropdown, I would like to get your view on it!
http://wordpress.org/plugins/woocommerce-products-per-page/
@sormano Nice plugin! I was thinking of turning this into a plugin, as well. Does your plugin copy the woocommerce files to the theme to accomplish the task like my tutorial? Or did you find a way to interact with WooCommerce that doesn’t require modifying their template files?
Hi jr00ck, No the plugin does not need to copy the theme files. The plugin hooks into standard WooCommerce hooks for best integration.
I think you can use the action hook “woocommerce_after_shop_loop” for you tutorial to put the View all link on the same spot, without copying the theme template.
Its a bit hard to place all the code here, but if you need any help, let me know!
Greets Jeroen
@sormano good idea on the woocommerce_after_shop_loop hook. I’ll have to look at that. I was trying to find a hook that would work originally and couldn’t find a suitable one. As a matter of fact, the -1 to show all didn’t work either for some reason (maybe it was an older version that didn’t allow that originally?). I’ll have to revisit when I get some time. Thanks for your contributions.
Glad I could help 🙂
I use the -1 in my plugin now, and that works, like to hear your results…
Hi, jr00ck
Thanks for the tutorial. I looked at line by line.. very carefully but I couldn’t get it work.- Trying to integrate it with WC ver. 2.2.8. Dose it suppose to work with the version? Or reason why the issue would be … Maybe I’ve set product per page for shop page via a hook already? I would like to place “View All” link next to the pagination? Any suggestion would be appreciated!
mica, I recommend using Sormano’s plugin:
https://wordpress.org/plugins/woocommerce-products-per-page/