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;  }