WooCommerce Booking Plugin Change Text Color

BB Theme
1

I need to change to color of the “Start Date” text in the WooCommerce Booking plugin. My product can be found here. When I preview another theme, it will have the text in different styles, fonts, and colors, but with the BB theme, the text is white. How would I go about editing the color of that text? Thanks in advance.

2

Hey Mark,

Welcome to the BB forums! :slight_smile:

That is correct! Different themes have different defaults for different elements. We are based on the bootstrap framework and the default color it has for the label class is white. If the plugin you’re using doesn’t have an option to change this, you can do so by adding the CSS snippet below. Simply copy the code and paste it into Appearance > Customize > Code > CSS Code. Feel free to change the color to whatever color you want.

.wc_bookings_field_start_date .label {
  color: #000;
}

Ben

3

Hey Ben,

Thank you so much, that is exactly what I was looking for! I have one more question for you. Where would I find the name of the other fields? Say I want to change the duration field, where would I typically go to find the name of these fields? I could try to guess and see if .wc_bookings_field_duration works, but I’m curious where I’d go so that when I run into this problem in the future, I’ll know the proper place to look. I assume it’s somewhere in the plugin folder, but after looking around, I can’t seem to find it.

Thank you again, Ben!
I’m glad I have access to a fast, helpful support network!

Thanks,
Mark

4

Hey Mark,

I’m using the Chrome Dev Tool to check for the classes being used to identify elements. If you’re using a PC, one way to easily access it is to right click on the element you want to check, then click on Inspect Element, then check to see if there are any styling we need to override. You can check a recording I just did for reference.
http://recordit.co/50b9uHAVDf

In this case, you’ll want to target .wc_bookings_field_duration label then add the property you wish to change. :slight_smile:

You can also check Danny’s reply on the link below as it discusses the same thing. :slight_smile:
http://forum.wpbeaverbuilder.com/support/q/full-row-width-using-sydney-theme/#post-97298

Ben