How to add custom pagination page navigation to WooCommerce

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 http://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.