WooCommerce customization – How to display Prev/Next item

Home » Old posts » WooCommerce customization – How to display Prev/Next item

WooCommerce customization – How to add prev/next item

woocommerce_customization-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.

// 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(
            'taxonomy' => 'product_cat',
            'field' => 'id',
            'terms' => $categories_as_array
    $r_single = new WP_Query($query_args);
    if ($r_single->have_posts()) {
        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>

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 row_column_index="0_1" 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(
            '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()) {
                $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();


            if ($prev_product_id != -1) { ShowLinkToProduct($prev_product_id, $cats_array, "next: "); }
            if ($next_product_id != -1) { ShowLinkToProduct($next_product_id, $cats_array, "prev: "); }


WooCommerce customization – How to add prev/next item



Nikola fivera Petrovic
Get in Touch

Nikola fivera Petrovic

Hi there. My name is Nikola,
I speak English, Greek and Serbian.
As a Web Producer i can deal with almost anything web design & development related.

Web Design Skills

I have been into web design for the last 10+ years.
After working for various agencies and companies I have decided to take a lone wolf path as a Freelancer but I still actively collaborate with agencies across the globe.
I enjoy building websites on WordPress platform but i can work on any other platforms as well.

SEO Skills

I have spent a last couple of years as an SEO executive and SEO consultant working on 4 continents.
Specialized in on-page SEO I wear a pointy Google-Wizard White-Hat and help various small and medium-sized businesses rank well in the search engines.
I enjoy working with Google and Yahoo SE.
Feel free to request a free meeting bellow.
As a freelancer, I charge only a small portion of the money you would pay to agencies to get your project done.
Nikola fivera Petrovic
Get in Touch

Leave a Reply

2 Comments on "WooCommerce customization – How to display Prev/Next item"

Notify of
Sort by:   newest | oldest | most voted

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 🙂

Kelsey Todd

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!