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

If you want to display previous & next button from current product category in single product than, add below line of code at the end of your theme’s functions.php file of your active child theme (or theme) and Save the file.

add_action( 'woocommerce_before_single_product', 'Woocommerce_prev_next_btn_product' );
 
// if you also want them at the bottom
add_action( 'woocommerce_after_single_product', 'Woocommerce_prev_next_btn_product' );
 
function Woocommerce_prev_next_btn_product(){
 
echo '
'; // 'product_cat' will make sure to return next/prev from current category $previous = next_post_link('%link', '← PREVIOUS', TRUE, ' ', 'product_cat'); $next = previous_post_link('%link', 'NEXT →', TRUE, ' ', 'product_cat'); echo $previous; echo $next; echo '
'; }

You can also add below css code in your theme’s style.php file of your active child theme (or theme) and Save the file for animated this button.

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

Leave a Comment

Scroll to Top