If you have used the WooCommerce eCommerce plugin for WordPress, you have seen that the default Next and Previous Page links pagination page navigation is not very pretty. Today’s snack is a Tutorial that shows you how to add the WordPress plugin WP-PageNavi to a WooCommerce WordPress site in 3 easy steps to make your product archive page navigation easier to use and improve it’s look with numbered blocks instead of just next/previous links.
You can download this free WordPress Pagination plugin at: WordPress.org’s Plugin Repository – WP-PageNavi.
Step 1:
You should download and install WP-PageNavi into your WordPress plugins directory and then activate the plugin in your WordPress Dashboard.
Step 2:
Once it is installed, you can set up the options using the settings page for this plugin in your WordPress Dashboard.
Step 3:
After you have the settings set up, add this code below to your current theme’s Functions.php file to have WP-PageNavi’s pagination replace WooCommerce’s default page navigation:
/**
* Replace WooCommerce Default Pagination with WP-PageNavi Pagination
*
* @author WPSnacks.com
* @link https://www.wpsnacks.com
*/
remove_action('woocommerce_pagination', 'woocommerce_pagination', 10);
function woocommerce_pagination() {
wp_pagenavi();
}
add_action( 'woocommerce_pagination', 'woocommerce_pagination', 10);
That’s it, now you have a much better looking and easier to use Pagination Page Navigation on your WooCommerce Product Archive Pages.
I’ve tried deploying this, the links show correctly, but the content doesn’t change when you paginate your way through.
Any ideas?
@mattrhysdavies Sorry, but I’m not sure why it wouldn’t be working. I just checked to make sure it works with the most recent update of the plugins and it is working correctly. You are using this with both the WooCommerce and WP-PageNavi plugins? Also, how do you have your permalinks set up?
@WPSnacks Thanks for getting back to me. It turns out I was just making a hideous oversight and had another loop further up the page. I really appreciate the information provided and the reply.
Thanks,
Matt
@mattrhysdavies No problem, I’m glad you figured out the problem and got it working. Thanks for your feedback and kind words!
@WPSnacks
How i can start configure in both woocommerce and pagenavi?
Please help me 🙁
Sorry, but I’m not sure why it wouldn’t be working. I just checked to make sure it works with the most recent update of the plugins and it is working correctly. You are using this with both the WooCommerce and WP-PageNavi plugins? Also, how do you have your permalinks set up?
Thanks for the great post! Was very useful! How would I change the location? I want it at the top of the page instead of the bottom…
Thanks, this was real easy and it works like a charm.
Appreciated. Thanks.
Thanks, work like a charm
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);
I had to add some CSS to get rid of the Woo and allow only WP PageNavi to display:
.woo-pagination {display: none; }
I’ve followed the steps above but nothing happened. Still no pagination in my recent products. Pls help me. thanks.
I’ve followed the steps above but nothing happened. Still no pagination in my category products. Pls help me. thank you.
Thanks – works perfectly!
Works great, thank you!