How to add custom pagination page navigation to WooCommerce


Those who have used the WooCommerce eCommerce plugin for WordPress have probably noticed that the default Next and Previous Page links pagination page navigation is not very attractive. 

Today’s snack is a tutorial that explains how to add the WP-PageNavi plugin to your WooCommerce WordPress site in 3 easy steps to add numbered blocks and improve the look of the product archive page navigation.

Plugins – WP-PageNavi available at the Plugin Repository.’s Plugin Repository – WP-PageNavi.

Step 1:
In your WordPress Dashboard, you should activate WP-PageNavi once it has been installed in your WordPress plugins directory.

Step 2:
The options for this WordPress plugin can be set up once it has been installed on your WordPress dashboard.

Step 3:
If you have already set up the settings, add the following code to your theme’s Functions.php file to replace WooCommerce’s default navigation with WP-PageNavi:

* Replace WooCommerce Default Pagination with WP-PageNavi Pagination
* @author
* @link
remove_action('woocommerce_pagination', 'woocommerce_pagination', 10);
function woocommerce_pagination() {
add_action( 'woocommerce_pagination', 'woocommerce_pagination', 10);

With that, your WooCommerce Product Archive Pages will feature a much improved and more easy to use pagination system.


Post a Comment (0)
Previous Post Next Post