Scroll To Top
 





You are here: Home / How to / How to add custom pagination to your Woocommerce
      

	
 
		

			
How to add custom pagination to your Woocommerce

	
 		

				

			

				

								
			How to, Woocommerce		
		
		
			
			13 Apr 2012	   
		
	
				

							

				

			16 Comments
		

		

	 
			

		

						
				

		
								
						
			
When I was developing a Woocommerce shop for one of my clients I got stuck with the rather simple standard pagination option which Woocommerce offers right out of the box. I am not sure if you can even call a simple previous and next link a pagination option. I knew there had to be an alternative, user friendlier way of implementing the pagination option into this shop.


I remembered a handy plugin called WP-PageNavi which actually does offer the result I was looking for and so I started to hook this solution into the Woocommerce shop.


wpsnacks.com has provided an awesome solution for this combination. You can find the original post here:

http://wpsnacks.com/wordpress-tutorials/how-to-add-custom-pagination-page-navigation-to-woocommerce/


A small summary of how to get this done:


How to add custom pagination to your Woocommerce in 2 easy steps:


1. If you have not done so yet install and configure the WP-PageNavi plugin.


2. With the WP-Pagenavi plugin installed we can hook it’s functionality into the Woocommerce templates. You can simply do this by copying the following code into your themes functions.php file.




		




That’s it your set! Now you just have to style your new, already good looking pagination, into the styles of the shop and you’re done.

			
		

	
How toWoocommerce
                    
                    					
			



 




  	






	
16 Comments 

	
	
    
		  
  
  1. 
    
    
    
    
      
    Tyguy
     22 May 2012 at 23:19
    
      
    
        
    This doesn’t seem to work.  The remove_action function doesn’t do anything.
    
      
    
	        
    
    Reply    
    
	    
    
    
    
  
      2. 
  
  
    • 
    
      
    
      
      
      Mark
       24 May 2012 at 09:35
      
      
      
        
      Hi,
      

      Which versions do you use? For me this works perfectly fine.
      

      - Mark
      
      
      
	        
      
    Reply    
      
	    
      
    
      
  
      • 

    

  
  
  2. 
    
    
    
    
      
    Zjan Preijde
     4 June 2012 at 18:27
    
      
    
        
    This post is a copy of a wpsnacks.com article : http://wpsnacks.com/wordpress-tutorials/how-to-add-custom-pagination-page-navigation-to-woocommerce/
    
You could at least have mentioned them.
    
      
    
	        
    
    Reply    
    
	    
    
    
    
  
      3. 
  
  
    • 
    
      
    
      
      
      Mark
       4 June 2012 at 19:13
      
      
      
        
      Hi Zjan,
      

      Thanks for pointing this out to me! I actually got the code from a friended coder and assumed that he came up with it himself. I have double checked this with him and he actually got the code from the wpsnacks.com article. I have edited the original post to refer back to the wpsnacks.com post.
      

      Again thanks for mentioning this to me!
      

      - Mark
      
      
      
	        
      
    Reply    
      
	    
      
    
      
  
      • 

    

  
  
  3. 
    
    
    
    
      
    Ines
     14 October 2012 at 21:09
    
      
    
        
    Hi Mark,
    

    It didn’t work for me. The pagination show up, but when I click on another button of the pagination, it doesn’t change the products. It always shows the same products. Could you help me please?
    
      
    
	        
    
    Reply    
    
	    
    
    
    
  
    4. 
  
  
  4. 
    
    
    
    
      
    Mark
     16 October 2012 at 13:50
    
      
    
        
    Hi Ines,
    

    This is quite a “common” problem with the WP-Pagenavi when the wrong query parameters are passed to the query_posts() function. Are you using standard WooCommerce templates or are you using a own fabricated query_posts() loop?
    

    If you use something custom then please make sure you pass the paged query vraiable to the query_posts function. You can find a reference on how to do this at this url:
    

    http://wordpress.stackexchange.com/questions/32205/wp-pagenavi-not-working-on-custom-page-template
    

    - Mark
    
      
    
	        
    
    Reply    
    
	    
    
    
    
  
      5. 
  
  
    • 
    
      
    
      
      
      ryan
       10 November 2012 at 04:20
      
      
      
        
      where exactly do we paste the code in functions.php?  i pasted it in a couple places and it doesn’t do anything.
      
      
      
	        
      
    Reply    
      
	    
      
    
      
  
        • 
  
  
      • 
    
        
    
        
      
        Mark
         4 December 2012 at 14:52
        
      
        
        
        Hi Ryan,
        

        It should not matter where you paste in the code into the functions.php.
        

        What kind of problems are you experiencing? No functionality at all or partly some working functionality?
        

        - Mark
        
      
        
	        
        
    Reply    
        
	    
        
    
        
  
        • 

      


    

  
  
  5. 
    
    
    
    
      
    Pablo Pacheco Karzin
     18 April 2013 at 18:24
    
      
    
        
    I had to add these lines to remove the woocommerce pagination:
    

    remove_action(‘woocommerce_pagination’, ‘woocommerce_catalog_ordering’, 20);
    
remove_action(‘woocommerce_pagination’, ‘woocommerce_pagination’, 10);
    
remove_action(‘woocommerce_pagination’, ‘woocommerceframework_pagination’, 10);
    
remove_action(‘woocommerce_pagination’, ‘woocommerce_pagination_wrap_open’, 5);
    
remove_action(‘woocommerce_pagination’, ‘woocommerce_pagination_wrap_close’, 25);
    
      
    
	        
    
    Reply    
    
	    
    
    
    
  
      6. 
  
  
    • 
    
      
    
      
      
      Mark
       18 April 2013 at 19:20
      
      
      
        
      Hi Pablo,
      

      Thanks for sharing, Are you using the new version 2.x where you had to first remove the new standard pagination?
      
If so then I will add your lines of code to the article.
      

      Cheers,
      
Mark
      
      
      
	        
      
    Reply    
      
	    
      
    
      
  
      • 

    

  
  
  6. 
    
    
    
    
      
    Connie Cooper
     23 April 2013 at 01:32
    
      
    
        
    Hi Mark… I too am having a terrible time trying to get this to work.  First of all, there are quite a few pages called “functions.php”.  The “instructions” said to paste into “your theme’s function.php”.  Naturally, I have tried using the page I found first in the folder called “themes”.  I’m barely literate with this stuff, so could you or someone  perhaps explain a bit more?..Like am I in the right folder for starters…. Thanks
    
      
    
	        
    
    Reply    
    
	    
    
    
    
  
      7. 
  
  
    • 
    
      
    
      
      
      Mark
       23 April 2013 at 01:35
      
      
      
        
      Hi Connie,
      

      It’s actually not that hard at all.
      

      You should paste the code into your active theme’s functions.php file.
      

      If you need any more help just let me know.
      

      - Mark
      
      
      
	        
      
    Reply    
      
	    
      
    
      
  
        • 
  
  
      • 
    
        
    
        
      
        Connie Cooper
         23 April 2013 at 02:05
        
      
        
        
        LOL…well, I did that, and nothing.  No change.  Still getting the “prev” & “next”.  I’ve only customized the theme through it’s own controls…no hacks. Have tried several times to get this to take, and it won’t.  Now…it is “self hosted” … would that matter.  I was reading something about permissions…Um…that’s not something I’m familiar with.
        
There’s a spot in the functions.php page that whoever wrote the code, in comment within the code, said” feel free to add custimization here”, and then a little further down warned that code after THAT line would cause the sky to fall.  LOL.  I put it in between.  Should it go up top?  That code is all grey…like it’s templated or something.
        
<— confused.
        
      
        
	        
        
    Reply    
        
	    
        
    
        
  
          • 
  
  
        • 
    
          
    
          
      
          Connie Cooper
           23 April 2013 at 02:51
          
      
          
        
          oops… actually says older posts and newer posts.
          
      
          
	        
          
    Reply    
          
	    
          
    
          
  
          • 

        


      


    

  
  
  7. 
    
    
    
    
      
    Connie Cooper
     23 April 2013 at 03:02
    
      
    
        
    Ok.  Found something on woocommerce 2.0 back when it was in its last weeks of testing.  Apparently a) it wasn’t compatible with Canvas, which is my theme & b) there was a known bug about pagination display.  It seems to work fine with Canvas, as that’s what I’m using, but I’m guessing the whole pagination thing didn’t get straightened out?  I just don’t know what questions to ask!
    
      
    
	        
    
    Reply    
    
	    
    
    
    
  
    8. 
	







	
Leave A Response


	


	
	


		
		

		
			
			

			
			
		
			
			
			
		

		
		

			
			
			
		
		

		
		

		
			

			

			
			
		


		
	


		
















	

			






	


	

		Copyright 2012 - Mark van der Putten	




	

		↑ Scroll to top