Woocommerce pagination element doesn't work with native .woocommerce-pagination class

[Misho]

HI!

In order to make the Woocommerce pagination element working with a filtering plugin, I have to give it the original .woocommerce-pagination class.

That makes the pagination element original and valid, but at the same time, the next button disappears on mobile.

It is supposed to look like this:

But it looks like this:

This is easy to reproduce. All you have to do is add the woocommerce-pagination class to the Pagination element.

I tried to create custom CSS to get the next arrow back, but I couldn’t find any.

Can you please give me the correct CSS to make it work?

Also, I believe that all elements should be able to receive the native WooCommerce classes and work properly. This is important for example in Analytics tracking, GTM implementation and 3rd party plugin compatibility. So far, I cannot even add the products and product classes to rows and columns, without breaking the layout and having to fix it with custom CSS.

Edit: this CSS is showing it, but all this still looks like an issue.

@media screen and (max-width: 767px) {
  $el.woocommerce-pagination a.prev,
  $el.woocommerce-pagination a.next,
  $el.woocommerce-pagination a.prev-next {
    display: table;
    padding:0.1em 0.6em!important;
}
}

Thank you!

[ruenel]

Hi Misho,

Thanks for writing in! I have investigated this and we have designed in all of the Stacks present in the theme that the pagination arrows will no longer visible on smaller screens. Only the page numbers will be visible.

The arrows were hidden using this built-in CSS in the stack styles:

@media (max-width: 766.98px){
  .x-pagination a.prev, .x-pagination a.next, .x-pagination a.prev-next, .woocommerce-pagination a.prev, 
  .woocommerce-pagination a.next, .woocommerce-pagination a.prev-next {
    display: none;
  }
}

You can use this default CSS coding to your site and change the value to block so that the pagination arrows in your layout will display.

Hope this helps.