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">
		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,
		) ) );

Child theme => style.css

  display: table; margin: 0 auto;

About The Author

1 thought on “How to center align WooCommerce pagination buttons”

  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?

Leave a Comment

Your email address will not be published.

Scroll to Top