iPascalCase
11/15/2017 - 9:28 AM

Styling Pagination in woocommerce with CSS real fast :)

just paste this code in woocommerce.css then Enqueue the woocommerce.css into woocommerce.php everything then works like a charm :) note: if you are working with an RTL language just remember to change the "prev_text" and "next_text" from the pagination.php file which is located in /woocommerce/loop/pagination.php to the text below: 'prev_text' => '→', 'next_text' => '←',

woocommerce.css
content_copyfile_download
.woocommerce-pagination{
    margin-top: 1em;
}
.woocommerce-pagination .page-numbers .current, .woocommerce-pagination .page-numbers li a:hover {
padding: 3px 7px !important;
background: #DDD !important;
border: 1px solid #BBB !important;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

.woocommerce-pagination .page-numbers a:link, .woocommerce-pagination .page-numbers a:visited {
display: inline !important;
text-decoration: none !important;
background: #EEE !important;
color: #666 !important;
padding: 3px 7px !important;
border: 1px solid #DDD !important;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

.woocommerce-pagination .page-numbers li{
    display: inline;
    margin: 2px;
    
}

.woocommerce .woocommerce-pagination { width:50%; float: left; text-align: left !important;  }

.woocommerce-result-count {
width: 46%;
float: right;
text-align: right;
margin-bottom: 0 ;
}