| |

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' => '←',
			'next_text' => '→',
			'type'      => 'list',
			'end_size'  => 3,
			'mid_size'  => 3,
		) ) );
		?>
    </nav>
</div>

Child theme => style.css

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

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

One Comment

  1. Thx, it works.

    However I do have a question. Although the first option works, you say the second option is the better one. But what makes it the better option?