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!
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 Get CustomizeWoo.com FREE
* @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', '← PREVIOUS', TRUE, ' ', 'product_cat');
$next = previous_post_link('%link', 'NEXT →', 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.
How to exclude a caterory and also would it be possible to loop
Hi Dom, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
I’m not sure if this is working anymore, I did exactly, it seems to go well and suddenly it jumps some products, and products in the middle start just with the “next” product as if were the first page product
Weird. you tried that with a default theme and no other plugins than Woo?
Hello, this code is great ! Thank you
Can you also limit that only the products for sale will be shown, because right now it also shows the products that have already been sold ? Thx!
Hi Cedric, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi, this code works wonderfully! It made my life easier, but I have one additional question, is there any option to “loop it” so the Previous Next buttons show up always (right now on the first product there is no ‘previous’ and on the last there is no ‘next’). Also, the products are sorted by ID I guess by default, can it be changed to “by menu_order”? Thanks for any info!
Hello Paulina, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Still works!
But it points the wrong way. next is previous and vice versa. Can’t figure out how to swap it 🙂
Should not be too difficult – try again (on a dev site, not on your live environment) 😀
Getting This Error: Cannot redeclare function “bbloomer_prev_next_product.”
You must have added the snippet twice – check again!
Hi,
Snippet works great but I only want to go to the next product that is actually on stock. I assume there is some code to add that can accomplish this. Could you help?
-Marjolein-
Marjolein, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi!
I just made a custom variation of this code I’d like to share. Namely separating Previous and Next as standalone shortcodes:
[woo-prod-previous] and [woo-prod-next]
function bbloomer_next_product() { ob_start(); echo '<div class="next-button">'; // 'product_cat' will make sure to return next/prev from current category $next = previous_post_link('%link', 'Neste', true, ' ', 'product_cat'); echo $next; echo '</div>'; return ob_get_clean(); } add_shortcode('woo-prod-next', 'bbloomer_next_product'); function bbloomer_previous_product() { ob_start(); echo '<div class="previous-button">'; // 'product_cat' will make sure to return next/prev from current category $previous = next_post_link('%link', 'Forrige', true, ' ', 'product_cat'); echo $previous; echo '</div>'; return ob_get_clean(); } add_shortcode('woo-prod-previous', 'bbloomer_previous_product');Forgot to swap out the Norwegian text strings. “Forrige” is previous and “Neste” is next. 🙂
Cheers!
Nice, thank you!
Deu super certo obrigada!
Great!
I installed your code and it works well. But there appears to be a limitation that’s been alluded to before but not fully addressed. I hope you can help. Some of our products are placed in multiple categories. (Ex: Categories “B” and “C”.) If we launch from the category “B” gallery to a product, the PREV/NEXT link may take us to products spanning all categories “A” through “Z” and not just “B.” Is that what you intended and is there one element within your code that I can change to keep the product tied to category “B”?
Hi Rowland, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi Rodolfo,
Thank you very much for this post, even for a total beginner like me, it’s been possible (and easy) to add the next/previous arrows to my product’s pages.
– Would it be possible to add the next/previous arrows right below the product photo?
I would like to remove the space above the product photo.
– Would it be possible to add the next/previous arrows also to the product lightbox, after you’ve clicked on the photo?
Thank you very much again!
Jordi, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hello! Unfortunately it is not working with latest woo and wp, maybe someone knows the solution to force any child theme to show next and previous product-links for the same category on single product’s page? Thank you.
P.S.
Maybe the matter is in Avada theme on my end, so any advises welcome! Thank you!
Hi Infa, thanks for your comment! Yes, I just tested this again with Storefront theme and it works perfectly. You’ll need to customize the snippet to match Avada WooCommerce overrides unfortunately
Hi Rudolfo,
Just implemented this on WordPress 5.2.4 and Genesis theme 3.1.2. with Woocommerce 3.7.1 and it works like a charm.
Thanks a million for this, it was exactly what I was looking for 🙂
Awesome!
Thank you so much for the snippet. I had been looking for this functionality for quite some time!
Cool!
Hi Rodolfo,
How can i add product image?
Thank you for sharing this wonderful article.
Umut, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Can I get the css codes for next and previous product. I don’t know how to input
Sorry, what do you need exactly?
wooCommerce 3.6.3
WordPress 5.2.1
Works flawlessly
Thank you
Thanks!
Thanks for sharing the next / previous code Rodolfo.
Is there a way to link the forward and back buttons to the forward and back arrows on the keyboard?
Hi Michael, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
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?
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
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
Thanks for that Adri, let me know how it goes 🙂
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.
Hey Marina, thanks for your comment! It could be your custom theme – try testing this on 2016 theme for example
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?
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?
This is awesome and worked exactly as described on PHP 7.2 and Woo 3.5.2. Thank you!!
Awesome 🙂
Is it possible to make what would be the pictures of the goods on the buttons?
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
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
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?
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', '← PREVIOUS', TRUE, ' ', 'product_cat'); $next = previous_post_link('%link', 'NEXT →', 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
Alright, cool 🙂
Awesome! Thank you!
You’re welcome 🙂
Hi Rodolfo,
How do I get it to show the products in reverse order?
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
Check this out 🙂 https://en.support.wordpress.com/show-your-posts-in-chronological-order/
Very very useful! Sweet piece of code. You just saved me a ton of work…. 🙂
Nice 🙂
Is it possible to show thumbnail next to the arrow?
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
Hello Rodolfo, it’s not working for me, there’s an empty
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
Awesome 🙂
very useful snippet you wrote there Rodolfo, Thank you
🙂
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.
Hey Dav, thanks for your comment! Try with this: https://stackoverflow.com/questions/27403501/how-to-style-prev-next-arrows-button
Hi There,
great snipet, thank you!
I was wondering how I can adjust this so it works with products assigned to multiple categories.
Hey Vd thanks for your comment! I guess you can remove the “product_cat” part inside the code and see if that works 🙂
Thank you for reply,
unfortunately when I remove it, buttons are not displayed…
I see, sorry but I can’t help with custom work. Thanks for your understanding! 🙂
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; }Thank you Ted, much appreciated!
Which file would this code need to be pasted into?
style.css of your child theme
Not working in the newest version, site goes on white screen 🙁
I use custom child theme with total theme.
Whats wrong?
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?
Thank´s for this Snippet! Very usefull.
Is there a possibility to work with utf-8?
Hello Joerg, thanks for your comment! I actually don’t see why not – did you try anything already? Feel free to share it here.
Sorry i have no solution. I have test the Snippet in Gemany and noticed that UTF-8 is not supported.
Hey Joerg, I guess you’re trying to print a German word on screen? Which one is it?
Nächstes ( is the German Word for Next)
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!
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? 🙂
also the option of disabling this on responsive (mobile & tab) would be nice 🙂
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 🙂
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’);
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!
Cool feature thanks for sharing!
Excellent, thank you so much Ronald 🙂
Thanks Rodolfo – this is very useful!
Awesome – glad to hear that 🙂