Product Pagination in Mobile

Hi,

Are you referring to the shop page? Correct? You can go under Appearance > Customize > WooCommerce > Product Page and be sure the Product Pagination is enabled.

If this is not what you are looking for, please provide us a with more details.

We’ll be glad to help.

I am referring to the individual Products Page. I have enabled Appearance > Customize > WooCommerce > Product Page but that pagination only works on desktop. No pagination show up in Mobile. Is there code or CSS to enable it on Mobile?

Hello @ramonaeid,

I am referring to the individual Products Page. I have enabled Appearance > Customize > WooCommerce > Product Page but that pagination only works on desktop. No pagination show up in Mobile. Is there code or CSS to enable it on Mobile?

That’s the expected behaviour of the Storefront theme, the paginations feature on the single product page works by hovering by mouse but clearly, that’s not possible on a mobile device.


That said I tried copying all the CSS properties of the buttons and applied them on mobile.

Here’s what I came up with:

/*  Enable pagination buttons on single product page (mobile)  */


@media (max-width: 768px) {
  nav.storefront-product-pagination {
    display: block !important;
    box-sizing: border-box;
  }
  
  .storefront-product-pagination a {
  position: fixed;
  top: 50%;
  width: 500px;
  box-shadow: 0 0 5px rgba(0,0,0,.2);
  z-index: 1499;
  display: flex;
  align-items: center;
}
.storefront-product-pagination a img {
  max-width: 90px;
  border-radius: 0;
}
  .storefront-product-pagination a[rel=prev] {
  left: -455px;
  transition: left .3s ease-out;
  flex-direction: row-reverse;
  padding-left: 1em;
}



  .storefront-product-pagination a[rel=next] {
  right: -455px;
  transition: right .3s ease-in;
  padding-right: 1em;

  }
}

End result: https://d.pr/v/Kbvrb9

Hope this helps!

Hi Saif (woo-hc) (@babylon1999),

Thank you so much for the code. I am actively testing on my localhost laptop and it seems to be working as expected. I added some code to show just the arrows:

.storefront-product-pagination a img, .storefront-product-pagination .storefront-product-pagination__title {
        display:none;
    }

Hi @ramonaeid ,

Glad to hear that the CSS has worked as expected on your end ??

Since this issue has been resolved, please feel free to create a new topic should you need any further help.

Cheers!