How do I change the color of the WooCommerce Price text in my Crio WordPress Theme

Hi Michelle,

Thanks for reaching out with your Crio Pro WordPress theme questions! I inspected your site and it looks like the CSS selectors for your WooCommerce price text .woocommerce div.product p.price is hard-coded to reflect one of your color palette settings.

We can remove the CSS variable ('--color-1') with JavaScript, I created a function that should do that for you. When I removed the CSS variable it defaulted to this gold color #b3af54 so I replaced it with that color in the script but you can change it to any color you’d like. Here’s the function:
 

function removeCSSVariableAndChangeColor() {
  const selector = ".woocommerce div.product p.price";
  const elements = document.querySelectorAll(selector);

  elements.forEach(element => {
    // Remove the CSS variable
    element.style.removeProperty('--color-1');
    // Change the color to #b3af54;
    element.style.color = '#b3af54';
  });
}

// Call the function to apply the changes
removeCSSVariableAndChangeColor();

 
To implement this JavaScript function visit your WordPress Customizer CSS/JS Editor section and paste the script into JS Code section.

I hope this helps Michelle! Please let us know if there’s any thing else that we can answer for you.