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
- loop
- woocommerce
...
<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;
}
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?