WooCommerce text Issues

I’m having a strange issue with WooCommerce. First, on all of my variable product pages, the drop down menu titles, SKU numbers and categories are all white text on a white background, so the viewer can’t see them. I can’t figure out how to fix this. I’m guessing there’s a custom CSS code that I just haven’t figured out yet.

I’m having a similar issue on my checkout page. The headlines above each text box are white text on a white background. When I view the checkout page with Cornerstone, it looks completely fine (the headlines are black text) but when I preview the webpage the headlines turn white again.

I attached a couple screenshots to show the issue on the product pages.

I’ve reached out to WooCommerce and they said it sounded like a theme issue. I am using X theme. I’ve built many websites using X theme and WooCommerce and have never had an issue before. I’ve tried clearing my cache and that didn’t help. I also checked the website on Firefox to see if it was just a Chrome issue but I had the same problems in Firefox. Any ideas on how to fix this?

Hi @jason31,

Thanks for reaching out.

I search your account in our admin to get your website that I am not able to find your name, would you mind sharing your website link so that we can take a look.

Hope that helps.

Thank you.

The website is Muddsmfg.com, however it isn’t live yet so you won’t be able to view it.

@jason31,

Would you mind to share with us your website details? please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

Just added the information in a secure note.

Thank you

@jason31,

I don’t see any custom code that conflict with the header label and your product post meta, so to help you with your concern, please use the CSS code below and add it to your X > Theme Options then CSS.

.variations label, .product_meta .sku_wrapper, .product_meta .posted_in {
  color: #000000;
}
.product_meta .sku_wrapper .sku {
  color: #9ccf77;
}

Hope that helps.

Thank you.

That fixed my issue on the products pages. Thank you!
I’m still having the similar

issue with my checkout page. See attached.

@jason31,

To make your label text visible on the checkout page, please add the CSS code below.

.woocommerce-checkout label, .woocommerce-checkout-review-order-table, .woocommerce-checkout-payment {
  color: #000000;
} 

Please note that custom development is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

Hope that helps.

Thank you.

That fixed my issues!

Thanks for all of your help.

You’re welcome!
We’re glad @Cramaton were able to help you out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.