Add Next/Previous on Single Product Page

If You want to Display Next and Previous Product Buttons (For the same Category) on Single Product Page, Add the following Code Snippet to your Functions.php.

add_action( 'woocommerce_before_single_product', 'codeithub_prev_next_product' );
 

add_action( 'woocommerce_after_single_product', 'codeithub_prev_next_product' );
 
function codeithub_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>';
         
}

Here is the CSS Snippet:

.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;
}
Next and previous Buttons

2 Comments

  1. hello
    the first thanks for your code. good job.
    but it has a little problem.
    unfortunately, one of the buttons works on my single product page.
    shows the prev button or next button.
    can you help me with both of them showing on my single product page?
    I appreciate your time and your attendance.

Leave a Reply

Your email address will not be published. Required fields are marked *