How to center align WooCommerce pagination buttons

Simple CSS solution:

nav.woocommerce-pagination{display: table; margin: 0 auto;}

You can wrap pagination buttons with a div and do the styling. Better to use a Child theme to edit pagination.php file.

File Structure:

  • Child theme Name
    • woocommerce
      • loop
        • pagination.php
...
<div class="woocommerce-pagination-centeralign">
    <nav class="woocommerce-pagination">
		<?php
		echo paginate_links( apply_filters( 'woocommerce_pagination_args', array( // WPCS: XSS ok.
			'base'      => $base,
			'format'    => $format,
			'add_args'  => false,
			'current'   => max( 1, $current ),
			'total'     => $total,
			'prev_text' => '&larr;',
			'next_text' => '&rarr;',
			'type'      => 'list',
			'end_size'  => 3,
			'mid_size'  => 3,
		) ) );
		?>
    </nav>
</div>

Child theme => style.css

div.woocommerce-pagination-centeralign{
  display: table; margin: 0 auto;
}

Tawfiqur

I'm a freelance Wordpress Front-end Developer, work from my home office. Mostly do my freelance work on Upwork. I'm a TOP RATED freelancer with over 11K+ Work Hours. Specialize in HTML5, CSS3, SCSS, JavaScript, jQuery, Ajax, ES6, Bootstrap, PHP, MySQL, Wordpress, Woocommorce and Custom Wordpress Theme and Plugin Development

Leave a Reply

Close Menu