Custom WooCommerce Pagination Styles

How to create your own WooCommerce pagination.

1) First we add WooCommerce pagination function

/* Custom WooCommerce Pagination */
function woocommerce_pagination() { ?>
			<div class="nextpage">
				<div class="pagination">
					<?php echo paginate_links(); ?>
  <?php  }

2) Then we add our own styles

## Pagination
.pagination a, .pagination span {
    padding: 8px 12px;
    margin: 0;
    display: inline-block;
    color: #fff;
    font-size: 15px;
    background: #68C0FF;

.pagination span {
    background-color: #030303;
    box-shadow: none;		

.pagination a:hover,
.pagination span:hover {
    box-shadow: none;

Leave a Reply

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