WooCommerce: Add Next/Previous @ Single Product Page

A very nice client πŸ™‚ had a very nice challenge the other day, so I thought of “donating” this valuable snippet to all of you!

After researching the internet high and low and not finding anything simple that also worked (in particular this snippet on StackOverflow and this Gist on Github), I decided to DIY!

Here’s what I came up with – enjoy!

WooCommerce: Add Next/Previous Links to Single Product Page
WooCommerce: Add Next/Previous Links to Single Product Page

PHP Snippet (Part 1 of 3): Display Next/Previous Product Buttons (from the same Category) @ Single Product Page


/**
 * @snippet       Add next/prev buttons @ WooCommerce Single Product Page
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=20567
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 2.5.5
 */

add_action( 'woocommerce_before_single_product', 'bbloomer_prev_next_product' );

// and if you also want them at the bottom...
add_action( 'woocommerce_after_single_product', 'bbloomer_prev_next_product' );

function bbloomer_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>';
        
}

CSS (Part 2 of 3): Style Next/Previous Buttons @ Single Product Page

Just because I’m nice I decided to give you some cool styling as well. In particular, we make sure the buttons float one to the left and one to the right and that the whole new row displays as block.


/* CSS */

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

Product Sorting (Part 3 of 3)

Functions used in the PHP above will work in chronological order, as per “next_post_link” and “previous_post_link” documentation.

Problem is – what if you have WooCommerce products sorted by alphabetical or custom order?

At the end, client found out the best way to make the two work together is by using the free Post Type Order plugin. Simply download it, activate it and sort your products with that plugin – and Next/Previous will now follow this custom sorting.

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

57 thoughts on “WooCommerce: Add Next/Previous @ Single Product Page

  1. Indeed a very useful function.
    How can I insert the ” previous”/”next” function in any button rather than coming up on the top of the page?

    1. Bo, thanks so much for your comment! Yes, this is possible – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  2. I think it will work (at least as far as I can tell right now).
    However, when viewing a category archive and clicking on the first product WooCommerce switches most of the times to another category when the product is added in more than one category. As stated in this thread https://wordpress.org/support/topic/breadcrumbs-for-products-in-multiple-categories/ is this normal WordPress / WooCommerce behavior.

    I did not notice it before, I just discovered it when I wanted to implement the Previous / Next navigation to the Single Product page.

    I have posted this issue on StackOverflow (https://stackoverflow.com/questions/54080982/woocommerce-jumps-to-wrong-categorie-when-displaying-the-single-product) but nothing came up (yet).
    Do you know of a solution? Or maybe it is a great subject for your next very helpful WooCommerce solutions.. (-;

    Best wishes,

    Adri

    1. Thanks for that Adri, let me know how it goes πŸ™‚

  3. Hi,
    I’ve tried adding the PHP code to my functions.php file (in child theme of course) + the CSS, but it looks like nothing happens!
    What can be the issue, and what can I check?
    Thanks,
    Marina.

    1. Hey Marina, thanks for your comment! It could be your custom theme – try testing this on 2016 theme for example

  4. I seem to be having problems getting it to recognise categories the next/previous links are taking products from other categories. Have I missed something?

    1. Hey Aliesha, thanks for your comment! It may not work for complex site architectures (subcategories etc.) – not sure. Can you try with just “parent” categories and let me know?

  5. This is awesome and worked exactly as described on PHP 7.2 and Woo 3.5.2. Thank you!!

    1. Awesome πŸ™‚

  6. Is it possible to make what would be the pictures of the goods on the buttons?

    1. Hey Bowa, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  7. This was really useful thank you!
    How can I hide these from product archive pages though? So they just show on product pages

    Many thanks

    1. Hello David, thanks for your comment! This only works on the single product page – so you must have a theme or plugin that is messing with it. Try deactivating all plugins but Woo and switch temporarily to 2017 – do you still see the error?

    2. Thanks, the lovely folks at Beaver builder and theme edited the code to fix my issue for now

       
      function bbloomer_prev_next_product(){
        if ( is_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>';
        }
      }
      

      Basically, he just added a conditional check to make sure the navigation is run only on the Singular Product page

    3. Alright, cool πŸ™‚

  8. Awesome! Thank you!

    1. You’re welcome πŸ™‚

  9. Hi Rodolfo,

    How do I get it to show the products in reverse order?

    1. Hello Carla, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  10. Very very useful! Sweet piece of code. You just saved me a ton of work…. πŸ™‚

    1. Nice πŸ™‚

  11. Is it possible to show thumbnail next to the arrow?

    1. Hey Amanda, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  12. Hello Rodolfo, it’s not working for me, there’s an empty

    <div class ="prev_next_buttons"></div>.
    1. Sorry, it works, as I have only 25 products (25 colours of a same product) in my eshop, I didn’t give any category to them. So I put a Category and all works good.
      Thanks.
      Great snippet.
      Chris

  13. very useful snippet you wrote there Rodolfo, Thank you

  14. Great article. I was wondering whether anyone knows how to change the coding to pull in icons rather than images (for the left and right directions)? That really would be great and look much better on mobiles.

  15. Hi There,
    great snipet, thank you!
    I was wondering how I can adjust this so it works with products assigned to multiple categories.

    1. Hey Vd thanks for your comment! I guess you can remove the “product_cat” part inside the code and see if that works πŸ™‚

    2. Thank you for reply,
      unfortunately when I remove it, buttons are not displayed…

    3. I see, sorry but I can’t help with custom work. Thanks for your understanding! πŸ™‚

  16. Hi Rodolfo,

    Thank you so much for posting this. It came in very handy at the last minute!

    The function worked perfectly and my designer made some changes that I wanted to share. Instead of buttons, it’s an elegant set of arrows without any words.

    Thank again. The info you provide on your site is very helpful to those of us just getting into Woocommerce.

     
    .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"] {
     right: 0;
        top: 200px;
        position: absolute;
        text-indent: -9999px;
        z-index: 9999;
        background: url(.../next.jpg) no-repeat;
        height: 50px;
        width: 50px;
        background-size: contain;
    }
     
    .prev_next_buttons a[rel="next"] {
        left: 0;
        top: 200px;
        position: absolute;
        text-indent: -9999px;
        z-index: 9999;
        background: url(.../previous.jpg) no-repeat;
        height: 50px;
        width: 50px;
        background-size: contain;
    }
     
    .prev_next_buttons::after {
    content: '';
    display: block;
    clear:both;
    }
    
    
    1. Thank you Ted, much appreciated!

    2. Which file would this code need to be pasted into?

    3. style.css of your child theme

  17. Not working in the newest version, site goes on white screen πŸ™

    I use custom child theme with total theme.

    Whats wrong?

    1. Hey Idaniel, thanks so much for your comment! I just tried it on my Woo 2.6.4 install and it works perfectly – what error are you getting when you enable WP_DEBUG?

  18. ThankΒ΄s for this Snippet! Very usefull.

    Is there a possibility to work with utf-8?

    1. Hello Joerg, thanks for your comment! I actually don’t see why not – did you try anything already? Feel free to share it here.

    2. Sorry i have no solution. I have test the Snippet in Gemany and noticed that UTF-8 is not supported.

    3. Hey Joerg, I guess you’re trying to print a German word on screen? Which one is it?

    4. NΓ€chstes ( is the German Word for Next)

    5. Hello Joerg, I just did a test and it worked no problem. Make sure to copy “NΓ€chstes” and paste it inside the function as opposed to typing it in. Let me know!

  19. this is awesome, thanks for sharing. However, on responsive mode (mobile or tab), the previous and next links are attached together with no spacing. How can we correct this? πŸ™‚

    1. also the option of disabling this on responsive (mobile & tab) would be nice πŸ™‚

    2. Rodrigo, thanks for your comment! Well, PHP cannot be disabled depending on the device, so this would be a CSS @media query job. For example, to disable all this on screens smaller than 767px, you would do something like:

      
      @media screen and (max-width: 767px) {
      
      .prev_next_buttons {
      display: none;
      }
      
      }
      
      

      Also, you should wrap all my other snippet’s CSS with:

      
      @media screen and (min-width: 768px) {
      
      /* all my snippet's CSS here */
      
      }
      
      

      Let me know πŸ™‚

  20. Some additional tips for using/extending this snippet:

    If you want the previous/next link to navigate between products in same category only, just change the option TRUE to FALSE. When you reach first/last product, it will switch to the next/previous product from next/previous category inline.

    EXAMPLE CODE:
    $previous = next_post_link(‘%link’, ‘← PREVIOUS’, FALSE, ‘ ‘, ‘product_cat’);
    $next = previous_post_link(‘%link’, ‘NEXT →’, FALSE, ‘ ‘, ‘product_cat’);

    If you want to show the product name from previous/next in line, add %title to the snippet like this:
    EXAMPLE CODE:
    $previous = next_post_link(‘%link’, ‘← PREVIOUS: %title’, FALSE, ‘ ‘, ‘product_cat’);
    $next = previous_post_link(‘%link’, ‘NEXT: %title →’, FALSE, ‘ ‘, ‘product_cat’);

    1. This is awesome feedback Fabio! Thanks so much πŸ™‚ If you have another snippet you want to share with the WooCommerce community, feel free to send your proposal here. Cheers!

  21. Cool feature thanks for sharing!

    1. Excellent, thank you so much Ronald πŸ™‚

  22. Thanks Rodolfo – this is very useful!

    1. Awesome – glad to hear that πŸ™‚

Questions? Feedback? Support? Leave your Comment Now!
_____
If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)
¯¯¯¯¯

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.