Nếu bạn muốn thay đổi bảng màu của lịch WooCommerce Bookings trong quan điểm của khách hàng, bạn có thể làm như vậy bằng cách sửa đổi một số phong cách CSS.
Nếu bạn không sử dụng một chủ đề con cho WordPress hoặc chủ đề của bạn không cho phép bạn nhập CSS tùy chỉnh, có lẽ bạn có thể cài đặt plugin Jetpack mà có một Trình soạn thảo CSS Tùy chỉnh được tích hợp .
Note: Đây là một Developer level tài liệu. Nếu bạn không quen với mã và giải quyết các xung đột tiềm năng, hãy chọn một Chuyên gia Woo hoặc Nhà phát triển để hỗ trợ. Chúng tôi không thể cung cấp hỗ trợ cho các biện pháp tùy chỉnh dưới chính sách Hỗ trợ của chúng tôi .
Dưới đây là các phong cách cho các yếu tố lịch khác nhau:
/* Sửa đổi các phong cách màu của lịch datepicker WooCommerce Bookings. Thêm bất kỳ / tất cả các phong cách này vào CSS tùy chỉnh của chủ đề của bạn, nhưng hãy chắc chắn thay đổi các mã màu hex theo lựa chọn của bạn. Họ đều đen ở đây.*/ /* Nền màu tiêu đề tháng */#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker-header {màu nền: #000000;}/* Màu nền mũi tên tháng trước / sau */#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-next, #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev {màu nền: #000000;}/* Mũi tên tháng trước / sau nếu không được phép, và các ngày lịch không available */.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {opacity: 0.35;}/* Màu nền tiêu đề ngày trong tuần */#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker th {màu nền: #000000;}/* Màu phông chữ tiêu đề ngày trong tuần */#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker th {color: #000000;}/* Màu nền của các ngày lịch trong quá khứ và không còn tồn tại (không có sẵn) */.ui-datepicker-calendar tbody {màu nền: #000000;}/* Màu nền của các ngày lịch chưa xảy ra */#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.bookable a {màu nền: #000000 !important;}/* Màu nền của ngày lịch chưa xảy ra khi di chuột qua */#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.bookable a:hover {màu nền: #000000 !important;}/* Các ngày lịch đã đặt hết */.wc-bookings-date-picker .ui-datepicker td.fully_booked a, .wc-bookings-date-picker .ui-datepicker td.fully_booked span {màu nền: #000000 !important;}/* Màu của các ngày lịch đã đặt hết */ .wc-bookings-date-picker .ui-datepicker td.ui-state-disabled {opacity: .35; }/* Các ngày không phải là bookable dựa trên các quy tắc hiện hành */.wc-bookings-date-picker .ui-datepicker td.not_bookable {màu nền: #FFFFFF !important;}/* Màu nền của ngày hiện tại trên lịch */ #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-today a { màu nền: #000000 !important; }/* Khối Thời gian */#wc-bookings-booking-form .block-picker li a {màu nền: #FFFFFF !important;}/* Khối Thời gian khi di chuột qua */#wc-bookings-booking-form .block-picker li a:hover {màu nền: #000000 !important;}#wc-bookings-booking-form .block-picker li a.selected { nền: #ff00ff !important; màu: #ffff00 !important;} #wc-bookings-booking-form .block-picker li a.selected:focus { màu viền: #00ffff !important;}/* Ngày đã chọn*/ #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-current-day a {màu nền: #000000 !important; } /* Khối Thời gian đã chọn */ #wc-bookings-booking-form .block-picker li a.selected { nền: #ffffff !important; } /* Khối chi phí đặt phòng */.wc-bookings-booking-form .wc-bookings-booking-cost { nền: #00ff00; màu: #ff0000;} /* Nút đặt ngay */.wc-bookings-booking-form-button.single_add_to_cart_button { nền: #00ff00; màu: #ff0000;} wc-bookings-booking-form-button.single_add_to_cart_button:hover { nền: #ff0000; màu: #00ff00;}