I want to remove the timeslots that can be selected. Since the opening hours are beyond 00:00 these timeslots are currently confusing. So I'd like to replace the "21:00-00:00" with "pick this date". Is this possible? Or otherwise remove the pick a time option completely, so customers only can select a date.
Unfortunately it is not possible to remove the time slot completely. What you can do is hide the end time of a service using custom CSS.
You can use this script to show only the starting times:
<script>
setInterval(function () {
var elements = document.getElementsByClassName('el-radio-button__orig-radio');
var appointment_times = document.getElementsByClassName('el-radio-button__inner');
for (var i = 0; i < elements.length; i++) {
appointment_times[i].innerHTML = appointment_times[i].innerHTML.split(' - ')[0];
}
}, 1000)
</script>
Custom code needs to be applied to the page where the booking form is. Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways.
If you need help with adding custom CSS to the page, please take a look at this article.
If you need help with adding custom JS to the page, please take a look at this article.
If you have any other questions or concerns feel free to open a new ticket and we will gladly help out.
I want to remove the timeslots that can be selected. Since the opening hours are beyond 00:00 these timeslots are currently confusing. So I'd like to replace the "21:00-00:00" with "pick this date". Is this possible? Or otherwise remove the pick a time option completely, so customers only can select a date.
Thanks,
Jelle
Hi Jelle
Unfortunately it is not possible to remove the time slot completely. What you can do is hide the end time of a service using custom CSS.
You can use this script to show only the starting times: <script> setInterval(function () { var elements = document.getElementsByClassName('el-radio-button__orig-radio'); var appointment_times = document.getElementsByClassName('el-radio-button__inner'); for (var i = 0; i < elements.length; i++) { appointment_times[i].innerHTML = appointment_times[i].innerHTML.split(' - ')[0]; } }, 1000) </script>Custom code needs to be applied to the page where the booking form is. Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways.
If you need help with adding custom CSS to the page, please take a look at this article.
If you need help with adding custom JS to the page, please take a look at this article.
If you have any other questions or concerns feel free to open a new ticket and we will gladly help out.