Woocommerce pagination on Mobile devices

You have a display of none inside the woocommerce.css file. You will need to add a CSS style rule to make them show.

.storefront-product-pagination {
     display: block !important;
}

You have to add this as a mobile query though. I don’t know where your style kicks in. If it’s Tablet and Mobile. If it’s mobile only then you would do a media query like so.

@media screen and (max-width:480px){
.storefront-product-pagination {
     display: block !important;
  }
}

• This reply was modified 5 years, 6 months ago by Stef.

Hi @onewordpresscustomer

The Product Pagination in Storefront is only intented to display on desktop devices at the moment.

There is an enhancement request open to make it compatible with mobile devices as well – https://github.com/woocommerce/storefront/issues/857

Thanks Both

I tried the CSS from Stef, but no luck. The enhancement request also looks as if the GitHub request might have been cancelled?

The previous Product Pagination plugin seemed to have this feature, but is no longer supported.

Any suggestions on an alternative supported mechanism for a previous/next link on the Product page – or perhaps a premium add-on in for Woocommerce?

Many thanks,
Pierre

Hi @onewordpresscustomer

I see that it was removed from the 2.5 milestone, but that does not mean it won’t be included in a next release.

Meanwhile, I did find this guide on how to add next/previous text links to the products – https://businessbloomer.com/woocommerce-add-nextprevious-single-product-page/

You will probably need to play around a bit with the CSS to get it to show the way you want it and if you need help with that, we highly recommend contacting one of the services on our Customizations page.

@etiennep they already have pagination. It’s just messed up on css. I thought it was their related products at first but it was the pagination.

My css worked for me. Maybe they didn’t clear cache or have a cache plugin enabled.

Hi Stef

Apologies – I tried again on a non-cached site and this code worked for me:
.storefront-product-pagination {
display: block !important;
}

I just didn’t expect to look for it at the very bottom (after related Products)

I spent weeks looking for this solution and I am sure many more will appreciate the posted replies.

Thanks again for helping,
Pierre

You’re welcome. That’s normally where it would be. If you want it elsewhere you will have to customize it. Also, I can’t remember but they’re pretty big and I believe stacked on top of one another.

@onewordpresscustomer glad to see that worked for you!

@serafinnyc good call on the caching and thanks for the CSS.

I’m going to mark this as resolved now.

Thanks.