WooCommerce 教程：添加下一个/上一个在单个产品页面

一个非常好的客户🙂有一个非常好的挑战，有一天，所以我想到 “捐赠” 这个有价值的片段给大家！

在互联网高低调查之后，并没有发现任何简单的工作（特别是 StackOverflow 上的这个片段，Github 上的 Gist），我决定 DIY！

这是我想出来的 – 享受！

PHP Snippet（第 1 部分，共 3 部分）：显示下一个/上一个产品按钮（来自同一个类别）@单个产品页面

/**
 * @snippet       Add next/prev buttons @ WooCommerce Single Product Page

 * @sourcecode    https://businessbloomer.com/?p=20567
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 2.5.5
 */

add_action( 'woocommerce_before_single_product', 'bbloomer_prev_next_product' );

// and if you also want them at the bottom...
add_action( 'woocommerce_after_single_product', 'bbloomer_prev_next_product' );

function bbloomer_prev_next_product(){

echo '<div class="prev_next_buttons">';

	// 'product_cat' will make sure to return next/prev from current category
        $previous = next_post_link('%link', '&larr; PREVIOUS', TRUE, ' ', 'product_cat');
	$next = previous_post_link('%link', 'NEXT &rarr;', TRUE, ' ', 'product_cat');

	echo $previous;
	echo $next;
	
echo '</div>';
        
}

CSS（第 2 部分，共 3 部分）：Style Next / Previous Buttons @ Single Product Page

只因为我很好，我决定给您一些很酷的造型。特别是，我们确保按钮向左浮动，一个向右浮动，整个新行显示为块。

/* CSS */

.prev_next_buttons {
line-height: 40px;
margin-bottom: 20px;
}

.prev_next_buttons a[rel="prev"], .prev_next_buttons a[rel="next"] {
display: block;
}

.prev_next_buttons a[rel="prev"] {
float: right;
}

.prev_next_buttons a[rel="next"] {
float: left;
}

.prev_next_buttons::after {
content: '';
display: block;
clear:both;
}