Question 30990 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Woocommerce/WordPress: Change color of page-number.current

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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);
}

  2. 0

    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!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search