[Resolved] Woocommerce buttons

[Olga]

Hello,

I have a little issue with selected time disappearing on desktop but not mobile on this woocommerce booking calendar.
Here is a link: http://cobbletales.com/product/edinburgh-old-town-architecture-tour/

to simulate the issue on desktop – select date then time. The selected box will then dissappear, which is not a wanted result. It should stay as an orange box with white text as was on hover. The mobile screen does not have the same issue – odd.

Could you please tell me how to fix this?

Best,
Olga

[Jamal]

Hi

I don’t know how you are adding that css but there seems to be lots of !important overriding each other. Best to ask that plugin’s developer(s).

Anyway this css

#wc-bookings-booking-form .block-picker li a {
    background-color: #FFFFFF !important;
}

Is overriding this

.wc-bookings-booking-form .block-picker li a.selected {
    background: #239e57!important;
    color: #fff!important;
}

You might try adding the css below to your child theme css or through the plugin mentioned here https://docs.generatepress.com/article/adding-css/#simple-css

#wc-bookings-booking-form .block-picker li a {
    background-color: #FFFFFF;
}

.wc-bookings-booking-form .block-picker li a.selected {
    background: #e87400;
    color: #3a3a3a;
}

[Olga]

Hi Jamal,

I add css on Simple css, whatever was added manually was per directions from generate press, because woocommerce are useless with customisation advice.They blame every styling issue on the theme.

the css you posted at the top are not something I added, so no idea where it gets it from. When you say best ask “that plugin developer”, you mean woocommerce, right?

I pasted in you suggested css and nothing changed.

[Leo]

Yeah looks like the booking calendar was inserted by WooCommerce?

If so their support should be able to look at the issue for you.

[Olga]

The thought of contacting woocommerce gives me headache. Solved it myself, apparently I can do css now!So proud.

#wc-bookings-booking-form .block-picker li a.selected {
background: #e87400 !important;
}

Thank you for your input guys,

O

[Tom]

Thanks for posting the solution 🙂

[Author]

Posts