5th Year Anniversary Super Sale! Save Upto 50% OFF*

How to add Previous & Next button in Single page in woocommerce?

By blog

Here, We can add Next and Previous Button into Single Product Page of Woocommerce with using this code.

Put this code into functions.php.,


add_action( 'woocommerce_before_single_product', 'new_prev_next_product' );
 
// and if you also want them at the bottom...
add_action( 'woocommerce_after_single_product', 'new_prev_next_product' );
 
function new_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>';
   

and this code too at the bottom of style.css to align the Previous and Next Button on the top of the page.


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

Tagged under:

Show Buttons
Hide Buttons