How to hide header and footer via custom css?

You can use custom css to modify the widget. The css selector for the widget is as follow: #adv_business_hrs-x where x is the widget ID that can be seen in the shortcode tab.

Hide header: To hide the header, you will add this custom css: (in this example, 2 is the widget ID, make sure you change it with your own widget ID)

#adv_business_hrs-2 .abh-wrapper .abh-header {
    display: none !important;
}

Hide footer: To hide the footer, you will add this custom css: (in this example, 2 is the widget ID, make sure you change it with your own widget ID)

#adv_business_hrs-2 .abh-wrapper .abh-footer {
    display: none !important;
}

and the widget will look like this: