View All in WooCommerce Pagination

Our aim here is to change the pagination to include an option to view all the products on a catalogue page. To do this we need to amend the WooCommerce Pagination template file and make some amends to our functions.php file.

This 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 on their site.

The main changes I have added:

• Works on WooCommerce 2.1
• Uses classes to work with WooCommerce Styling
• Works on Woo Canvas Framework

Canvas Specifics

If you are using Woo Canvas then first we will need to disable the Canvas pagination and use Woo Commerce pagination. Then we can modify the pagination file.

This can be done with the following code:

/**
* Replace WooCanvas Default Pagination with WooCommerce Pagination
**/
 
add_action('init','alter_woo_hooks');
 
function alter_woo_hooks() {
remove_action( 'woocommerce_after_main_content', 'canvas_commerce_pagination', 01, 0 ); 
}
add_action( 'woocommerce_pagination', 'woocommerce_pagination', 1 ); //
add_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 1 ); 

Amending the Woo Pagination file

WooCommerce is built so developers can amend core files in their child themes. In this instance we need to amend loops/pagination.php so copy this over to your child theme.

We want to add a button to show all products. To do this we will append a ?view=all to the end of catalog page by using a link. We can then add a function in our functions.php which will change the number of products on a page to 999 (i.e. a lot!).

  
View Less
max_num_pages <= 1 ) return; ?>

Functions File

Now we need to add the function that will search for the view=all and change the number of products to display. We can do this with the following code:

// View All - Change No. Products to display

add_filter('loop_shop_per_page', 'wg_view_all_products', 20);

function wg_view_all_products($cols){
    if($_GET['view'] === 'all'){
        return '999';
    }
    
    else {
        return '9';
    }
}