Add Next & Previous Product Navigation Links To WooCommerce Single Products

This code enables you to link all single products together in any theme.

No need to edit any Woocommerce files using this solution.

Simply paste the code into your chold themes functions file and previous/next links will appear.

Here’s one example ( Unstyled )

Here’s a few examples of what you can do with the code:

You can change the text from Previous/Next to anything else like Previous Product/Next Product.
You can also change the position the links display to before or after your product content or anywhere your theme includes a hook. See this hook map for examples in Genesis themes.
You can also style both links the same or differently using the classes included in the PHP code.
Link all products within the same category or all products from all categories.
Exclude categories from being included in both the previous and next posts.
Include the product page title and/or custom text in both the previous and next both links.

Using FTP and a code editor, copy and paste the following code to the end of your child themes functions.php file:

add_action( 'woocommerce_after_single_product_summary', 'single_post_links', 15 );
function single_post_links() {

	if ( ! is_product() )
		return;

	genesis_markup( array(
		'html5'   => '<div %s>',
		'xhtml'   => '<div class="navigation">',
		'context' => 'adjacent-entry-pagination',
	) );

	echo '<div class="product-pagination-previous alignleft">';
	previous_post_link();
	echo '</div>';

	echo '<div class="product-pagination-next alignright">';
	next_post_link();
	echo '</div>';

	echo '</div>';

}

Usage

You can also use any of the WooCommerce hooks to reposition your links.

Here’s the 5 parameters you can use also within the next_post_link and previous_post_link functions like this:


add_action( 'woocommerce_single_product_summary', 'single_post_links', 15 );
function single_post_links() {

	if ( ! is_product() )
		return;

	genesis_markup( array(
		'html5'   => '<div %s>',
		'xhtml'   => '<div class="navigation">',
		'context' => 'adjacent-entry-pagination',
	) );

	echo '<div class="product-pagination-previous alignleft">';
	previous_post_link( '%link', 'Previous in category', TRUE );
	echo '</div>';

	echo '<div class="product-pagination-next alignright">';
	next_post_link( '%link', 'Next post in category', TRUE );
	echo '</div>';

	echo '</div>';

}