WooCommerce customization – How to add prev/next item
Here is one cool feature that has been left out in Woocommerce.
WooCommerce Customization – Show nextprev products from current product category (when viewing a single product)
Add this code where you want it to display next/previous product. Usually in the content-single-product.php
It will add the picture, title and price of the product.
WooCommerce customization
Thanks to Georgy Bunin. <?php // get next and prev products // Author: Georgy Bunin (bunin.co.il@gmail.com) function ShowLinkToProduct($post_id, $categories_as_array, $label) { // get post according post id $query_args = array( 'post__in' => array($post_id), 'posts_per_page' => 1, 'post_status' => 'publish', 'post_type' => 'product', 'tax_query' => array( array( 'taxonomy' => 'product_cat', 'field' => 'id', 'terms' => $categories_as_array ))); $r_single = new WP_Query($query_args); if ($r_single->have_posts()) { $r_single->the_post(); global $product; ?> <ul class="product_list_widget"> <li><a href="<?php the_permalink() ?>" title="<?php echo esc_attr(get_the_title() ? get_the_title() : get_the_ID()); ?>"> <?php if (has_post_thumbnail()) the_post_thumbnail('shop_thumbnail'); else echo '<img src="'. woocommerce_placeholder_img_src() .'" alt="Placeholder" width="'.$woocommerce->get_image_size('shop_thumbnail_image_width').'" height="'.$woocommerce->get_image_size('shop_thumbnail_image_height').'" />'; ?> <?php echo $label; ?> <?php if ( get_the_title() ) the_title(); else the_ID(); ?> </a> <?php echo $product->get_price_html(); ?></li> </ul> <?php wp_reset_query(); } } if ( is_singular('product') ) { global $post; // get categories $terms = wp_get_post_terms( $post->ID, 'product_cat' ); foreach ( $terms as $term ) $cats_array[fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][] = $term->term_id; // get all posts in current categories $query_args = array('posts_per_page' => -1, 'post_status' => 'publish', 'post_type' => 'product', 'tax_query' => array( array( 'taxonomy' => 'product_cat', 'field' => 'id', 'terms' => $cats_array ))); $r = new WP_Query($query_args); // show next and prev only if we have 3 or more if ($r->post_count > 2) { $prev_product_id = -1; $next_product_id = -1; $found_product = false; $i = 0; $current_product_index = $i; $current_product_id = get_the_ID(); if ($r->have_posts()) { while ($r->have_posts()) { $r->the_post(); $current_id = get_the_ID(); if ($current_id == $current_product_id) { $found_product = true; $current_product_index = $i; } $is_first = ($current_product_index == $first_product_index); if ($is_first) { $prev_product_id = get_the_ID(); // if product is first then 'prev' = last product } else { if (!$found_product && $current_id != $current_product_id) { $prev_product_id = get_the_ID(); } } if ($i == 0) { // if product is last then 'next' = first product $next_product_id = get_the_ID(); } if ($found_product && $i == $current_product_index + 1) { $next_product_id = get_the_ID(); } $i++; } if ($prev_product_id != -1) { ShowLinkToProduct($prev_product_id, $cats_array, "next: "); } if ($next_product_id != -1) { ShowLinkToProduct($next_product_id, $cats_array, "prev: "); } } wp_reset_query(); } } ?>
Thanks for posting this, it works great!
You probably won’t answer this (judging from the previous comments), but how would you wrap the code to use it in functions.php?
Thanks so much in advance for your time 🙂
Hi Nikola,
I’ve tried installing the code for the next/previous woocommerce buttons in the single-product.php file and I can’t get it to work. Funny enough, I got this to work in a dummy version of the site I built months ago. But I can’t seem to replicate it now. Where exactly do I place the code?
Thanks so much for writing it!
-Kelsey