Archived topic
Woo Pagination - Increase size, change colors
3 replies · Started by Scott on February 10, 2023
I’ve increased the text size and the background color for the pagination with some css.
It seems to work well but there’s one thing I haven’t figured out. There’s a little grayish line underneath the page numbers I haven’t been able to figure out where it comes from.
Here’s a screenshot:

I don’t see anything in the customizer or in GP Pro settings that might effect the pagination so I assume it’s not really a GP issue. But if anyone knows where that underline is coming from please let me know.
Here’s the css i’m using:
/* Woo Pagination */
.woocommerce-pagination{
margin-top: 1em;
}
.woocommerce-pagination .page-numbers .current, .woocommerce-pagination .page-numbers li a:hover {
padding: 10px 10px 10px 10px !important;
background: #990000 !important;
color: #ffffff !important;
font-size: 24px !important;
}
.woocommerce-pagination .page-numbers a:link, .woocommerce-pagination .page-numbers a:visited {
display: inline !important;
text-decoration: none !important;
background: #990000 !important;
color: #ffffff !important;
padding: 10px 10px 10px 10px !important;
}
/* .woocommerce-pagination .page-numbers li{
font-size: 24px !important;
display: inline;
margin: 0px;
}
*/
.woocommerce .woocommerce-pagination { width:100%;
float: none;
font-size: 24px !important;
text-align: center !important;
}
/* End Woo Pagination */
Hi there,
try this CSS to remove the woo border style:
.woocommerce nav.woocommerce-pagination ul {
border: 0 !important;
}
Bingo! Thank you David.
You're welcome