Add WooCommerce “View All” Pagination Option To Product Listings

woocommerce-view-all

Update 1/13/14: Thanks to Steve for providing code to fix the View All link not working when on page 2 or greater. Also thanks to Carlos for testing the fix and providing additional code for reverting back to pagination after clicking View All. This post has been updated to reflect these latest changes.

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:

  1. Copy WooCommerce pagination template file to current theme
  2. Modify pagination template file to include a View All option
  3. Return all products when View All option is clicked
  4. 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	=> '&larr;',
      'next_text	=> '&rarr;',
      '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.

 

,

26 Responses to “Add WooCommerce “View All” Pagination Option To Product Listings”

  1. soup November 15, 2013 at 9:49 am #

    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

    • jsaxey November 15, 2013 at 6:38 pm #

      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).

  2. Ise November 28, 2013 at 8:45 pm #

    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.

  3. Ise November 28, 2013 at 8:55 pm #

    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.

    • Andrei January 13, 2014 at 2:55 pm #

      Have you find way to make it work on page 3 ? ore more then 3 ?

      • jsaxey January 13, 2014 at 2:59 pm #

        Yes! I’ll be posting an update on this blog post soon to fix that issue.

  4. Ise November 28, 2013 at 9:20 pm #

    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.

  5. Anil December 7, 2013 at 12:49 am #

    Thanks!

    Really appreciate this quick and nice help. It just took me 5 minutes to add this button with my own CSS.

    Thanks again!

  6. Anil December 11, 2013 at 10:35 pm #

    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!

  7. Steve December 23, 2013 at 5:17 pm #

    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.

    • jsaxey January 13, 2014 at 5:22 pm #

      Thanks for this addition, Steve. I’ve updated the post to include this fix.

  8. kapur January 31, 2014 at 2:08 am #

    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?

  9. kapur January 31, 2014 at 7:57 am #

    Hi jsaxey, i forgot to post the url.. here it is.http://heystlers.com/?post_type=product. Please have a look.

    • jsaxey February 4, 2014 at 11:49 am #

      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.

  10. Elliot February 22, 2014 at 2:00 pm #

    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

    • kapur February 22, 2014 at 8:28 pm #

      Hi Elliot, does this work for ajax pagination?

  11. Tom March 4, 2014 at 4:05 pm #

    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.

  12. sormano March 6, 2014 at 8:25 pm #

    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/

    • jr00ck March 7, 2014 at 5:25 pm #

      @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?

      • Sormano March 7, 2014 at 9:34 pm #

        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

        • jr00ck March 7, 2014 at 10:43 pm #

          @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.

          • Sormano March 7, 2014 at 10:50 pm #

            Glad I could help 🙂

            I use the -1 in my plugin now, and that works, like to hear your results…

  13. mica December 19, 2014 at 10:39 am #

    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!

Trackbacks/Pingbacks

  1. Добавляем «View All» в навигацию woocommerce в список продуктов | Блог программиста - September 22, 2014

    […] Краткое описание на вот эту статью http://blog.webguysaz.com/2013/10/31/add-woocommerce-view-all-pagination-option-to-product-listings/. […]

  2. View All in WooCommerce Pagination - Raison - February 7, 2016

    […] is an expansion on some work already done by the Web Guys. I’ll only go over some elements briefly because they have a much more detailed explanation […]

Leave a Reply