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(); ?>
				</div> 
			</div>   
  <?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;
    opacity:0.8;
}

Leave a Reply