How to add custom css for custom classname from widget settings?

  • Profile Image
    Asked on July 22, 2019 at 09:45 AM


    In the Appointment Slots widget, is it possible to add CSS that "hides" an appointment time when inventory for that item is 0, rather than just showing "None"?

    Also, the widget is adding a scroll bar but also resizing so that all appointments are showing, rendering the scroll bar unneeded. Is it possible to set the size of the widget so that the scroll bar serves a purpose, or remove the scroll bar when the full list is showing?

    Thank you,


  • Profile Image
    Answered on July 22, 2019 at 10:13 AM

    Yes, we can hide options with a value of 0 in css. To do this, we need to create custom css from widget settings.

    1- Please click on Widget Settings button.
    2- Please click CUSTOM CSS tab.
    4- Please add CSS code is shown below:

    .checkbox.line-through.text-muted.checked, .checkbox.line-through.text-muted.checked + span {
      display: none !important;

    5- Please click Update Widget button.

    1563804961Screen Shot 2019-07-22 at 17.1

    After doing this process, the scroll problem will disappear.

    I created an example form:

    Feel free to contact us if you need further assistance.

  • Profile Image
    Answered on July 22, 2019 at 10:22 AM

    Hello again Kat, 

    I was also checking the form you have linked and have an alternative solution. 

    You can try injecting this code into appointments widget:

    label.text-muted, .none-left {display: none;}

    Guide: How-to-Inject-CSS-Codes-to-Widgets

    Also, to get rid of a scrollbar, I would suggest deleting empty options at the bottom:


    We will be glad to assist if you need more help, just let us know. 

  • Profile Image
    Answered on July 22, 2019 at 11:07 AM

    Victoria, your solution worked perfectly on both counts. I'd missed that I had extra fields and the CSS for hiding filled appointments did exactly that. Thank you!