Changing Page Button Style

[fleuraw]

Hi Swiftideas,

I would like to customize the page buttons’ background colour when selected and on hover, and I would like to remove all the borders around it.

I have tried editing under each of the following sections, but I was not able to achieve what I want.

.woocommerce nav.woocommerce-pagination, .woocommerce #content nav.woocommerce-pagination, .woocommerce-page nav.woocommerce-pagination, .woocommerce-page #content nav.woocommerce-pagination {
	border-top: 0px solid #e4e4e4;
	padding-top: 30px;
	text-align: right;
}
.woocommerce nav.woocommerce-pagination ul li, .woocommerce #content nav.woocommerce-pagination ul li, .woocommerce-page nav.woocommerce-pagination ul li, .woocommerce-page #content nav.woocommerce-pagination ul li {
	text-align: center;
font-size:11px;
background-color:#ffffff;
}
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, .woocommerce #content nav.woocommerce-pagination ul li a, .woocommerce #content nav.woocommerce-pagination ul li span, .woocommerce-page nav.woocommerce-pagination ul li a, .woocommerce-page nav.woocommerce-pagination ul li span, .woocommerce-page #content nav.woocommerce-pagination ul li a, .woocommerce-page #content nav.woocommerce-pagination ul li span {
	padding: 13px;
	line-height: 15px;
}
nav.woocommerce-pagination ul li a.next i {
	margin-left: 5px;
}
nav.woocommerce-pagination ul li a.prev i {
	margin-right: 5px;
}

I have attached 2 images for your reference. Thank you!

Attachments:

You must be logged in to view attached files.

[Nishant – SUPPORT]

Hello,

Can you please provide the website url to check out the for the same

[fleuraw]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.woocommerce-page nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li span.current {
    color: #FFF;
    background: #ff0000 !important;
}

.woocommerce nav.woocommerce-pagination ul li:hover, .woocommerce #content nav.woocommerce-pagination ul li:hover, .woocommerce-page nav.woocommerce-pagination ul li:hover, .woocommerce-page #content nav.woocommerce-pagination ul li:hover{
 color: #FFF;
    background: #ff000 !important;
}

[fleuraw]

Hi Mohammad,

Thank you for your help. Unfortunately, the css code did not alter anything. Could you please assist again?

Thank you!

[Mohammad – SUPPORT]

Hi,
Please always insert custom css code at Admin -> Theme options -> General Options -> Custom CSS.
Thanks
Mohammad

[fleuraw]

Hi Mohammad,

After inserting the custom css code, I am able to make changes to the text color and background color, but only for current page. The code wasn’t able to change the hover style. Could you help me with this? Also, is it possible to remove the solid borders completely?

Thank you!

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

nav.woocommerce-pagination ul li a:hover{
background:#ff0000 !important;
}

nav.woocommerce-pagination ul {
border:none !important;
}

nav.woocommerce-pagination ul li {
border:none !important;
}

Thanks
Mohammad

[fleuraw]

Hi Mohammad,

That worked! Thank you so much.

[Mohammad – SUPPORT]

Hi,
You most welcome.
Thanks
Mohammad