-
-
Hello,
I am working with the June WooCommerce theme and I have a question about catalog pagination. Is there a way to reduce the number of pagination links that appear on the bottom of catalog pages for mobile?
Essentially, I would like to display a maximum of 3 pagination links (1, 2, 3 for example) as well left and right navigational arrows instead of having the total number of pagination links wrap to a second line.
Please let me know if this is possible.
Thanks,
Daniel Bates
-
Hello,
Please can you send to me a screenshot or a link so i can give you the right way to do that.
Let us know.
Regards!
-
Thanks for getting back to me so quickly. Here is a link of how the pagination is currently displayed:
https://drive.google.com/open?id=1-DrZN6Kauq-Ip16Fr88rtk5HhuuqYa9P
And here is how I would like it displayed:
https://drive.google.com/open?id=1y6KW-lVgZ8tEl5EvUHr_mKhp0Ff5U_OM
Here is a sample page for your reference:
https://woolybuggerdev.wpengine.com/product-category/flies/bass-flies-flies/
Thanks in advance.
-
Hello,
To make that possible you have to edit the file \june\woocommerce\loop\pagination.php find the function:
function codeless_woo_pagination_args( ){ $total = isset( $total ) ? $total : wc_get_loop_prop( 'total_pages' ); $current = isset( $current ) ? $current : wc_get_loop_prop( 'current_page' ); $base = isset( $base ) ? $base : esc_url_raw( str_replace( 999999999, '%#%', remove_query_arg( 'add-to-cart', get_pagenum_link( 999999999, false ) ) ) ); $format = isset( $format ) ? $format : ''; if ( $total <= 1 ) { return; } return array( 'base' => $base, 'format' => $format, 'add_args' => false, 'current' => max( 1, $current ), 'total' => $total, 'prev_text' => '<span class="cl-pagination-prev"><i class="cl-icon-arrow-left"></i></span>', 'next_text' => '<span class="cl-pagination-next"><i class="cl-icon-arrow-right"></i></span>', 'type' => 'list', 'end_size' => 3, 'mid_size' => 3 ); }
You have to change the end_size => 3 in end_size => 1 also you have to change the mid_size => 3 to mid_size => 1
For more detailed information please read the codex documentation:
https://codex.wordpress.org/Function_Reference/paginate_linksLet us know.
Regards!
-
Unfortunately, this isn’t quite what I am looking for. I want there to be a maximum of 5 pagination links (3 page numbers, plus a left and right arrow) displayed on MOBILE ONLY.
For example, if I’m on Page 2, I should a left arrow, Page 1 link, Page 2 link (highlighted), Page 3 link, and a right arrow. If I’m on Page 6, I should see a left arrow, Page 4 link, Page 5 link, Page 6 link (highlighted), and a right arrow.
Hope this makes sense.
-
Hello,
This the only way to make that by modify the array above. Please try to change the numbers. If you want it only on mobile you can add this custom code:
.cl-pagination {display:none;} @media(max-width:480px){ .cl-pagination{display:block !important;} }
Let us know.
Regards!
-
Hello,
I did try making the updates you suggested by changing end_size => 1 in mid_size => 1 in the array. However, this does not accomplish what I am looking to do. It displays 1 page number at the end and 1 page number on either side of the current page, but it does NOT limit the TOTAL number of page numbers displayed to 3 (see screenshot). This also applies the change to both desktop and mobile; I am only looking to modify this functionality for mobile.
As a side note, I still want the pagination to display on desktop, so hiding/displaying it with a media query is not what I’m looking for either. I want to condense the pagination with the functionality I suggested above while having desktop display the full pagination. Is this possible?
-
-
Hello,
Sorry, this isn’t possible. If you want the pagination condense in the mobile you have to have the same thing on the desktop.
What can be made is to have the same pagination in responsive and desktop you can customize the pagination with the array i have give you above.
Regards!
-
You must be logged in to reply to this topic.