Formatting issues in my WooCommerce Product Pages

Hi Patrick,

Thanks so much for reaching out and thank you for using Crio Pro WordPress theme!

I took at what you had going on and I was able to recreate what you were seeing on your end and get a working solution for you. Since the buttons and quantity controls are generated by WooCommerce they wouldn’t be as easy as editing a page with our Post and Page Builder, which means we can fix this by adding some custom CSS.

First you will need to access the custom CSS/JS editor on the Customize screen, and once you are there you can add the code below into the CSS section with copy and paste:

Just to clarify, the minus button is white because the quantity is at 0. So to prevent the person on the page from adding a negative amount the button gets disabled which is why it’s white like that. I did however in the rule I provided make it so that the Minus Icon stands out a bit better for you and you can see the border of the button a little easier. You are more than welcome to change the background color or any other values in the snippet provided.

I hope this helps! Please reach back out if there’s anything else that we can answer for you.

• This reply was modified 2 years, 1 month ago by Andy V.

Hi Patrick,

I just inspected one of your single product pages and it looks like you’ve already managed to get this CSS adjustment implemented. Please let us know if you still need assistance with this or if you have any other questions for us.

Thanks Patrick!

My apologies, I didn’t realize you were specifically referencing the quantity option. This bit of CSS here should clear that up for you:

.woocommerce div.product form.cart .variations label {
    color: #000000 !important;
}

Hope this helps to clear things up for you Patrick!

Awesome Patrick,

I’m happy that worked for you. Let us know if there’s anything else we can answer for you!