Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Reduce number of catalog pagination links on mobile

junePaginationwoocommerce
    • 6 years, 7 months ago dcbates85
      Participant

      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

    • 6 years, 7 months ago Ruco
      Keymaster

      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!

    • 6 years, 7 months ago dcbates85
      Participant

      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.

    • 6 years, 7 months ago Ruco
      Keymaster

      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_links

      Let us know.

      Regards!

    • 6 years, 6 months ago dcbates85
      Participant

      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.

    • 6 years, 6 months ago Ruco
      Keymaster

      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!

    • 6 years, 6 months ago dcbates85
      Participant

      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.

      Pagination

      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?

    • 6 years, 6 months ago dcbates85
      Participant

      https://drive.google.com/open?id=17yGKiC5oJhEA13suhnLdautap5tMfWNz

    • 6 years, 6 months ago Ruco
      Keymaster

      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!

Viewing 8 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password