Woocommerce/Wordpress: Change color of page-number.current-CodePudding

I'm trying to change the color of the current page number on my woocommerce site. The site is using the Astra theme (free version) and elementor (free) but I cannot seem to figure out how to change the color using the additional CSS option.

I want to change the color of the page-number.current to white (#ffffff) AND change the hover color to white as well. I would also have to change the hover color of the prev.page-numbers AND next.page-numbers to white as well.

For some reason, these are the only buttons that do not adapt to the global colors of the website. I know which global color I would have to change, but this will affect all colors on my website - that's why I'm looking for some help.

CodePudding user response：

You can use the body > Page ID in a CSS code.

Here is the example code.

body.page-id-15{background-color:#eee;}

Let me know if that helps!

CodePudding user response：

Thanks for helping!

I ended up adding the following code to the extra CSS option:

/* Woocommerce current page number color to white*/
.woocommerce nav.woocommerce-pagination ul li span.current {
    color: var(--ast-global-color-6);
}

/* Woocommerce page numbers hover color */
.woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--ast-global-color-0);
    color: var(--ast-global-color-6);
}